Asynchronous Load of JavaScript in HTML

Introduction

When a JavaScript file is loaded synchronously in the HEAD of an HTML document, the loading of any other requested files and the parsing of the document must wait until the synchronous download is completed. This delay is even more noticeable to the user, because each synchronous download in the HEAD of the document must be completed before the HTML in the BODY section of the document is read and the page is rendered.

This Best Practice Deep Dive provides some background on synchronous vs. asynchronous downloads, looks at the issues involved when files are downloaded synchronously, shows you how AT&T Video Optimizer can identify these JavaScript files, and provides a recommendation for downloading JavaScript files asynchronously.

Background

When specifying JavaScript files to be loaded in the HEAD section of an HTML document, it's important to consider the two different ways that the file load can occur.

• Synchronous (sync): The file will finish loading before the parsing of the page continues.
• Asynchronously (async): The rest of the page will continue being parsed while the file is downloaded.

If a download method is not specified, there is a good chance that the default could be synchronous loading.

Due to the size and complexity of some JavaScript files, the delay caused by synchronous loading can produce a noticeable delay in the rendering of the page.

The Issue

Loading JavaScript files synchronously blocks other files from being downloaded in parallel, and files downloaded in the HEAD of your HTML will block the rendering of your HTML because the downloads must be completed before the BODY of the HTML document is parsed.

Best Practice Recommendation

The Best Practice Recommendation is to ensure that JavaScript files in the HEAD of your HTML are loaded asynchronously so that they do not delay the rendering of the page.

AT&T Video Optimizer helps you identify these files by testing the HTML documents in your app to see if there are JavaScript files in the HEAD which are not being loaded asynchronously. If there are JavaScript files in the HEAD not being loaded asynchronously, the test will fail and Video Optimizer will list all of the files in the test results.