Addy Osmani, engineering manager at Google working on Chrome, recently presented the actualized findings of the Cost of JavaScript study. Osmani contends that, as browsers engineer improvements in JavaScript parsing and compiling time, the dominant costs of processing scripts are increasingly download and CPU execution time.
In the Cost of Javascript in 2018, Osmani observes that, given an interactive site which commonly necessitates of a mix of CSS, JavaScript, images and fonts, "JavaScript is always the most expensive part". An 170 KB image may download in the same time than the same-size JavaScript script, but will be processed much faster than the script, as images are decoded and painted much faster than the script is parsed, compiled and executed.
As a matter of fact, being fast at processing JavaScript means being fast at downloading, parsing, compiling, and executing a script.
Script download time is mainly driven by script size and network capabilities. Parsing and compiling time is driven by the set of technologies used in the JavaScript engine and the device capabilities (CPU and memory performance). Executing time is significantly CPU-bound.
Focusing on the V8 engine, Osmani mentions the realized improvements vs. 2018 in parsing/compiling time:
Raw JavaScript parsing speed in V8 has increased 2× since Chrome 60. At the same time, raw parse (and compile) cost has become less visible/important due to other optimization work in Chrome that parallelizes it. (...) In the same amount of time it took Chrome 61 to parse Facebook’s JS, Chrome 75 can now parse both Facebook’s JS AND 6 times Twitter’s JS.
The Binary AST proposal, currently in the initial stage of the TC39 process (Stage 1), aims at improving parsing performance further, with a binary encoding based on an efficient abstract syntax tree representation of JavaScript syntax.
Osmani deduces that download and execution time are now the bottlenecks to focus on. As mobile devices represent an ever larger portion of users accessing the web, execution and download time is impacted by the large spectrum of mobile device capabilities from low-end to high-end mobile devices: thermal throttling, difference in cache sizes, CPU, GPU, network technology (2G to 5G).
To reduce download time, Osmani recommends to:
- minimize JavaScript bundle size, especially for mobile devices
- Split large bundles (over 50–100 KB) into smaller bundles, thus leveraging HTTP/2 multiplexing abilities
Osmani mentions the need to plan specifically for mobile:
On mobile you’ll want to ship much less especially because of network speeds, but also to keep plain memory usage low.
To reduce execution time, Osmani recommends to "avoid Long Tasks that can keep the main thread busy and can push out how soon pages are interactive." Additionally, developers should avoid resorting to large inline scripts (over 1 KB).
The full study is illustrated with supporting data (focusing mostly on the V8 engine and the Chrome browser), figures and practical recommendations. The Cost of JavaScript study was first published in 2017, updated in 2018, and 2019.