Non-blocking loading script analysis [all]

Source: Internet
Author: User

Because the browser is single-threaded, the script will block the download of other resources during loading. Although the browser has been improved, it still needs to be improved.
Obviously, the script must be executed in order, but there is no need to download it in order. solution:
1. Embedded JS
Because the page size and cache can bring more benefits, it is better to introduce JS to external files;
In a few cases, such as the homepage and a small number of JS files, it is acceptable.
2. XHR Eval
Use XMLHttpRequest to obtain scripts from the server.
The main drawback is that the scripts obtained through XHR must be deployed in the same domain as the home page. Copy codeThe Code is as follows: Ajax. get ("test. js", function (xhr ){
Eval (xhr. responseText );
});

3. XHR Injection
Use XHR to obtain the script and create the script tag.
Similarly, scripts obtained through XHR must be deployed in the same domain as the home page.Copy codeThe Code is as follows: Ajax. get ('test. js', function (xhr ){
Injectscript (xhr. responseText );
});
Function injectscript (scriptText ){
Var s = document. createElement ('script ');
S. text = scriptText;
Document. getElementsByTagName ('head') [0]. appendChild (s );
}

4. Script in Iframe
Put the required script into a page and load the page through iframe.
The disadvantage is that iframe has a high overhead. In addition, the browser security mechanism does not allow js in iframe to access the cross-origin parent page, and vice versa.
5. Script DOM Element
JS dynamically creates a script DOM element and sets its src attribute.Copy codeThe Code is as follows: var scriptElem = document. createElement ('script ');
ScriptElem. src = 'HTTP: // domain.com/test.js ';
Document. ge ('head') [0]. appendChild (scriptElem );

6. Script Defer
Add the defer attribute to the script tag.
The disadvantage is that only IE and some new browsers are supported.Copy codeThe Code is as follows: <script defer src = 'test. js'> </script>

7. Document. write Script Tag
Use document. write to write the HTML Tag script to the page.
The disadvantage is that only scripts are loaded in parallel in IE.Copy codeThe Code is as follows: document. write ("<script type = 'text/javascript 'src = 'test. js'> <\/script> ");

One of the differences that has not been widely discussed is the influence on the busy browser status, including the browser status bar, progress bar, Tab icon, and mouse.
When you load multiple scripts that are dependent on each other, you also need a technology that ensures the execution sequence.

Technology

Parallel download

Cross-Origin

ExistScriptTag

Busy indicator

Sequence assurance

Size(Bytes)

XHR Eval

IE, FF, Saf, Chr, Op

No

No

Saf, Chr

-

~ 500

XHR Injection

IE, FF, Saf, Chr, Op

No

Yes

Saf, Chr

-

~ 500

Script in Iframe

IE, FF, Saf, Chr, Op

No

No

IE, FF, Saf, Chr

-

~ 50

Script DOM Element

IE, FF, Saf, Chr, Op

Yes

Yes

FF, Saf, Chr

FF, Op

~ 200

Script Defer

IE, Saf4, Chr2, FF3.1

Yes

Yes

IE, FF, Saf, Chr, Op

IE, FF, Saf, Chr, Op

~ 50

Document. write Script Tag

IE, Saf4, Chr2, Op

Yes

Yes

IE, FF, Saf, Chr, Op

IE, FF, Saf, Chr, Op

~ 100

In most cases, the Script DOM Element is a good choice. This method applies to all browsers without cross-origin restrictions. It is easy to implement and easy to understand. The only drawback is that the execution sequence of each script cannot be ensured. If you need to load multiple dependent scripts, you should splice these scripts into one to ensure they are executed in the desired order, or use other technologies.
Currently, the following methods are used to maintain the execution sequence during asynchronous loading. Due to space limitations, we will not describe them in detail.
Single script
1. Hardcoded Callback
2. Window Onload
3. Timer
4. Script Onload
5. Degrading Script Tags
Multiple scripts
1. Managed XHR
2. DOM Element and Doc Write
For more information, see advanced high-performance website construction guide.

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.