One of the reasons why I'm excited about HTML5 is that features that have not been implemented for a long time can now be applied to real projects.
For example, we have been using placeholder for a long time, but Javascript is needed to implement it.
Currently, Firefox and chrome both implement the async attribute of the script tag. This new attribute allows us
This is a simple way to prevent browser blocking. Before that, we need some JavaScript tips to solve this problem.
<SCRIPT async src = "myscript. js" onLoad = "myinit ()"> </SCRIPT>
As I mentioned earlier, it is easy to add attributes.
Defer-HTML code
The script tag also has a defer attribute. Currently, all browsers have implemented this attribute,
Earlier versions of Firefox and chrome did not implement this attribute. ie supports this attribute from the very beginning.
Async & defer-what are their differences?<SCRIPT defer src = "myscript. js" onLoad = "myinit ()"> </SCRIPT>
All scripts with async or defer will immediately download and do not block page parsing, and provide an optional onload event processing,
After the script is downloaded, it is called for initialization related to the script. Their difference lies in
Timing. scripts with async are executed once the download is complete (before the onload of window, of course). This means that these scripts
These scripts may not be executed in the order they appear on the page. If your scripts depend on each other and are related to the execution sequence, there may be problems,
For example, variable or function undefined errors.
For scripts with defer, they are executed in the order displayed on the page. The execution time is after page parsing,
Before the domcontentloaded event. (My test cases and instructions will be provided in the following section)
Currently, the latest version of Firefox and chrome (and the same WebKit kernel safari, my machine version is ff6, chrome15dev-m, ie9) have supported these two attributes, it also supports script load events.
IE is always supported for defer, and The async attribute IE6 ~ 9 is not supported (ie10 will be supported without any doubt), onload is a new attribute added in ie9.
-------------------- The following are some test cases for defer, async, and onload ------------------------------
A simple four-step script is written for testing.
/** Script1 **/window. NS ={}; window. NS. delay = function (n) {var start = Number (new date (), wait = N * 1000; while (true) {var end = Number (new date ()); if (end-Start> = wait) {break;} console. log ("take" + N + "seconds to execute") ;}; console. log ("Create a namespace named ns"); document. addeventlistener ("domcontentloaded", function () {console. log ("Oh yeah, Dom ready! ") ;}, False); window. addeventlistener (" LOAD ", function () {console. Log (" Oh yeah, all resources loaded! ") ;}, False ); /** Script2 **/If (window. NS) {window. NS. one = 'one'; console. log ('window. NS. one: '+ window. NS. one); window. NS. delay (2);} else {console. log ('oops... ');}
/** Script3 **/If (window. NS & window. NS. one) {window. NS. two = "two"; console. log ('window. NS. two: '+ window. NS. two); window. NS. delay (2);} else {console. log ('oops... ');}
/** Script4 **/If (window. NS & window. NS. two) {window. NS. three = "three"; console. log ('window. NS. three: '+ window. NS. three);} else {console. log ('oops... ');}
Basic HTML page for testing
<! Doctype htm> <HTML>
The rest is to add defer and async to the script for testing.
1. No defer or async attributes<SCRIPT type = "text/JavaScript" src = "script1.js"> </SCRIPT> <SCRIPT type = "text/JavaScript" src = "script2.js"> </SCRIPT> <script type = "text/JavaScript" src = "script3.js"> </SCRIPT> <SCRIPT type = "text/JavaScript" src = "script4.js"> </SCRIPT>
Let's first look at the resource loading waterfall diagram (similar to chrome and Firefox, ie9 is a bit strange ):
It can be seen that the download of the image is blocked by the execution of the script.
The console output is as follows:
2. All are given the defer attribute.
<SCRIPT type = "text/JavaScript" src = "script1.js" Defer> </SCRIPT> <SCRIPT type = "text/JavaScript" src = "script2.js" Defer> </SCRIPT> <SCRIPT type = "text/JavaScript" src = "script3.js" Defer> </SCRIPT> <SCRIPT type = "text/JavaScript" src = "script4.js" Defer> </SCRIPT>
Resource loading waterfall chart:
We can see that all resources are downloaded in parallel without blocking IMG.
The console output is the same as the output of the 1st tests. ie9 and chrome are the same, but the strange thing is that in Firefox,
The domcontentloaded event is not triggered, that is, Dom ready is missing in the output! One row
3. partial to the defer attribute
<SCRIPT type = "text/JavaScript" src = "script1.js"> </SCRIPT> <SCRIPT type = "text/JavaScript" src = "script2.js" Defer> </SCRIPT> <script Type = "text/JavaScript" src = "script3.js"> </SCRIPT> <SCRIPT type = "text/JavaScript" src = "script4.js" Defer> </SCRIPT>
Because all the four scripts have execution sequence dependencies, It is troublesome to add the defer attribute without selection,
In this example, script1 and script3 are executed first. If script2 and script4 are executed later, an error occurs.
The console output is as follows:
4. Grant The async attribute
<SCRIPT type = "text/JavaScript" src = "script1.js" async> </SCRIPT> <SCRIPT type = "text/JavaScript" src = "script2.js" async> </SCRIPT> <SCRIPT type = "text/JavaScript" src = "script3.js" async> </SCRIPT> <SCRIPT type = "text/JavaScript" src = "script4.js" async> </SCRIPT>
Ie9 does not support this at all, so you do not need to test it.
When both Firefox and chrome are accessed for the first time, asynchronous Execution occurs,
If there is a cache, the execution sequence of the script seems to be maintained.
This shows the expected situation, that is, the download of other resources is not blocked.
For the first access in chrome, the console output is as follows, regardless of whether an error occurs or not, chrome and Firefox domcontentloaded are not triggered
5. Partial async attributes
<SCRIPT type = "text/JavaScript" src = "script1.js" async> </SCRIPT> <SCRIPT type = "text/JavaScript" src = "script2.js"> </SCRIPT> <script Type = "text/JavaScript" src = "script3.js"> </SCRIPT> <SCRIPT type = "text/JavaScript" src = "script4.js" async> </SCRIPT>The effect of this situation is obvious in chrome, and the analysis is very simple. All four scripts are downloaded in parallel. However, if script1 and script4 are executed immediately after they are downloaded,
Obviously, the dependency between them is broken. Unfortunately, this competition is less likely to happen in Firefox and may be related to Firefox's cache mechanism.
The chrome console output is as follows:
The onload attribute of the script will be recorded in another article.
Finally, if you have any questions or find any errors in the text, please make progress together.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
