Want better JavaScript performance? Google's tips for stopping the programming language from slowing Chrome

Addy Osmani, Google's engineering manager for Chrome, on how to minimize the impact of JavaScript.

Node.js JavaScript vs PHP: Which programming language is winning over developers? A report highlights the growing popularity of Node.js JavaScript as a server-side language to support online sites and services.

JavaScript is a core component of the modern web, so any improvement to how it runs can have a noticeable impact on the useability of a website or app.

Addy Osmani, Google's engineering manager for Chrome, has put together tips for developers on how to minimize the impact of JavaScript on the load times in its web browser.

His key message is that the time it takes to download and execute JavaScript is the most important factor to consider when adding the scripting language to a site.

Osmani says large bundles of JS scripts can slow the loading of a page and long JS execution times can cause a site to hang, due to monopolizing the page's UI thread.

SEE: Tips for building a successful career as a software engineer (free PDF) (TechRepublic)  

These issues are particularly pertinent to mobile devices, he says, where the speed of network connections can vary widely and the "huge disparities between the performance of high-end and low-end phones" means JS execution time should be kept as low as possible.

"Of the total time a page spends loading in a browser like Chrome, anywhere up to 30% of that time can be spent in JavaScript execution," he writes in the article.

"On mobile, it takes 3–4× longer for a median phone (Moto G4) to execute Reddit's JavaScript compared to a high-end device (Pixel 3), and over 6× as long on a low-end device (the <$100 Alcatel 1X)." 

jscost.jpg

Image: Addy Osmani under the following licence: https://creativecommons.org/licenses/by/3.0/

Osmani advises web developers to improve download times by keeping JavaScript bundles small and by splitting large bundles, upwards of 50kB, into separate smaller bundles that can be handled in parallel. He also says developers should avoid Long Tasks that occupy the UI thread for extended periods of time. Inline scripts, where JavaScript is embedded directly in the HTML of a page rather than stored in a separate file, should also be kept below 1kB, he adds.

"Download and execution time are the primary bottlenecks for loading scripts in 2019," he writes.

"Aim for a small bundle of synchronous (inline) scripts for your above-the-fold content with one or more deferred scripts for the rest of the page. Break down your large bundles so you focus on only shipping code the user needs when they need it."

The good news is that improvements to Chrome's V8 JavaScript engine have reduced the parsing and compilation of JavaScript by an average of 40%, he says, with the browser able to handle both these tasks without blocking the main processing thread, reducing the relative importance of these factors for web developers.

Considering how sites and apps run in Chrome and other Chromium-based browsers has long been important to web developers.
Chrome has the largest browser market share worldwide, and Microsoft will soon switch to offering a new Chromium-based Edge browser.

If you want to find out more about the popular JavaScript spin-off language TypeScript, read TechRepublic's round-up of the best free resources for learning the language online.

Also see