Async and Dom script file loading compare _php tips

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:

<?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. Execution blocking Domready

Figure 1-1. Download blocking Domready

Figure 1-2. Execution blocking Domready

2. Async Properties

Async is a new property in HTML5, which is capable of downloading script files asynchronously without blocking Domready.

Each script for the Async property executes immediately after it has been downloaded, and is executed 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+

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

To load in a browser:

Figure 2-1 Asynchronous downloads do not block Domready blocking load events

Figure 2-2 Executing the 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); 
}
Load JS File script
loadscript (' sleep.php ');
Loadscript (' demo.js ');

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 ...