Defer and async (Native JS learning) turn

Source: Internet
Author: User
Tags blank page

(1)

What to do in the page download process

Page Parse finished----domcontentloaded (DOM tree completed)----onload (all resources finished, picture, Iframe,flash these)

Note that the JS script to download and execute, the DOM tree can come out, because the script tag is also part of the DOM, and because JS may have DOM operation, so must wait until the JS script execution, to complete the DOM construction.

The parse process can be understood as sweeping through the document, knowing what to do, and then the entire DOM build process. Parse the markup and set the DOM

(2)

If neither defer nor async, and JS is still placed in the head, then the page to wait for the JS download and JS execution, there will be a blank page situation.

(3)

Defer is not supported by all browsers. After defer, the execution of the script is completed after the page is parsed, before the domcontentloaded event.

(4)

Async is characterized by the implementation of a load, a number of JS if you set up async can form a parallel download, not necessarily according to the order of the document emissions, so there is a dependency between multiple JS, it is prone to problems, and can only be applied to external scripts.

Asynchronous scripts is guaranteed to execute before the page's Load event and may execute before or after Domcontentload Ed (see Chapter for details). Firefox 3.6, Safari 5, and Chrome 7 support asynchronous scripts.

Async is at least faster than load,,, it may be faster or slower than domcontentloaded(don't know why, feel it is faster than defer, and defer are faster than domcontentloaded, this question later to engage in. )

If Async is False,defer true, then the script will be executed after the page parsing (with defer, JS script download does not affect the parsing of the document, the script is executed after the page parsing, this time after the script is finished, then the DOM is built. So it must be before the Domcontentload event)

If both async and defer are false, then the script will stop the page parsing in page parsing, download and execute immediately, and block blocks.

After setting defer and async, both loading (download) does not block page rendering (parse), but Async is executed immediately after the download, so it will be executed before the parse is finished, which will block page rendering (fear of DOM manipulation), and defer will not block. As it executes, the page has already been parse (after the script executes and the DOM is not counted).

ie does not support domcontentloaded events, detects doscroll to simulate (determines whether a page can be scrolled)

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.