From 56abf585a4783a9e0b880927f97cf157af3168cb Mon Sep 17 00:00:00 2001 From: Nishu Goel Date: Thu, 24 Jun 2021 03:57:00 +0530 Subject: [PATCH 01/13] capture number ajax requests --- custom_metrics/num_ajax_requests.js | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 custom_metrics/num_ajax_requests.js diff --git a/custom_metrics/num_ajax_requests.js b/custom_metrics/num_ajax_requests.js new file mode 100644 index 00000000..777284a9 --- /dev/null +++ b/custom_metrics/num_ajax_requests.js @@ -0,0 +1,2 @@ +var ajax_apis = ['xmlhttprequest', 'fetch', 'beacon'] +return window.performance.getEntriesByType('resource').filter(r => ajax_apis.includes(r.initiatorType)).length \ No newline at end of file From b087d9f75bbe099e5ab38fc22042d44970363e8f Mon Sep 17 00:00:00 2001 From: Nishu Goel Date: Fri, 25 Jun 2021 03:17:44 +0530 Subject: [PATCH 02/13] add custom metrics to Javascript topic --- custom_metrics/javascript.js | 46 +++++++++++++++++++++++++++++ custom_metrics/num_ajax_requests.js | 2 -- 2 files changed, 46 insertions(+), 2 deletions(-) create mode 100644 custom_metrics/javascript.js delete mode 100644 custom_metrics/num_ajax_requests.js diff --git a/custom_metrics/javascript.js b/custom_metrics/javascript.js new file mode 100644 index 00000000..d64a7ca7 --- /dev/null +++ b/custom_metrics/javascript.js @@ -0,0 +1,46 @@ +return JSON.stringify({ + 'num-ajax-requests': (() => { + // Returns the number of ajax requests per page. + var ajax_apis = ['xmlhttprequest', 'fetch', 'beacon']; + return window.performance.getEntriesByType('resource').filter(r => ajax_apis.includes(r.initiatorType)).length; + + })(), + // Returns the number of iframes per page. + 'iframe': document.getElementsByTagName('iframe').length, + 'ajax_protocol': (() => { + // Returns the percentage of http 2 protocol used. + try { + var requests = $WPT_REQUESTS; + var usage_percent + if (requests.length > 0) { + var num_requests = requests.length; + var http2_count = requests.filter(r => r.protocol === "h2").length; + usage_percent = (http2_count / num_requests) * 100; + } + else { + usage_percent = null; + } + + return usage_percent; + } catch (e) { + return null; + } + })(), + 'content-types': (() => { + // Returns the content-types of requests. + try { + var requests = $WPT_REQUESTS; + if (requests.length > 0) { + return requests.map(req => req.request_headers["accept"]) + } + else { + return null + } + + } catch (e) { + return null; + } + })(), + // Returns the number of ajax requests using beacon. + 'beacon_ajax_usage': window.performance.getEntriesByType('resource').filter(r => r.initiatorType === 'beacon').length +}); \ No newline at end of file diff --git a/custom_metrics/num_ajax_requests.js b/custom_metrics/num_ajax_requests.js deleted file mode 100644 index 777284a9..00000000 --- a/custom_metrics/num_ajax_requests.js +++ /dev/null @@ -1,2 +0,0 @@ -var ajax_apis = ['xmlhttprequest', 'fetch', 'beacon'] -return window.performance.getEntriesByType('resource').filter(r => ajax_apis.includes(r.initiatorType)).length \ No newline at end of file From 58571e3f3c77a1d62e9d932faedea520259d50ed Mon Sep 17 00:00:00 2001 From: Nishu Goel Date: Mon, 28 Jun 2021 03:40:43 +0530 Subject: [PATCH 03/13] update metrics for webcomponents, shadow DOM, request protocols --- custom_metrics/javascript.js | 43 +++++++++++++++++++++++++++--------- 1 file changed, 32 insertions(+), 11 deletions(-) diff --git a/custom_metrics/javascript.js b/custom_metrics/javascript.js index d64a7ca7..e28b10a8 100644 --- a/custom_metrics/javascript.js +++ b/custom_metrics/javascript.js @@ -5,23 +5,46 @@ return JSON.stringify({ return window.performance.getEntriesByType('resource').filter(r => ajax_apis.includes(r.initiatorType)).length; })(), + // Returns the number of ajax requests using beacon. + 'beacon_ajax_usage': window.performance.getEntriesByType('resource').filter(r => r.initiatorType === 'beacon').length, // Returns the number of iframes per page. 'iframe': document.getElementsByTagName('iframe').length, - 'ajax_protocol': (() => { + 'requests_protocol': (() => { // Returns the percentage of http 2 protocol used. try { var requests = $WPT_REQUESTS; - var usage_percent if (requests.length > 0) { - var num_requests = requests.length; - var http2_count = requests.filter(r => r.protocol === "h2").length; - usage_percent = (http2_count / num_requests) * 100; + var ajaxs = window.performance.getEntriesByType('resource').filter(r => ['xmlhttprequest', 'fetch', 'beacon'].includes(r.initiatorType)) + var resources = window.performance.getEntriesByType('resource').filter(r => r.initiatorType !== 'xmlhttprequest' && r.initiatorType !== 'fetch' && r.initiatorType !== 'beacon') + return JSON.stringify({ + 'total_requests': requests.length, + 'total_h1': requests.filter(r => ["http/1.1", "http/1"].includes(r.protocol)).length, + 'ajax_h1': ajaxs.filter(r => ["http/1.1", "http/1"].includes(r.nextHopProtocol)).length, + 'resources_h1': resources.filter(r => ["http/1.1", "http/1"].includes(r.nextHopProtocol)).length, + 'total_h2': requests.filter(r => ["h2", "http/2", "http2"].includes(r.protocol)).length, + 'ajax_h2': ajaxs.filter(r => ["h2", "http/2", "http2"].includes(r.nextHopProtocol)).length, + 'resources_h2': resources.filter(r => ["h2", "http/2", "http2"].includes(r.nextHopProtocol)).length, + 'total_h3': requests.filter(r => r.protocol === "http/3").length, + 'ajax_h3': ajaxs.filter(e => r.nextHopProtocol === "http/3").length, + 'resources_h3': resources.filter(e => r.nextHopProtocol === "http/3").length, + }); } else { - usage_percent = null; + return null; } - - return usage_percent; + } catch (e) { + return null; + } + })(), + 'num_webcomp_shadow': (() => { + // Returns the number of web components or shadow roots on a web page. + try { + var elements_with_hyphen = Array.from(document.body.getElementsByTagName("*")).filter(e => e.nodeName.includes('-')); + return JSON.stringify({ + 'total_potential_WCs': elements_with_hyphen.length, + 'custom_elements': elements_with_hyphen.filter(e => customElements.get(e.nodeName.toLowerCase())).length, + 'shadow_roots': elements_with_hyphen.filter(e => e.shadowRoot).length, + }) } catch (e) { return null; } @@ -31,7 +54,7 @@ return JSON.stringify({ try { var requests = $WPT_REQUESTS; if (requests.length > 0) { - return requests.map(req => req.request_headers["accept"]) + var types = requests.map(req => req.response_headers["Content-Type"]) } else { return null @@ -41,6 +64,4 @@ return JSON.stringify({ return null; } })(), - // Returns the number of ajax requests using beacon. - 'beacon_ajax_usage': window.performance.getEntriesByType('resource').filter(r => r.initiatorType === 'beacon').length }); \ No newline at end of file From 0f91f8dd3d1a5e4d400b336df24e26d612d0eb5c Mon Sep 17 00:00:00 2001 From: Nishu Goel Date: Tue, 29 Jun 2021 04:16:36 +0530 Subject: [PATCH 04/13] addadd memory, content type metric --- custom_metrics/javascript.js | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/custom_metrics/javascript.js b/custom_metrics/javascript.js index e28b10a8..2d805c2b 100644 --- a/custom_metrics/javascript.js +++ b/custom_metrics/javascript.js @@ -54,14 +54,28 @@ return JSON.stringify({ try { var requests = $WPT_REQUESTS; if (requests.length > 0) { - var types = requests.map(req => req.response_headers["Content-Type"]) + return requests.map(req => req.response_headers['content-type']); } else { - return null + return requests.length } } catch (e) { return null; } })(), + 'memory_usage': (() => { + /* Returns the memory usage of a page - JS and dom elements only + Important - webpagetest needs flags to be test: + --disable-web-security, --no-site-isolation */ + try { + return new Promise((resolve) => { + performance.measureUserAgentSpecificMemory().then((value) => { + resolve(JSON.stringify(value)); + }); + }); + } catch (e) { + return null; + } + })(), }); \ No newline at end of file From a44a90e1a167eaca176a512c6d2116392f182f35 Mon Sep 17 00:00:00 2001 From: Max Ostapenko Date: Tue, 29 Jun 2021 18:07:18 +0200 Subject: [PATCH 05/13] script tag properties --- custom_metrics/javascript.js | 180 ++++++++++++++++++++--------------- 1 file changed, 103 insertions(+), 77 deletions(-) diff --git a/custom_metrics/javascript.js b/custom_metrics/javascript.js index 2d805c2b..317cc5a9 100644 --- a/custom_metrics/javascript.js +++ b/custom_metrics/javascript.js @@ -1,81 +1,107 @@ +//[javascript] +// Uncomment the previous line for testing on webpagetest.org + +// Please, refer to instructions for adding a custom metric in almanac.js. + +const requests = $WPT_REQUESTS; + return JSON.stringify({ - 'num-ajax-requests': (() => { - // Returns the number of ajax requests per page. - var ajax_apis = ['xmlhttprequest', 'fetch', 'beacon']; - return window.performance.getEntriesByType('resource').filter(r => ajax_apis.includes(r.initiatorType)).length; + 'num-ajax-requests': (() => { + // Returns the number of ajax requests per page. + var ajax_apis = ['xmlhttprequest', 'fetch', 'beacon']; + return window.performance.getEntriesByType('resource').filter((r) => ajax_apis.includes(r.initiatorType)).length; + })(), + + // Returns the number of ajax requests using beacon. + beacon_ajax_usage: window.performance.getEntriesByType('resource').filter((r) => r.initiatorType === 'beacon').length, + + // Returns the number of iframes per page. + iframe: document.getElementsByTagName('iframe').length, - })(), - // Returns the number of ajax requests using beacon. - 'beacon_ajax_usage': window.performance.getEntriesByType('resource').filter(r => r.initiatorType === 'beacon').length, - // Returns the number of iframes per page. - 'iframe': document.getElementsByTagName('iframe').length, - 'requests_protocol': (() => { - // Returns the percentage of http 2 protocol used. - try { - var requests = $WPT_REQUESTS; - if (requests.length > 0) { - var ajaxs = window.performance.getEntriesByType('resource').filter(r => ['xmlhttprequest', 'fetch', 'beacon'].includes(r.initiatorType)) - var resources = window.performance.getEntriesByType('resource').filter(r => r.initiatorType !== 'xmlhttprequest' && r.initiatorType !== 'fetch' && r.initiatorType !== 'beacon') - return JSON.stringify({ - 'total_requests': requests.length, - 'total_h1': requests.filter(r => ["http/1.1", "http/1"].includes(r.protocol)).length, - 'ajax_h1': ajaxs.filter(r => ["http/1.1", "http/1"].includes(r.nextHopProtocol)).length, - 'resources_h1': resources.filter(r => ["http/1.1", "http/1"].includes(r.nextHopProtocol)).length, - 'total_h2': requests.filter(r => ["h2", "http/2", "http2"].includes(r.protocol)).length, - 'ajax_h2': ajaxs.filter(r => ["h2", "http/2", "http2"].includes(r.nextHopProtocol)).length, - 'resources_h2': resources.filter(r => ["h2", "http/2", "http2"].includes(r.nextHopProtocol)).length, - 'total_h3': requests.filter(r => r.protocol === "http/3").length, - 'ajax_h3': ajaxs.filter(e => r.nextHopProtocol === "http/3").length, - 'resources_h3': resources.filter(e => r.nextHopProtocol === "http/3").length, - }); - } - else { - return null; - } - } catch (e) { - return null; - } - })(), - 'num_webcomp_shadow': (() => { - // Returns the number of web components or shadow roots on a web page. - try { - var elements_with_hyphen = Array.from(document.body.getElementsByTagName("*")).filter(e => e.nodeName.includes('-')); - return JSON.stringify({ - 'total_potential_WCs': elements_with_hyphen.length, - 'custom_elements': elements_with_hyphen.filter(e => customElements.get(e.nodeName.toLowerCase())).length, - 'shadow_roots': elements_with_hyphen.filter(e => e.shadowRoot).length, - }) - } catch (e) { - return null; - } - })(), - 'content-types': (() => { - // Returns the content-types of requests. - try { - var requests = $WPT_REQUESTS; - if (requests.length > 0) { - return requests.map(req => req.response_headers['content-type']); - } - else { - return requests.length - } + requests_protocol: (() => { + // Returns the percentage of http 2 protocol used. + try { + if (requests.length > 0) { + var ajaxs = window.performance.getEntriesByType('resource').filter((r) => ['xmlhttprequest', 'fetch', 'beacon'].includes(r.initiatorType)); + var resources = window.performance.getEntriesByType('resource').filter((r) => r.initiatorType !== 'xmlhttprequest' && r.initiatorType !== 'fetch' && r.initiatorType !== 'beacon'); + return JSON.stringify({ + total_requests: requests.length, + total_h1: requests.filter((r) => ['http/1.1', 'http/1'].includes(r.protocol)).length, + ajax_h1: ajaxs.filter((r) => ['http/1.1', 'http/1'].includes(r.nextHopProtocol)).length, + resources_h1: resources.filter((r) => ['http/1.1', 'http/1'].includes(r.nextHopProtocol)).length, + total_h2: requests.filter((r) => ['h2', 'http/2', 'http2'].includes(r.protocol)).length, + ajax_h2: ajaxs.filter((r) => ['h2', 'http/2', 'http2'].includes(r.nextHopProtocol)).length, + resources_h2: resources.filter((r) => ['h2', 'http/2', 'http2'].includes(r.nextHopProtocol)).length, + total_h3: requests.filter((r) => r.protocol === 'http/3').length, + ajax_h3: ajaxs.filter((e) => r.nextHopProtocol === 'http/3').length, + resources_h3: resources.filter((e) => r.nextHopProtocol === 'http/3').length, + }); + } else { + return null; + } + } catch (e) { + return null; + } + })(), - } catch (e) { - return null; - } - })(), - 'memory_usage': (() => { - /* Returns the memory usage of a page - JS and dom elements only - Important - webpagetest needs flags to be test: + num_webcomp_shadow: (() => { + // Returns the number of web components or shadow roots on a web page. + try { + var elements_with_hyphen = Array.from(document.body.getElementsByTagName('*')).filter((e) => e.nodeName.includes('-')); + return JSON.stringify({ + total_potential_WCs: elements_with_hyphen.length, + custom_elements: elements_with_hyphen.filter((e) => customElements.get(e.nodeName.toLowerCase())).length, + shadow_roots: elements_with_hyphen.filter((e) => e.shadowRoot).length, + }); + } catch (e) { + return null; + } + })(), + + content_types: (() => { + // Returns the content-types of requests. + try { + if (requests.length > 0) { + return requests.map((req) => req.response_headers['content-type']); + } else { + return requests.length; + } + } catch (e) { + return null; + } + })(), + + memory_usage: (() => { + /* Returns the memory usage of a page - JS and dom elements only + Important - webpagetest needs flags to be test: --disable-web-security, --no-site-isolation */ - try { - return new Promise((resolve) => { - performance.measureUserAgentSpecificMemory().then((value) => { - resolve(JSON.stringify(value)); - }); - }); - } catch (e) { - return null; - } - })(), -}); \ No newline at end of file + try { + return new Promise((resolve) => { + performance.measureUserAgentSpecificMemory().then((value) => { + resolve(JSON.stringify(value)); + }); + }); + } catch (e) { + return null; + } + })(), + + script_properties: (() => { + let script_tags = Array.from(document.querySelectorAll('script')); + + let script_data = { + total: script_tags.length, + async: script_tags.filter(tag => tag.async).length, + defer: script_tags.filter(tag => tag.defer).length, + crossorigin: script_tags.filter(tag => tag.crossorigin).length, + integrity: script_tags.filter(tag => tag.integrity).length, + nomodule: script_tags.filter(tag => tag.nomodule).length, + nonce: script_tags.filter(tag => tag.nonce).length, + referrerpolicy: script_tags.filter(tag => tag.referrerpolicy).length, + src: script_tags.filter(tag => tag.src).length, + type_module: script_tags.filter(tag => tag.type=='module').length, + }; + + return script_data; + })() +}); From 28ea84f1a9655545a140aba5f35ec15f083bfe60 Mon Sep 17 00:00:00 2001 From: Max Ostapenko Date: Tue, 29 Jun 2021 18:21:42 +0200 Subject: [PATCH 06/13] noscript tags --- custom_metrics/javascript.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/custom_metrics/javascript.js b/custom_metrics/javascript.js index 317cc5a9..4886cf99 100644 --- a/custom_metrics/javascript.js +++ b/custom_metrics/javascript.js @@ -49,7 +49,7 @@ return JSON.stringify({ try { var elements_with_hyphen = Array.from(document.body.getElementsByTagName('*')).filter((e) => e.nodeName.includes('-')); return JSON.stringify({ - total_potential_WCs: elements_with_hyphen.length, + total_potential_web_components: elements_with_hyphen.length, custom_elements: elements_with_hyphen.filter((e) => customElements.get(e.nodeName.toLowerCase())).length, shadow_roots: elements_with_hyphen.filter((e) => e.shadowRoot).length, }); @@ -86,7 +86,7 @@ return JSON.stringify({ } })(), - script_properties: (() => { + script_tags: (() => { let script_tags = Array.from(document.querySelectorAll('script')); let script_data = { @@ -103,5 +103,14 @@ return JSON.stringify({ }; return script_data; + })(), + + noscript_tags: (() => { + let noscript_data = { + total: document.querySelectorAll('noscript').length, + }; + + return noscript_data; })() + }); From 472eed75d0f7255fae2582ef78af3be88a25f9dd Mon Sep 17 00:00:00 2001 From: Nishu Goel Date: Wed, 30 Jun 2021 00:52:31 +0530 Subject: [PATCH 07/13] refactor --- custom_metrics/javascript.js | 77 ++++++++++++++++-------------------- 1 file changed, 33 insertions(+), 44 deletions(-) diff --git a/custom_metrics/javascript.js b/custom_metrics/javascript.js index 2d805c2b..54296f81 100644 --- a/custom_metrics/javascript.js +++ b/custom_metrics/javascript.js @@ -1,69 +1,58 @@ +const requests = $WPT_REQUESTS; + return JSON.stringify({ - 'num-ajax-requests': (() => { + 'ajax-requests': (() => { // Returns the number of ajax requests per page. var ajax_apis = ['xmlhttprequest', 'fetch', 'beacon']; - return window.performance.getEntriesByType('resource').filter(r => ajax_apis.includes(r.initiatorType)).length; - + return window.performance.getEntriesByType('resource').filter(r => ajax_apis.includes(r.initiatorType)).reduce((obj, r) => { + obj.total++; + obj[r.initiatorType]++; + return obj; + }, Object.fromEntries([...ajax_apis, 'total'].map(api => [api, 0]))) })(), - // Returns the number of ajax requests using beacon. - 'beacon_ajax_usage': window.performance.getEntriesByType('resource').filter(r => r.initiatorType === 'beacon').length, // Returns the number of iframes per page. 'iframe': document.getElementsByTagName('iframe').length, 'requests_protocol': (() => { // Returns the percentage of http 2 protocol used. try { - var requests = $WPT_REQUESTS; - if (requests.length > 0) { - var ajaxs = window.performance.getEntriesByType('resource').filter(r => ['xmlhttprequest', 'fetch', 'beacon'].includes(r.initiatorType)) - var resources = window.performance.getEntriesByType('resource').filter(r => r.initiatorType !== 'xmlhttprequest' && r.initiatorType !== 'fetch' && r.initiatorType !== 'beacon') - return JSON.stringify({ - 'total_requests': requests.length, - 'total_h1': requests.filter(r => ["http/1.1", "http/1"].includes(r.protocol)).length, - 'ajax_h1': ajaxs.filter(r => ["http/1.1", "http/1"].includes(r.nextHopProtocol)).length, - 'resources_h1': resources.filter(r => ["http/1.1", "http/1"].includes(r.nextHopProtocol)).length, - 'total_h2': requests.filter(r => ["h2", "http/2", "http2"].includes(r.protocol)).length, - 'ajax_h2': ajaxs.filter(r => ["h2", "http/2", "http2"].includes(r.nextHopProtocol)).length, - 'resources_h2': resources.filter(r => ["h2", "http/2", "http2"].includes(r.nextHopProtocol)).length, - 'total_h3': requests.filter(r => r.protocol === "http/3").length, - 'ajax_h3': ajaxs.filter(e => r.nextHopProtocol === "http/3").length, - 'resources_h3': resources.filter(e => r.nextHopProtocol === "http/3").length, - }); - } - else { - return null; - } + var ajaxs = window.performance.getEntriesByType('resource').filter(r => ['xmlhttprequest', 'fetch', 'beacon'].includes(r.initiatorType)) + var resources = window.performance.getEntriesByType('resource').filter(r => r.initiatorType !== 'xmlhttprequest' && r.initiatorType !== 'fetch' && r.initiatorType !== 'beacon') + return JSON.stringify({ + 'total_requests': requests.length, + 'total_h1': requests.filter(r => ["http/1.1", "http/1"].includes(r.protocol)).length, + 'ajax_h1': ajaxs.filter(r => ["http/1.1", "http/1"].includes(r.nextHopProtocol)).length, + 'resources_h1': resources.filter(r => ["http/1.1", "http/1"].includes(r.nextHopProtocol)).length, + 'total_h2': requests.filter(r => ["h2", "http/2", "http2"].includes(r.protocol)).length, + 'ajax_h2': ajaxs.filter(r => ["h2", "http/2", "http2"].includes(r.nextHopProtocol)).length, + 'resources_h2': resources.filter(r => ["h2", "http/2", "http2"].includes(r.nextHopProtocol)).length, + 'total_h3': requests.filter(r => ["h3", "http/3", "h3-29"].includes(r.protocol)).length, + 'ajax_h3': ajaxs.filter(e => ["h3", "http/3", "h3-29"].includes(r.nextHopProtocol)).length, + 'resources_h3': resources.filter(e => ["h3", "http/3", "h3-29"].includes(r.nextHopProtocol)).length, + }); + } catch (e) { return null; } })(), - 'num_webcomp_shadow': (() => { + 'webcomponent_shadowDOM': (() => { // Returns the number of web components or shadow roots on a web page. try { var elements_with_hyphen = Array.from(document.body.getElementsByTagName("*")).filter(e => e.nodeName.includes('-')); + var unique_web_components = [...new Set(elements_with_hyphen.map(e => e.nodeName.toLowerCase()))]; + var shadow_roots = elements_with_hyphen.filter(e => e.shadowRoot) + var web_components = elements_with_hyphen.filter(e => customElements.get(e.nodeName.toLowerCase())); return JSON.stringify({ - 'total_potential_WCs': elements_with_hyphen.length, - 'custom_elements': elements_with_hyphen.filter(e => customElements.get(e.nodeName.toLowerCase())).length, - 'shadow_roots': elements_with_hyphen.filter(e => e.shadowRoot).length, + // TODO - find unique elements + 'total_potential_web_components': { 'elements': elements_with_hyphen, 'length': elements_with_hyphen.length }, + 'web_components': { 'elements': web_components, 'length': web_components.length }, + 'unique_web_components': { 'elements': unique_web_components, 'length': unique_web_components.length }, + 'shadow_roots': { 'elements': shadow_roots, 'length': shadow_roots.length } }) } catch (e) { return null; } })(), - 'content-types': (() => { - // Returns the content-types of requests. - try { - var requests = $WPT_REQUESTS; - if (requests.length > 0) { - return requests.map(req => req.response_headers['content-type']); - } - else { - return requests.length - } - - } catch (e) { - return null; - } - })(), + 'content-types': requests.map(req => req.response_headers['content-type']), 'memory_usage': (() => { /* Returns the memory usage of a page - JS and dom elements only Important - webpagetest needs flags to be test: From f6a6e24231692b19551b0e317620088b3fafd4ee Mon Sep 17 00:00:00 2001 From: Nishu Goel Date: Wed, 30 Jun 2021 04:29:22 +0530 Subject: [PATCH 08/13] wcustom_element metric exits in has_shadow_root --- custom_metrics/javascript.js | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/custom_metrics/javascript.js b/custom_metrics/javascript.js index ab6f6da1..bbe98e29 100644 --- a/custom_metrics/javascript.js +++ b/custom_metrics/javascript.js @@ -40,23 +40,6 @@ return JSON.stringify({ return null; } })(), - - webcomponents_shadowDOM: (() => { - // Returns the number of web components or shadow roots on a web page. - try { - var elements_with_hyphen = Array.from(document.getElementsByTagName("*")).filter(e => e.nodeName.includes('-')); - var shadow_roots = elements_with_hyphen.filter(e => e.shadowRoot) - var web_components = elements_with_hyphen.filter(e => customElements.get(e.nodeName.toLowerCase())); - let element_data = { - total_potential_web_components: elements_with_hyphen, - web_components: web_components, - shadow_roots: shadow_roots - } - return element_data; - } catch (e) { - return null; - } - })(), // Returns the content-types of requests. content_types: requests.map((req) => req.response_headers['content-type']), From 70a30783d235d94dd48866b0c1839f110565e106 Mon Sep 17 00:00:00 2001 From: Nishu Goel Date: Wed, 30 Jun 2021 23:06:10 +0530 Subject: [PATCH 09/13] add webcomponent_spec metric add charset,language Co-authored-by: Pankaj Parkar --- custom_metrics/javascript.js | 24 ++++++++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/custom_metrics/javascript.js b/custom_metrics/javascript.js index bbe98e29..2fafe99c 100644 --- a/custom_metrics/javascript.js +++ b/custom_metrics/javascript.js @@ -40,8 +40,24 @@ return JSON.stringify({ return null; } })(), - // Returns the content-types of requests. - content_types: requests.map((req) => req.response_headers['content-type']), + + web_component_specs: (() => { + + var getNodeName = (el) => el.nodeName.toLowerCase() + var elements_with_hyphen = Array.from(document.getElementsByTagName("*")).filter(e => e.nodeName.includes('-')); + var unique_elements_with_hyphen = [...new Set(elements_with_hyphen.map(e => e.nodeName))].map(element => { return elements_with_hyphen.find(e => e.nodeName === element) }); + var web_components = unique_elements_with_hyphen.filter(e => customElements.get(e.nodeName.toLowerCase())); + + // Checking which web comp spec is used by found web_components (template, shadow_dom, custom_elements) + var shadow_roots = web_components.filter(e => e.shadowRoot) + var template = web_components.filter(e => Array.from(e.children).some(r => r.nodeName.toLowerCase() === 'template')) + var web_component_specs = { + 'custom_elements': web_components.map(getNodeName), + 'shadow_roots': shadow_roots.map(getNodeName), + 'template': template.map(getNodeName) + } + return web_component_specs + }), script_tags: (() => { let script_tags = Array.from(document.querySelectorAll('script')); @@ -57,6 +73,10 @@ return JSON.stringify({ referrerpolicy: script_tags.filter(tag => tag.referrerpolicy).length, src: script_tags.filter(tag => tag.src).length, type_module: script_tags.filter(tag => tag.type == 'module').length, + //deprecated attribute adoption + charset: script_tags.filter(tag => tag.charset).length, + language: script_tags.filter(tag => tag.attributes['language']).length, + }; return script_data; From e17c9de9a4de7b424fb5dc90c484589d5392b380 Mon Sep 17 00:00:00 2001 From: Nishu Goel Date: Wed, 30 Jun 2021 23:35:28 +0530 Subject: [PATCH 10/13] add async_and_defer, defer_without_src --- custom_metrics/javascript.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/custom_metrics/javascript.js b/custom_metrics/javascript.js index 2fafe99c..b14825da 100644 --- a/custom_metrics/javascript.js +++ b/custom_metrics/javascript.js @@ -73,6 +73,8 @@ return JSON.stringify({ referrerpolicy: script_tags.filter(tag => tag.referrerpolicy).length, src: script_tags.filter(tag => tag.src).length, type_module: script_tags.filter(tag => tag.type == 'module').length, + async_and_defer: script_tags.filter(tag => tag.async && tag.defer).length, + defer_without_src: script_tags.filter(tag => tag.defer && !tag.src).length, //deprecated attribute adoption charset: script_tags.filter(tag => tag.charset).length, language: script_tags.filter(tag => tag.attributes['language']).length, From d3e10204abfe02d2f1a3634867595d4c65977708 Mon Sep 17 00:00:00 2001 From: Nishu Goel Date: Wed, 30 Jun 2021 23:37:17 +0530 Subject: [PATCH 11/13] add inline script metric --- custom_metrics/javascript.js | 1 + 1 file changed, 1 insertion(+) diff --git a/custom_metrics/javascript.js b/custom_metrics/javascript.js index b14825da..1997e099 100644 --- a/custom_metrics/javascript.js +++ b/custom_metrics/javascript.js @@ -72,6 +72,7 @@ return JSON.stringify({ nonce: script_tags.filter(tag => tag.nonce).length, referrerpolicy: script_tags.filter(tag => tag.referrerpolicy).length, src: script_tags.filter(tag => tag.src).length, + inline: script_tags.filter(tag => !tag.src).length, type_module: script_tags.filter(tag => tag.type == 'module').length, async_and_defer: script_tags.filter(tag => tag.async && tag.defer).length, defer_without_src: script_tags.filter(tag => tag.defer && !tag.src).length, From b88b427521fa3ed0f7230a3798588a4f0168f72e Mon Sep 17 00:00:00 2001 From: Nishu Goel Date: Wed, 30 Jun 2021 23:53:11 +0530 Subject: [PATCH 12/13] change attributes to hasAttribute --- custom_metrics/javascript.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/custom_metrics/javascript.js b/custom_metrics/javascript.js index 1997e099..0a7eb85e 100644 --- a/custom_metrics/javascript.js +++ b/custom_metrics/javascript.js @@ -78,7 +78,7 @@ return JSON.stringify({ defer_without_src: script_tags.filter(tag => tag.defer && !tag.src).length, //deprecated attribute adoption charset: script_tags.filter(tag => tag.charset).length, - language: script_tags.filter(tag => tag.attributes['language']).length, + language: script_tags.filter(tag => tag.hasAttribute('language')).length }; From 5ff92c7f8b2427e5707701600ce6359534f24e82 Mon Sep 17 00:00:00 2001 From: Nishu Goel Date: Sat, 28 Aug 2021 23:59:30 +0530 Subject: [PATCH 13/13] fix web_component metric --- custom_metrics/javascript.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/custom_metrics/javascript.js b/custom_metrics/javascript.js index 0a7eb85e..b86d68a0 100644 --- a/custom_metrics/javascript.js +++ b/custom_metrics/javascript.js @@ -57,7 +57,7 @@ return JSON.stringify({ 'template': template.map(getNodeName) } return web_component_specs - }), + })(), script_tags: (() => { let script_tags = Array.from(document.querySelectorAll('script'));