Front-End performance optimization: JavaScript loading order

Source: Internet
Author: User
Tags end eval script tag

Article Introduction: 35 JavaScript best practices.

I believe that many of the students who have dealt with the page on Yahoo best practices for speeding up Your Web Site is not unfamiliar. In these 35 best practices, the order in which Javascript is loaded is required: Put Scripts at the Bottom. Because according to http/1.1 specification, it is ideal to load two files at the same time, and Javascript scripts can hinder parallel downloads. Steve said it was 2008–2009 's time. Now, loading Javascript has revolutionized the transition.

Before the lecture, there is a problem to be solved: why we put the JS file at the bottom of the </body> before. The root cause is that it cannot be downloaded in parallel. In fact, not all browsers are not supported. Most browsers now support Script parallel downloads, except for the old ie6&7, Firefox 2&3.0, Safari 3, and Chrome 1. But our most familiar old classmate IE6 (or the IE-core shell) is the most occupied browser in China (and even in the world), so we need a compromise solution.

First, analysis

We have 6 ways to achieve parallel (non-blocking) Downloads:

    • XHR eval– is downloaded with XHR and Eval () executes responsetext.
    • XHR injection– with XHR downloads, dynamically creates a script element in the page and takes ResponseText as its text.
    • Script in iframe– the scripts in HTML and uses Ifame to download it.
    • The script DOM element– dynamically creates a script element and points src to the script URL.
    • Script defer– Add Defer property to the script label
    • document.write Script tag– uses document.write to add <script src= "" > To HTML. But this only works for IE.

Compatibility can be seen in the following figure:

Ii. programme

What kind of scheme should be used. It all depends on the need you need. This picture describes when to use the method:

In general, Script DOM Element is a better solution. Ncz's blog mentioned that the best technology at the moment is:

Create two JavaScript files. The first file only provides code for dynamically downloading Javascript, and the second file contains the scripts required for all other pages.

Like <script> in the page (before </body>) to introduce the first file.

Create a second <script> to perform the function and other initialization code that downloads the second Javascript file.

Third, the implementation of the Code

According to the techniques mentioned above. Ncz recommends that the first file contain only the corresponding code that dynamically loads the second file:

function Loadscript (URL, callback) {

var script = document.createelement ("script")
Script.type = "Text/javascript";

if (script.readystate) {//ie
Script.onreadystatechange = function () {
if (script.readystate = = "Loaded"
Script.readystate = = "complete") {
Script.onreadystatechange = null;
Callback ();
}
};
else {//others
Script.onload = function () {
Callback ();
};
}

script.src = URL;
document.getElementsByTagName ("Head") [0].appendchild (script);
}

Then, we can do this in the page:

<script type= "Text/javascript" src= "Http://your.cdn.com/first.js" ></script>
<script type= "Text/javascript" >
Loadscript ("Http://your.cdn.com/second.js", function () {
Initialize your code.
});
</script>

On the HTML5, we can use the Async property. The function of this HTML attribute is exactly what we need for the non-blocking download technology. Although there are not many browsers currently supported (seems to be only Firefox 3.6+?), but to the need for parallel to download Javascript (according to the scenario, is generally the first JS file) plus this attribute, it will not affect other browsers do not support, so, is recommended to use.

<script type= "text/javascript" async src= "Foo.js" ></script>

Iv. Practice

YUI3 's Loader used this method of Ncz. While paying the treasure. We also use a similar approach. Here's a quick word.

<script type= "Text/javascript" charset= "Utf-8" >
Configure PATH for the combo service
Araleconfig = {
Combo_host: "Http://domain.com",
Combo_path: "/path/to/the/compressed/file"
}
</script>

<script type= "Text/javascript" src= "Core.js" ></script>

When used, the Loader.use () is used to implement the dynamic loading of the code. Of course, this is not just dynamic loading, there is a certain caching mechanism inside. It is recommended that you review the relevant combo service technology. Currently, Alipay front-end architecture group of coworkers have made some good progress on this piece (according to the test report, the speed is very good, may be at the appropriate time open source).

V. Summary

Front-End performance optimization aspects. There's so much more to do. And, with the advent of HTML5 technology and the constant innovation of Javascript technology, there are many more things to look forward to. Front end, come on, there are many things in the future that should be led by you.



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.