JS file loading: Comparing async and Dom Script

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

I currently use Demo.js as a file operation. Code:

var now = function () {return + (new Date ());}
var t_s = Now ();
while (now ()-t_s < 2000) {}

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

Sleep (3);
echo "var BB";
?>

1. General Script Tag Loading




In the browser loading scenario: Figure 1-1. Download blocking Domready Figure 1-2. Execution blocking Domready

Figure 1-1. Download blocking Domready

figure 1-2. Execution blocking Domready

2. Async Property

Async is a new property in HTML5 that is capable of downloading script files asynchronously and not blocking domready. The
script for each async property executes immediately after it has finished downloading, and executes before the window's Load event. So it's possible that the sequence of script execution is disrupted
support async browsers: Firefox 3.6+, IE 10+, Chrome, Safari 5+, IOS 5+, Android 3+

Loading in Browser:
figure 2-1 Asynchronous download non-blocking domready blocking Load event

Figure 2-2 Performing a blocking load event

Figure 2-3 IE9 does not support async properties 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.
Script elements, like other elements of the page, can be created very easily through standard DOM functions:

var loadScript = function(url) {     var s = document.createElement("script");     s.type = "text/javascript";     s.async = "true";     s.src = url;     document.getElementsByTagName("head")[0].appendChild(s);     

To load in a browser:

Figure 3-1 Download blocking Load Event

Figure 3-2 Executing the blocking Load event

Figure 3-3 IE9 does not block the Load event

Summary

Async and script loading in a modern browser are consistent. The former is simple to use and better in compatibility.
There are many other ways to load files asynchronously, Ajax (subject to homology restrictions), IFrame, img ...