Home > Developer > JavaScript
I do front-end development for more than a year, the front end of the view or more or less a bit, today special took out to share with you.
Do front-end development without a variety of sharp weapons. For example, I used to use Google Browser and heavy weapons fiddller.
One: the original situation
First, let's look at the following code:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title></title>
<link href= "Styles/site.css" rel= "stylesheet" type= "Text/css"/>
<script src= "Jquery/jquery-1.4.1.js" type= "Text/javascript" ></script>
<script src= "Js/hello.js" type= "Text/javascript" ></script>
<script src= "Js/world.js" type= "Text/javascript" ></script>
<body>
</body>
An estimated 90% of programmers will put the JS file in the head, but have you ever delved into it? Many browsers use a single thread to do "UI updates" and "JS script processing".
That is, when the execution engine encounters "<script>", the download and render of the page must wait for <script> to complete. Then it's sad for the user, looking at the locked page,
The user will probably turn it off for you at this point.
From the waterfall above, we can see two points:
First:
Three JS files in parallel download, but according to my theory above the JS should be one after another execution. However, in both ie8,firefox3.5 and Chrome2 have realized the parallel download of JS,
It's pretty good, but he's still going to be blocking downloads of other resources, like pictures.
Second:
Picture 1.jpg download is in JS after the execution of the trigger, which also validates the above mentioned situation, blocked the image load.
Second: First step optimization
Since JS block UI rendering, then we can consider to put JS in the </body> before, so that we can make the HTML before <script> perfect rendering, will not let users see the page blank waiting
And the distress of the situation, naturally improve the friendliness of.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title></title>
<link href= "Styles/site.css" rel= "stylesheet" type= "Text/css"/>
<body>
<script src= "Jquery/jquery-1.4.1.js" type= "Text/javascript" ></script>
<script src= "Js/hello.js" type= "Text/javascript" ></script>
<script src= "Js/world.js" type= "Text/javascript" ></script>
</body>
The following figure also shows the 1.jpg and three JS almost in parallel to download and execute. The time is reduced from "469ms+" above to "326ms".
Third: Optimize the second step
Look at the above "waterfall map", we can also see that the three JS file for three times "get" request, we all know that the request is to have the HTTP header,
So it takes time, and the solution we take is naturally to reduce get requests. There are usually two kinds of scenarios.
First: Merge JS files, such as the above "Hello.js" and "World.js" merged.
Second: Use third-party tools, such as Minify in PHP.
On the second approach, Taobao or more, look at one of the script, the application of three JS files. Changed from 3 get requests to 1.
Four: Third step optimization
Whether the JS file at the end of the foot, or three merged one, its essence is "blocking mode", that is, locked browser, when the Web page more and more complex, JS file more and more, or
Let us have a headache, at this time we advocate a "non-blocking mode" load JS script, that is, the page is all rendered to append JS, also corresponds to the Window.onload event triggered, we only
Add JS, this is called "no blocking", but there is a very important place to pay attention to the requirements of JS is our strict order.
First: No order requirements, such as my "hello.js" and "world.js" no order requirements, then we can use jquery to dynamically append implementation.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title></title>
<link href= "Styles/site.css" rel= "stylesheet" type= "Text/css"/>
<body>
<script src= "Jquery/jquery-1.4.1.js" type= "Text/javascript" ></script>
<script type= "Text/javascript" >
Window.onload = function () {
$ ("#head"). Append ("<script src= ' js/hello.js ' type= ' text/javascript ' ><\/script>")
$ ("#head"). Append ("<script src= ' js/world.js ' type= ' text/javascript ' ><\/script>");
}
</script>
</body>
As can be seen from the diagram, "Hello.js" and "World.js" appear in the Blue Line, it also shows that the two JS is after the end of the domcontentload to trigger the load, so that will not cause the page lock
Wait.
Second: there are sequential requirements
Why must the concept of order be required? For the above dynamic append "Two js" file, in the IE series, you can not guarantee that hello.js will be executed before World.js,
He executes the code only in the order that the server side returns.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title></title>
<link href= "Styles/site.css" rel= "stylesheet" type= "Text/css"/>
<body>
<script type= "Text/javascript" >
function Loadscript (URL, callback) {
var script = document.createelement ("script");
Script.type = "Text/javascript";
Ie
if (script.readystate) {
Script.onreadystatechange = function () {
if (script.readystate = = "Loaded" | | | script.readystate = = "complete") {
Script.onreadystatechange = null;
Callback ();
}
}
} else {
Non IE
Script.onload = function () {
Callback ();
}
}
script.src = URL;
document.getElementById ("Head"). appendchild (script);
}
The first step is to load the jquery class library
Loadscript ("Jquery/jquery-1.4.1.js", function () {
Second Step loading Hello.js
Loadscript ("Js/hello.js", function () {
Third Step loading World.js
Loadscript ("Js/world.js", function () {
});
});
});
</script>
</body>
We can also see that the page completely load time is actually about 310ms, greatly improve the download of the Web page and the friendly type.
Also can look at Tencent network, he is also doing so.
is not very useful, I also spent some time here to do these research tests, I hope that small partners can see the heart, after all, this is the "twist rattan" Company's solution, we refer to the next bar
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
