Comment: Asynchronous loading can be understood as non-blocking concurrent processing. In the past, we used various JavaScript techniques to do this. Now WebKit has implemented the async async attribute of the SCRIPT tag for HTML5. Interested friends can learn about it.
(Translator's note: Asynchronous loading can be understood as non-blocking concurrent processing.)One of the reasons I'm excited about HTML5 is that it implements many long-awaited features in the industry. We always need to display blank prompts in the input box, but they are all implemented in JavaScript. We also want the entire block to be clickable, which is also implemented using JavaScript.
WebKit now implements the async asynchronous property of the SCRIPT tag for HTML5. In the past we used to use various JavaScript tricks to do this, but now new properties make it relatively easy to prevent blocking.
async - HTML attributes
As I mentioned earlier, adding the async attribute is very simple:
<!-- Specify async, and onload callback-->
<script async src="siteScript.js"></script>
In fact, if your JavaScript and HTML structure design are reasonable, then 90% of the cases your Script elements can be loaded asynchronously.
defer - HTML attributes
Safari browser adds additional defer attribute
<!-- Specify defer, the effect is similar to async-->
<script defer src="siteScript.js"></script>
The difference between async and defer
WebKit official blog explains the difference between async and defer
------------------------------------
Under normal circumstances, if the browser encounters an external script when parsing the HTML source file, the parsing process will be paused and a request will be sent to download the script file. DOM parsing will continue to be performed after the script is fully downloaded and executed. for example:
<script src=myBlockingScript.js></script>
During the download process, the browser is blocked from doing other useful tasks, including parsing HTML, executing other scripts, and displaying the CSS layout. Although Webkit preload scanners can detect multithreading during the download phase, there is still a large network delay for some pages.
There are many techniques to improve page display speed, but they all require additional code and browser-specific skills. Now script can not have to execute scripts synchronously by adding async or defer attributes. The example is as follows:
<script async src="myAsyncScript.js"></script>
<script defer src="myDeferScript.js"></script>
Neither async nor defer annotation script will be downloaded immediately without pausing HTML parsing. Both support onload event callbacks to solve the initialization that requires the script to execute.
The difference between the two is the difference in execution:
The async script will be executed immediately after the script file is downloaded, and its execution time must be before the window's load event is triggered. This means that multiple async scripts are likely not executed in the order in which they appear in the page.
In contrast, the browser ensures that multiple defer scripts are executed in order of their occurrence in the HTML page, and that the execution time is before the DOM resolution is completed and the document's DOMContentLoaded event is fired.
The following is an example that takes 1 second to download and 1 second to parse other operations. We can see that the entire page loading took about 2 seconds.
The same example, but this time we specified the defer attribute of script. Because when the defer script is downloaded, other operations can be executed in parallel, so it is about 1 times faster.
------------------------------------
Which browsers support async and defer
Also mentioned in the article cited above:
In addition to the new version of the browser based on Webkit, FireFox has supported the defer and onload properties for a long time, and has added the async attribute since FF3.6. IE also supports the defer attribute, but does not support the async attribute. Starting from IE9, the onload attribute will also be supported.
aynsc is awesome!
I was so happy to see the webkit implement async. Blocking is a huge performance bottleneck for every website, and being able to directly specify script files asynchronous loading will undoubtedly speed up the web pages.