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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.