I have been working in front-end development for more than a year, and I still have some insights into front-end. Today I will share with you.
Various powerful tools are indispensable for front-end development. For example, I am used to using Google browser and heavy weapon Fiddller.
1: Original situation
First, let’s take a look at the following code:
The code copy is as follows:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="head">
<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>
</head>
<body>
<img src="1.jpg" />
</body>
</html>
It is estimated that 90% of programmers will put js files in the head, but have you ever delved into it? Many browsers will use a single thread to do "interface UI update" and "JS script processing".
That is, when the execution engine encounters "<script>", the download and rendering of the page must wait for the execution of <script> to be completed. Then it is sad for the user, looking at the locked page,
At this time, the user will probably turn it off for you.
From the waterfall diagram above we can see two points:
First:
Three js files are downloaded in parallel, but according to my theory above, js should be executed one by one. However, in IE8, Firefox 3.5 and Chrome 2 both implement parallel downloads of js.
This is quite good, but it will still hinder the download of some other resources, such as pictures.
second:
The download of image 1.jpg is triggered after the js execution is completed, which also verifies the situation mentioned above and prevents the image from loading.
Two: The first step is optimization
Since js prevents UI rendering, we can consider putting js in front of </body>, so that the html before <script> can be rendered perfectly without letting users see the blank page waiting.
And the distressed situation naturally increases friendship.
The code copy is as follows:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="head">
<title></title>
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<img src="1.jpg" />
<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>
</html>
The figure below also shows that 1.jpg and three js are downloaded and executed in almost parallel. The time is reduced from "469ms+" above to "326ms".
Three: The second step of optimization
Looking at the "waterfall diagram" above, I guess everyone can also see that the three js files made three "Get" requests. Everyone knows that Get requests need to have http headers.
So it takes time, so the solution we adopt is naturally to reduce Get requests. There are usually two options.
First: Merge js files, such as merging the above "hello.js" and "world.js" are merged.
Second: Use third-party tools, such as Miniify in PHP.
Regarding the second method, taobao is used quite a lot. Take a look at one of the scripts and applies three js files. Change from 3 Get requests to 1.
Fourth: The third step of optimization
Whether it is putting the js file at the end of the foot or combining three into one, its essence is "blocking mode", which means locking the browser. When the web page becomes more and more complex, there are more and more js files, or
What makes us headache, at this time, we advocate a "no blocking mode" to load js scripts, that is, all the pages are presented and then js is added, which corresponds to the trigger of the window.onload event.
Appending js is the so-called "no blocking", but one thing that needs to be paid attention to is whether our requirements for js are in strict order.
First: There is no order requirement. For example, if I have no order requirement for "hello.js" and "world.js", then we can use jquery to dynamically append it.
The code copy is as follows:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="head">
<title></title>
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<img src="1.jpg" />
<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>
</html>
As can be seen from the figure, "hello.js" and "world.js" appear on the blue line, which means that these two js are triggered to load after the DomContentLoad is finished, so that the page will not be locked.
wait.
Second: There are order requirements
Why does it have to be required to have order? For the dynamically appended "two js" file above, in the IE series, you cannot guarantee that hello.js will be executed before world.js.
It will only execute the code in the order returned by the server side.
The code copy is as follows:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="head">
<title></title>
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<img src="1.jpg" />
<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 () {
//The second step is to load hello.js
loadScript("js/hello.js", function () {
//The third step is to load world.js
loadScript("js/world.js", function () {
});
});
});
</script>
</body>
</html>
As you can also see, the time it takes for the page to be fully loaded is actually only about 310ms, which greatly improves the download and friendly appearance of the web page.
You can also check out Tencent.com, which is what he does.
Isn't it very useful? I have spent some time doing these research and tests here. I hope you can see it in your heart. After all, this is also the solution of "Mahua Vine" company. Please refer to it.