Do you know JavaScript non-blocking loading scripts?

As more and more websites involve "Web2.0" applications, the number of JavaScript scripts has also increased dramatically.

As more and more sites evolve into "Web 2.0" apps, the amount of JavaScript increases. this is a performance concern because scripts have a negative impact on page performance. mainstream browsers (I. e ., IE 6 and 7) block in two ways:

• Resources in the page are blocked from downloading if they are below the script.
• Elements are blocked from rendering if they are below the script.

With more and more websites involving "Web 2.0" applications, the number of JavaScript scripts has also increased dramatically. This is worrying because the script has a negative impact on the page performance. Mainstream browsers (such as IE 6 and 7) may experience blocking in the following two ways:

• If resources are located below the script, they will be blocked for download.
• If the elements are located below the script, they will be blocked for rendering.

The Scripts Block Downloads example demonstrates this. it contains two external scripts followed by an image, a stylesheet, and an iframe. the HTTP waterfall chart from loading this example in IE7 shows that the first script blocks all downloads, then the second script blocks all downloads, and finally the image, stylesheet, and iframe all download in parallel. watching the page render, you'll notice that the paragraph of text above the script renders immediately. however, the rest of the text in the HTML document is blocked from rendering until all the scripts are done loading.

The Scripts Block Downloads example shows the above situation. It contains two external scripts, followed by one image, one style sheet, and one iframe. The HTTP waterfall graph using IE7 to load this example shows that the first script blocks all downloads, the next 2nd scripts block all downloads, and finally the image style sheet and iframe are loaded concurrently. Observe the page rendering and you will find that the text above the script will be rendered immediately. However, other text in the HTML document is blocked until all scripts are downloaded.

All scripts in IE6 7, Firefox 2 3.0, Safari 3, Chrome 1, and Opera will be blocked for download.

Browsers are single threaded, so it's understandable that while a script is executing the browser is unable to start other downloads. but there's no reason that while the script is downloading the browser can't start downloading other resources. and that's exactly what newer browsers, including Internet Explorer 8, Safari 4, and Chrome 2, have done. the HTTP waterfall chart for the Scripts Block Downloads example in IE8 shows the scripts do indeed download in parallel, and the stylesheet is stored in that parallel download. but the image and iframe are still blocked. safari 4 and Chrome 2 behave in a similar way. parallel downloading improves, but is still not as much as it cocould be.

If the browser is single-threaded, it is understandable that the browser cannot download other resources when a script is being executed. But there is no reason to explain that when the script is downloaded, the browser cannot download other resources. Downloading scripts and downloading other resources in parallel are the functions implemented by all the latest browsers, including Internet Explorer 8, Safari 4, and Chrome 2. The HTTP waterfall diagram of the Scripts Block Downloads example in IE8 shows that the script is indeed downloaded in parallel, and the style sheet is also downloaded in parallel, however, the image and iframe are still blocked. The behavior of Safari 4 and Chrome 2 is similar. Parallel download has improved some of the results, but it has not yet achieved the best results.

In IE8, Safari 4, and Chrome 2, scripts are still blocked.

Fortunately, there are ways to get scripts to download without blocking any other resources in the page, even in older browsers. Unfortunately, it's up to the web developer to do the heavy lifting.

Fortunately, even in older browsers, there are ways to prevent scripts from blocking other page resources. Unfortunately, it depends on whether web developers are willing to undertake these heavy tasks.

There are six main techniques for downloading scripts without blocking:

• XHR Eval-Download the script via XHR and eval () the responseText.
• XHR Injection-Download the script via XHR and inject it into the page by creating a script element and setting its text property to the responseText.
• Script in Iframe-Wrap your script in an HTML page and download it as an iframe.
• Script DOM Element-Create a script element and set its src property to the script's URL.
• Script Defer-Add the script tag's defer attribute. This used to only work in IE, but is now in Firefox 3.1.
• Document. write Script Tag-Write