Skip to content

Commit 3055ec4

Browse files
tunethewebnrllh
tunetheweb
and
nrllh
authored
Javascript 2024 markdown (#4020)
* Initial conversion * Edits and image generation * Add featured stats * More chart descriptions * Final chart descriptions * Tweaks * More edits * Performance chapter reference * Update contributors.json Onur Güler (JS Chapter) * Update javascript.md DOI & Onur's contributions * Fix DOI --------- Co-authored-by: Nurullah Demir <13475745+nrllh@users.noreply.github.com>
1 parent f9e6b73 commit 3055ec4

File tree

41 files changed

+890
-290
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+890
-290
lines changed

‎sql/2024/javascript/bytes_by_3p.sql‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@ FROM (
1212
IF(NET.HOST(url) IN (
1313
SELECT domain FROM `httparchive.almanac.third_parties` WHERE date = '2024-06-01' AND category != 'hosting'
1414
), 'third party', 'first party') AS host,
15-
SUM(cast(json_value(payload, '$.response.bodySize') AS INT64)) / 1024 AS kbytes
15+
SUM(INT64(summary.respBodySize)) / 1024 AS kbytes
1616
FROM
17-
`httparchive.all.requests`
17+
`httparchive.crawl.requests`
1818

1919
WHERE
2020
date = '2024-06-01' AND

‎sql/2024/javascript/fid.sql‎

Lines changed: 0 additions & 30 deletions
This file was deleted.

‎sql/2024/javascript/render_blocking_javascript_by_rank.sql‎

Lines changed: 10 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
#standardSQL
22
# Percent of pages using render-blocking JavaScript.
3-
CREATE TEMPORARY FUNCTION getRenderBlockingScripts(payload STRING)
3+
CREATE TEMPORARY FUNCTION getRenderBlockingScripts(payload JSON)
44
RETURNS INT64
55
LANGUAGE js AS '''
66
try {
7-
var $ = JSON.parse(payload);
8-
var renderBlockingJS = $._renderBlockingJS;
7+
var renderBlockingJS = JSON.parse(payload)
98
return renderBlockingJS;
109
} catch (e) {
1110
return 0;
@@ -15,28 +14,14 @@ try {
1514
WITH render_blocking_scripts AS (
1615
SELECT
1716
client,
18-
url,
17+
page,
1918
rank,
20-
number_of_render_blocking_scripts
21-
FROM (
22-
SELECT
23-
client,
24-
page AS url,
25-
getRenderBlockingScripts(payload) AS number_of_render_blocking_scripts
26-
FROM
27-
`httparchive.all.pages`
28-
WHERE
29-
date = '2024-06-01'
30-
)
31-
JOIN (
32-
SELECT
33-
_TABLE_SUFFIX AS client,
34-
url,
35-
rank
36-
FROM
37-
`httparchive.summary_pages.2024_06_01_*`
38-
)
39-
USING (client, url)
19+
getRenderBlockingScripts(payload['_renderBlockingJS']) AS number_of_render_blocking_scripts
20+
FROM
21+
`httparchive.crawl.pages`
22+
WHERE
23+
date = '2024-06-01' AND
24+
is_root_page
4025
)
4126

4227
SELECT
@@ -47,7 +32,7 @@ SELECT
4732
COUNTIF(number_of_render_blocking_scripts > 0) / COUNT(0) AS pct_pages_with_render_blocking_scripts
4833
FROM
4934
render_blocking_scripts,
50-
UNNEST([1000, 10000, 100000, 1000000, 10000000]) AS rank_grouping
35+
UNNEST([1000, 10000, 100000, 1000000, 10000000, 100000000]) AS rank_grouping
5136
WHERE
5237
rank <= rank_grouping
5338
GROUP BY

‎sql/2024/javascript/usage_of_parcel.sql‎

Lines changed: 9 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,17 @@
11
#standardSQL
22
# Percent of pages using parcel
33

4-
WITH totals AS (
5-
SELECT
6-
_TABLE_SUFFIX AS client,
7-
COUNT(DISTINCT url) AS total_pages
8-
FROM
9-
`httparchive.summary_pages.2024_06_01_*`
10-
GROUP BY
11-
client
12-
),
13-
14-
parcel AS (
15-
SELECT
16-
_TABLE_SUFFIX AS client,
17-
COUNT(DISTINCT url) AS parcel_pages
18-
FROM
19-
`httparchive.technologies.2024_06_01_*`
20-
WHERE
21-
app = 'parcel'
22-
GROUP BY
23-
client
24-
)
25-
264
SELECT
275
client,
28-
parcel_pages,
29-
total_pages,
30-
parcel_pages / total_pages AS pct_parcel_pages
6+
COUNTIF('parcel' IN UNNEST(technologies.technology)) AS parcel_pages,
7+
COUNT(0) AS total_pages,
8+
COUNTIF('parcel' IN UNNEST(technologies.technology)) / COUNT(0) AS pct_parcel_pages
319
FROM
32-
totals
33-
JOIN
34-
parcel
35-
USING (client)
10+
`httparchive.crawl.pages`
11+
WHERE
12+
date = '2024-06-01' AND
13+
is_root_page
14+
GROUP BY
15+
client
3616
ORDER BY
3717
client

‎sql/2024/javascript/usage_of_parcel_by_rank.sql‎

Lines changed: 9 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -2,61 +2,17 @@
22
# Percent of pages using parcel grouped by rank
33
# usage_of_parcel_by_rank.sql
44

5-
WITH parcel_pages AS (
6-
SELECT
7-
_TABLE_SUFFIX AS client,
8-
url AS page
9-
FROM
10-
`httparchive.technologies.2024_06_01_*`
11-
WHERE
12-
app = 'parcel'
13-
),
14-
15-
rank_totals AS (
16-
SELECT
17-
_TABLE_SUFFIX AS client,
18-
rank_grouping,
19-
COUNT(0) AS total
20-
FROM
21-
`httparchive.summary_pages.2024_06_01_*`,
22-
UNNEST([1000, 10000, 100000, 1000000, 10000000]) AS rank_grouping
23-
WHERE
24-
rank <= rank_grouping
25-
GROUP BY
26-
client,
27-
rank_grouping
28-
),
29-
30-
pages AS (
31-
SELECT
32-
_TABLE_SUFFIX AS client,
33-
rank_grouping,
34-
url AS page
35-
FROM
36-
`httparchive.summary_pages.2024_06_01_*`,
37-
UNNEST([1000, 10000, 100000, 1000000, 10000000]) AS rank_grouping
38-
WHERE
39-
rank <= rank_grouping
40-
)
41-
425
SELECT
436
client,
44-
rank_grouping AS rank,
45-
COUNT(DISTINCT parcel_pages.page) AS count_parcel_pages,
46-
total,
47-
COUNT(DISTINCT parcel_pages.page) / total AS pct_parcel_pages
7+
COUNTIF('parcel' IN UNNEST(technologies.technology)) AS parcel_pages,
8+
COUNT(0) AS total_pages,
9+
COUNTIF('parcel' IN UNNEST(technologies.technology)) / COUNT(0) AS pct_parcel_pages
4810
FROM
49-
parcel_pages
50-
LEFT OUTER JOIN
51-
pages
52-
USING (client, page)
53-
JOIN
54-
rank_totals
55-
USING (client, rank_grouping)
11+
`httparchive.crawl.pages`
12+
WHERE
13+
date = '2024-06-01' AND
14+
is_root_page
5615
GROUP BY
57-
client,
58-
total,
59-
rank_grouping
16+
client
6017
ORDER BY
61-
client,
62-
rank_grouping
18+
client

‎sql/2024/javascript/usage_of_typescript_and_babel.sql‎

Lines changed: 15 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,10 @@
22
# Number of pages using TypeScript or Babel
33

44
# returns boolean whether the page uses Babel or TypeScript
5-
CREATE TEMPORARY FUNCTION getSourceMaps(payload STRING)
5+
CREATE TEMPORARY FUNCTION getSourceMaps(javascript JSON)
66
RETURNS STRUCT<hasSourceMaps BOOL, isPublic BOOL, isBabel BOOL, isTypeScript BOOL>
77
LANGUAGE js AS '''
88
try {
9-
const $ = JSON.parse(payload);
10-
const javascript = JSON.parse($._javascript);
11-
129
if (javascript && javascript.sourceMaps) {
1310
const { sourceMaps } = javascript;
1411
@@ -28,22 +25,20 @@ try {
2825

2926
SELECT
3027
client,
31-
COUNTIF(sourcemaps.isBabel = true) AS use_babel,
32-
COUNTIF(sourcemaps.isTypeScript = true) AS use_typescript,
33-
COUNT(0) AS total_pages_with_sourcemaps,
34-
COUNTIF(sourcemaps.isBabel = true) / COUNT(0) AS pct_use_babel,
35-
COUNTIF(sourcemaps.isTypeScript = true) / COUNT(0) AS pct_use_typescript
36-
FROM (
37-
SELECT
38-
client,
39-
page,
40-
getSourceMaps(payload) AS sourcemaps
41-
FROM
42-
`httparchive.all.pages`
43-
WHERE
44-
date = '2024-06-01'
45-
)
28+
COUNTIF(getSourceMaps(custom_metrics.javascript).isBabel) AS use_babel,
29+
COUNTIF(getSourceMaps(custom_metrics.javascript).isTypeScript) AS use_typescript,
30+
COUNTIF(getSourceMaps(custom_metrics.javascript).isPublic) AS uses_sourcemaps,
31+
COUNTIF(getSourceMaps(custom_metrics.javascript).isBabel) / COUNTIF(getSourceMaps(custom_metrics.javascript).isPublic) AS pct_source_maps_use_babel,
32+
COUNTIF(getSourceMaps(custom_metrics.javascript).isTypeScript) / COUNTIF(getSourceMaps(custom_metrics.javascript).isPublic) AS pct_source_maps_use_typescript,
33+
COUNT(0) AS total_pages,
34+
COUNTIF(getSourceMaps(custom_metrics.javascript).isBabel) / COUNT(0) AS pct_use_babel,
35+
COUNTIF(getSourceMaps(custom_metrics.javascript).isTypeScript) / COUNT(0) AS pct_use_typescript
36+
FROM
37+
`httparchive.crawl.pages`
4638
WHERE
47-
sourcemaps.isPublic = true
39+
date = '2024-06-01' AND
40+
is_root_page
4841
GROUP BY
4942
client
43+
ORDER BY
44+
client

‎sql/2024/javascript/usage_of_typescript_and_babel_by_rank.sql‎

Lines changed: 19 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,10 @@
22
# Number of pages using TypeScript or Babel grouped by rank
33

44
# returns boolean whether the page uses Babel or TypeScript
5-
CREATE TEMPORARY FUNCTION getSourceMaps(payload STRING)
5+
CREATE TEMPORARY FUNCTION getSourceMaps(javascript JSON)
66
RETURNS STRUCT<hasSourceMaps BOOL, isPublic BOOL, isBabel BOOL, isTypeScript BOOL>
77
LANGUAGE js AS '''
88
try {
9-
const $ = JSON.parse(payload);
10-
const javascript = JSON.parse($._javascript);
119
1210
if (javascript && javascript.sourceMaps) {
1311
const { sourceMaps } = javascript;
@@ -26,42 +24,28 @@ try {
2624
}
2725
''';
2826

29-
WITH pages AS (
30-
SELECT
31-
_TABLE_SUFFIX AS client,
32-
rank_grouping,
33-
url AS page
34-
FROM
35-
`httparchive.summary_pages.2024_06_01_*`,
36-
UNNEST([1000, 10000, 100000, 1000000, 10000000]) AS rank_grouping
37-
WHERE
38-
rank <= rank_grouping
39-
),
40-
41-
pages_sourcemaps AS (
42-
SELECT
43-
_TABLE_SUFFIX AS client,
44-
url AS page,
45-
getSourceMaps(payload) AS sourcemaps
46-
FROM
47-
`httparchive.pages.2024_06_01_*`
48-
)
49-
5027
SELECT
5128
client,
52-
rank_grouping AS rank,
53-
COUNTIF(sourcemaps.isBabel = true) AS use_babel,
54-
COUNTIF(sourcemaps.isTypeScript = true) AS use_typescript,
55-
COUNT(0) AS total_pages_with_sourcemaps,
56-
COUNTIF(sourcemaps.isBabel = true) / COUNT(0) AS pct_use_babel,
57-
COUNTIF(sourcemaps.isTypeScript = true) / COUNT(0) AS pct_use_typescript
29+
rank_grouping,
30+
CASE
31+
WHEN rank_grouping = 100000000 THEN 'all'
32+
ELSE FORMAT("%'d", rank_grouping)
33+
END AS ranking,
34+
COUNTIF(getSourceMaps(custom_metrics.javascript).isBabel) AS use_babel,
35+
COUNTIF(getSourceMaps(custom_metrics.javascript).isTypeScript) AS use_typescript,
36+
COUNTIF(getSourceMaps(custom_metrics.javascript).isPublic) AS uses_sourcemaps,
37+
COUNTIF(getSourceMaps(custom_metrics.javascript).isBabel) / COUNTIF(getSourceMaps(custom_metrics.javascript).isPublic) AS pct_source_maps_use_babel,
38+
COUNTIF(getSourceMaps(custom_metrics.javascript).isTypeScript) / COUNTIF(getSourceMaps(custom_metrics.javascript).isPublic) AS pct_source_maps_use_typescript,
39+
COUNT(0) AS total_pages,
40+
COUNTIF(getSourceMaps(custom_metrics.javascript).isBabel) / COUNT(0) AS pct_use_babel,
41+
COUNTIF(getSourceMaps(custom_metrics.javascript).isTypeScript) / COUNT(0) AS pct_use_typescript
5842
FROM
59-
pages_sourcemaps
60-
JOIN
61-
pages
62-
USING (client, page)
43+
`httparchive.crawl.pages`,
44+
UNNEST([1000, 10000, 100000, 1000000, 10000000, 100000000]) AS rank_grouping
6345
WHERE
64-
sourcemaps.isPublic = true
46+
date = '2024-06-01' AND
47+
is_root_page AND
48+
rank <= rank_grouping
6549
GROUP BY
6650
client,
6751
rank_grouping

‎sql/2024/javascript/usage_of_webpack.sql‎

Lines changed: 10 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,17 @@
11
#standardSQL
2-
# Percent of pages using webpack
3-
4-
WITH totals AS (
5-
SELECT
6-
_TABLE_SUFFIX AS client,
7-
COUNT(DISTINCT url) AS total_pages
8-
FROM
9-
`httparchive.summary_pages.2024_06_01_*`
10-
GROUP BY
11-
client
12-
),
13-
14-
webpack AS (
15-
SELECT
16-
_TABLE_SUFFIX AS client,
17-
COUNT(DISTINCT url) AS webpack_pages
18-
FROM
19-
`httparchive.technologies.2024_06_01_*`
20-
WHERE
21-
lower(app) = 'webpack'
22-
GROUP BY
23-
client
24-
)
2+
# Percent of pages using webpack grouped by rank
253

264
SELECT
275
client,
28-
webpack_pages,
29-
total_pages,
30-
webpack_pages / total_pages AS pct_webpack_pages
6+
COUNTIF('Webpack' IN UNNEST(technologies.technology)) AS webpack_pages,
7+
COUNT(0) AS total_pages,
8+
COUNTIF('Webpack' IN UNNEST(technologies.technology)) / COUNT(0) AS pct_webpack_pages
319
FROM
32-
totals
33-
JOIN
34-
webpack
35-
USING (client)
10+
`httparchive.crawl.pages`
11+
WHERE
12+
date = '2024-06-01' AND
13+
is_root_page
14+
GROUP BY
15+
client
3616
ORDER BY
3717
client

0 commit comments

Comments
 (0)