HTTP/2 JavaScript Load Attributes You Should Be Using
As JavaScript became an almost inseparable and “heavier” part of modern web site development, developers were often concerned with two browser behaviors that could severely impact the performance and experience of a site that relied extensively on JavaScript.
The first of these was load order. Classically, web browsers load everything in an HTML document in a top-down order and execute it similarly. This means that if you place a large JavaScript file at the top of your document, the page may not render human visitor elements like the content and presentation layer until after the JavaScript has finished loading (parser blocking script).
Conversely, placing JavaScript at the end of a document allows the content and presentation to load, but may delay interactive and enhancement elements, in some cases making the site/page unusable.
A lot of debate and strategy often went into where to place specific pieces of JavaScript to find an optimal balanced between speed/performance and functionality/experience.
Default
With HTTP/2 now supported across the major modern browsers, you have some options that can fine-tune the load/execute behavior of JavaScript assets.
Async
Async allows the JavaScript to be downloaded at the same time as the HTML in a document, and execute as soon as the JavaScript is complete. This allows the visitor to see some immediately results and page content, and brings the JavaScript functionality/features into play as soon as possible.
Defer
Defer works similarly to Async, allowing the JavaScript to download at the same time as the HTML, but holds off its behavior until after the HTML is completely loaded. Like Async, this speeds up the user experience of page visibility, but crucially makes certain all the HTML elements are in place before executing any JavaScript. This is vital in cases where the JavaScript might otherwise attempt to act upon HTML asset that are not loaded yet.
A strategy is still needed, but additional tool in your kit can help fine-tune those strategies never hurt!
Availability
Check and see if your project’s supported browsers are HTTP/2 capable:
