WebKit Asynchronous Load script (Running scripts in WebKit)-greatly improves interface rendering speed

WebKit Asynchronous Load script (Running scripts in WebKit)-greatly improves interface rendering speed

The beautiful Life of the Sun Vulcan (http://blog.csdn.net/opengl_es)

This article follows "Attribution-non-commercial use-consistent" authoring public agreement

Reprint Please keep this sentence: Sun Vulcan's Beautiful Life-this blog focuses on Agile development and mobile and IoT device research: IOS, Android, HTML5, Arduino, Pcduino , Otherwise, the article from this blog refused to reprint or re-reproduced, thank you for your cooperation.

Running scripts in WebKit Posted by Tony Gentilcore on Friday, September 17th, in 10:10 am

WebKit Nightly builds now support the HTML5 async and defer script attributes. This makes it easier for Web pages to load faster by downloading JavaScript without blocking and other elements of the page.

Normally when the parser encounters an external script, parsing was paused, a request is issued to download the script, and Parsing is resumed only after the script has fully downloaded and executed.

<script src="myBlockingScript.js"></script>

During the download the browser is blocked from doing other useful work, such as parsing HTML, executing other scripts and Performing layout. Although partially mitigated by WebKit ' s preload scanner, which speculatively looks ahead for resources to download during The down time, network latency still slows down some pages.

There is many clever techniques for working around this performance bottleneck, but they all involve extra code and brows Er-specific hacks. Instead, scripts which do not require synchronous execution can now be marked as either async or defer . Here's how to they work.

<script async src="myAsyncScript.js" onload="myInit()"></script>
<script defer src="myDeferScript.js" onload="myInit()"></script>

Both Async and defer scripts begin to download immediately without pausing the parser and bot H support a optional onload handler to address the common need to perform initialization which depends on th E script. The difference between async and defer centers around when the script is executed. Each async script executes at the first opportunity over it is finished downloading and before the win Dow ' s load event. This means it's possible (and likely) that async scripts is not executed on the order in which they occur in The page. The defer scripts, on the other hand, is guaranteed to being executed in the order they occur in the page. That execution starts after parsing was completely finished, but before the document ' s domcontentloaded< /code> event.

Here's an example of a external script which takes 1 second to download followed by an inline script which takes 1 secon D to execute. We can see this page loads in about 2 seconds.

Here are the same example, but this time the external script is deferred. Since the second script can execute while the first was downloading, the page now loads about twice as fast.

In addition to upcoming versions of webkit-based browsers, Firefox have long supported the defer and onload attributes and S Upport for is async added in version 3.6. Internet Explorer has also long supported the defer attribute. asyncwhile is not a yet supported, support for the onload attribute was added in version 9.

You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

Comments is closed.

WebKit Asynchronous Load script (Running scripts in WebKit)-greatly improves interface rendering speed