Research report on Javascript loading execution optimization

Research report on Javascript loading execution optimization_javascript skills

WBOY

Release： 2016-05-16 16:26:45

Original

1538 people have browsed it

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

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.

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.

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.

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

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,

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

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