Home >Web Front-end >JS Tutorial >Research report on Javascript loading execution optimization_javascript skills

Research report on Javascript loading execution optimization_javascript skills

WBOYOriginal: 2016-05-16 16:26:451550browse

I have been doing front-end development for more than a year, and I still have some insights into the front-end. Today I will share it with you.

Front-end development requires various tools. For example, I am still accustomed to using Google browser and heavy weapon Fiddler.

1: Original situation

First of all, take a look at the following code:

Copy code The code is as follows:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Default" %>

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

It is estimated that 90% of programmers will put js files in the head, but have you ever looked into it? Many browsers will use a single thread to do "UI update" and "JS script processing",

That is, when the execution engine encounters "<script>", the downloading and rendering of the page must wait for the execution of <script> to be completed. Then it’s sad for users, looking at the locked page, At this point the user is likely to turn it off for you. <img alt="" src="http://files.jb51.net/file_images/article/201412/201412160855464.png"> We can see two points from the waterfall chart above: First place: Three js files are downloaded in parallel, but according to my theory above, the js files should be executed one after another. However, in IE8, Firefox3.5 and Chrome2, parallel downloading of js is implemented, This is pretty good, but it will still hinder the downloading of some other resources, such as pictures. Second: The download of picture 1.jpg is triggered after the js execution is completed, which also verifies the above situation and prevents the loading of the image. Two: First Step Optimization Since js prevents UI rendering, we can consider placing js before </body>, so that the html before <script> can be perfectly rendered and the user will not see the page blank waiting The distressed situation naturally improves the friendliness. <div class="codetitle"> <a style="CURSOR: pointer" data="86272" class="copybut" id="copybut86272" onclick="doCopy('code86272')">Copy code</a> The code is as follows:</div> <div class="codebody" id="code86272"> <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"> <html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>"> <head id="head"> <title></title> <link href="Styles/Site.css" rel="stylesheet" type="text/css" /> </head> <body> <img src="1.jpg" width="200" height="300" /> <script src="jquery/jquery-1.4.1.js" type="text/javascript"></script>

The picture below also shows that 1.jpg and three js are downloaded and executed almost in parallel. The time is reduced from "469ms" above to "326ms".

Three: The second step of optimization

Looking at the "waterfall chart" above, you may have noticed that three js files made three "Get" requests. Everyone knows that Get requests need to carry http headers,

So it takes time, so the solution we take is naturally to reduce Get requests. There are usually two options.

First: Merge js files, such as merging "hello.js" and "world.js" above.

Second: Use third-party tools, such as Minify in php.

Regarding the second method, taobao is used more often. Take a look at one of the scripts, which uses three js files. From 3 Get requests to 1.

Four: The third step of optimization

Whether you put the js files at the end or merge three into one, the essence is "blocking mode", which means locking the browser. When the web page becomes more and more complex and there are more and more js files, Or

What gives us a headache, at this time we advocate a "non-blocking mode" to load js scripts, that is, append js after the page is fully rendered, which corresponds to when the window.onload event is triggered, we

Append js, this is called "non-blocking", but one thing that we need to pay attention to is whether our requirements for js are in strict order.

First: No order requirement. For example, I have no order requirement for "hello.js" and "world.js", then we can use jquery to dynamically append the implementation.

Copy code The code is as follows:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Default" %>

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

")
$("#head").append("");
}

As can be seen from the picture, "hello.js" and "world.js" appear after the blue line, which means that these two js are triggered to load after DomContentLoad ends, so that they will not Causing page lock

Wait.

Second: There are order requirements

Why must there be a concept of order requirements? Regarding the above dynamically appended "two js" files, in the IE series, you cannot guarantee that hello.js will be executed before world.js,

He will only execute the code in the order returned by the server.

Copy code The code is as follows:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Default" %>

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

大家也能看到，页面完全Load的时间其实也就310ms左右，大大提高了网页的下载呈现和友好型。

同样也可以看看腾讯网，他也是这么干的。

是不是非常的有用呢，本人这里也是花了些时日来做这些研究测试，希望小伙伴们能看到心里去，毕竟这也是“麻花藤”公司的解决方案，大家参考下吧

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Share another 70 free jquery image slider effect plug-ins and tutorials_jqueryNext article：Share another 70 free jquery image slider effect plug-ins and tutorials_jquery

See more

Research report on Javascript loading execution optimization_javascript skills

Related articles