JavaScript asynchronous Programming (ii) asynchronous script loading

Source: Internet
Author: User

Asynchronous script loading

Problem:

<body> the large script at the end of the tag allows the user to see only static pages, where the original rendering should be empty;

Solution:

Divide and conquer the script;

The script that makes the page look good and better is loaded immediately, and the script that is loaded later can be loaded later.

The Async/defer property of HTML5

? <script label >

Typical and non-blocking

Ideally, the script should be loaded at the same time as the document is loaded without affecting the rendering of the DOM.

This allows the script to run once the document is ready because the script has been loaded in the order of <script> tags.

Most browsers support a simple solution:

Put a delay script in the

<script defer src = "deferredscript.js" >

Defer property: Start loading the script right away, but wait until the document is ready and the running defer script finishes before you run it.

Insufficient: Not all browsers support defer, so using defer should encapsulate all deferred scripting code in the $ (document) For example jquery. Ready.

Full parallelization of scripts

Async Property

Scripts run in any order, as long as the JavaScript engine is available to run immediately, whether the document is ready or not.

→ For standalone scripts, asynchronous scripting is a good way to improve performance;

In browsers that support both defer and async, async overwrites defer if the script properties defer and AYSNC are used.

Programmable script loading

Browser API-level approach:

Generate an AJAX request and use the Eval function to handle the response;

Inserts <script> tags into the DOM.

Conditional loading of Yepnope

Yepnope is a simple, lightweight script-loading library designed to serve the most common dynamic script loads.

Yepnope ({

Load: ' Xx.js ',

Callback:function () {

...

}

});

JavaScript asynchronous Programming (ii) asynchronous script loading

Related Article

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.