JavaScript script loading related knowledge

Source: Internet
Author: User
Tags blank page

<script> the location of the label

The HTML4 specification allows <script> to be placed in

However, putting in

Because the script blocks the download of other resources on the page, it is recommended that all <script> be placed at the bottom of the <body> tag.

Non-blocking scripts

Defer

HTML4 introduces the defer attribute to <script>, with this attribute <script> can be placed anywhere, the corresponding JavaScript file starts to download when the page interprets the label, and then after the DOM loading is complete, The Window.onload event executes before and after the <script> of other properties that do not have defer.

The <script> download script with the Defer property does not block other processes that load the page, and such files can be downloaded in parallel with other resources.

When the <script> tag with defer uses SRC to introduce an external script, the script that is embedded in this script is not valid.

According to the HTML5 specification, defer is valid only if SRC is declared.

Examples of Use:

<src= "Hello.js"  defer= "defer"></Script  > or <src= "Hello.js"  defer ></ Script >

Async

Async is a property added by HTML5, similar to defer

Async will only take effect if SRC is declared.

<script> immediately download the script file labeled Async, without blocking other processes that page loads, and the script executes as soon as the download is complete.

<script> marked as async must be executed before window.onload.

Scripts marked as Async are not guaranteed to execute in the order specified, eg:

<async src= "Hello.js"></script><  Async src = "world.js" ></script > 

In the above code, the second script may be executed before the first, so it is best not to have dependencies between script files loaded with async.

JavaScript script loading related knowledge

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.