JS file load: Compare async and Dom Script

Async and script dynamic loading both allow files to be loaded asynchronously, this article describes their impact on page rendering and load loading.

Currently I use Demo.js as the execution file operation. Code:

varfunction() {return +(newDate()); }var t_s = now();while2000) {  }

Use sleep.php as the request file operation. Code:

<?php    sleep(3);    echo ‘var bb‘;?>

1. General Script Tag Loading

<script src="demo.js"></script><script src="sleep.php"></script>

In the browser loading scenario: figure 1-1. Download blocking domready figure 1-2. Performing blocking Domready
Figure 1-1. Download blocking Domready

figure 1-2: Execution blocking Domready

2. Async Properties

Async is a new attribute in HTML5 that is capable of downloading script files asynchronously without blocking Domready.
The script for each async property executes immediately after it is downloaded, and is executed before the Load event of the window. So it's possible that the sequence of script execution is disrupted.
Async browser Support: Firefox 3.6+, IE + +, Chrome, Safari 5+, IOS 5+, Android

<script src="demo.js" async></script><script src="sleep.php" async></script>   

What to load in the browser:
Figure 2-1 Asynchronous download does not block Domready blocking Load event

Figure 2-2 Performing a blocking load event

Figure 2-3 IE9 does not support async property download blocking Domready

3. DOM Script Dynamic Loading

The Document Object Model (DOM) allows you to dynamically create almost all of the document content of HTML using JavaScript.
The script element, like other elements of the page, can be easily created from standard DOM functions:

varfunction(url) {    var s = document.createElement(‘script‘);    ‘text/javascript‘;    ‘true‘;    s.src = url;    document.getElementsByTagName(‘head‘)[0].appendChild(s);    }// 加载js文件脚本loadScript(‘sleep.php‘);loadScript(‘demo.js‘);

What to load in the browser:
Figure 3-1 Download blocking Load Event

Figure 3-2 Performing a blocking load event

Figure 3-3 IE9 does not block the Load event

Summary

Async and script dynamic loading are consistent in the context of modern browser loading. The former is simple to use and better in terms of compatibility.
There are many ways to load files asynchronously, Ajax (subject to the same origin), IFrame, img ...

Reference Link:
http://ie.microsoft.com/TestDrive/Performance/AsyncScripts/Default.html
http://ued.ctrip.com/ blog/?p=3121
http://blog.jobbole.com/47304/
http://www.infoq.com/cn/articles/ Browser-resource-loading-optimization