Loading Javascript best Practices _javascript Tips

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 – Download with XHR and eval() execute responsetext.
• XHR injection – Download with XHR, dynamically create a script element in the page and use ResponseText as its text .
• Script in Iframe – Put the scripts in HTML and use Ifame to download it.
• Script DOM element-Creates a script element dynamically, pointing to the src scripting URL.
• Script Defer -adding attributes to the script label defer
• document.write Script Tag – document.write <script src=""> Add to HTML using the. But this only works for IE.

Compatibility can be seen in the following figure:

order

Technique	Parallel Downloads	Differ	Existing Scripts	Busy Indicators	ensures	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

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:

1. 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.
2. Like <script> introducing the first file to the page (before </body> ).
3. 创建第二个 <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:

Copy Code code as follows:

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:

Copy Code code as follows:

<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.

Copy Code code as follows:

<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.

Copy Code code as follows:

<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.

Reference:

1. Loading Scripts without Blocking
2. the best way to load external JavaScript
3. Evolution of Sc Ript Loading
4. What is a non-blocking script?
5. Html5–scripting:async Attribute