Website performance analysis (bottom)-Let the website load concurrently but perform JS website performance analysis in sequence (bottom) -Let the website load concurrently but execute Js in sequence

ArticleDirectory

• How to embed and use head. js
• Load multiple JavaScript files at one time in head. js.
• CSS functions of the browser
• How to use head. js to make css3 display different resolutions on different browsers
• HTML5 support for the earlier version of IE browser

If the website does not support JavaScript, complex functions will not work properly. During development, several scripts are usually written in the header of the HTML file. The more you embed, the slower the website speed. Therefore, it is necessary to increase the speed of parallel loading. in the previous article, I have provided two methods to increase the speed of website response. Today I will share the third method, let the website load in parallel but execute Js in sequence

Are you looking

Experience Sharing-delays JavaScript Execution and increases webpage loading speed
Use jquery to dynamically load JavaScript to reduce server pressure
Web development experience recommendation-eight useful clips from new website Projects

In this case, we can use head. js to solve this problem. Head. JS is a javascript that calls its own script. He canLoad Js in parallel, but execute it in order to speed up the website

How to embed and use head. js

The header of the HTML file. Embedded head. js configuration variablesHead_confSome special functions are required. You can set several options:

1<SCRIPT>2VaRHead_conf ={...}3</SCRIPT>45<SCRIPT src = "/JS/head. Min. js"> </SCRIPT>
 

Load multiple JavaScript files at one time in head. js.

The main function of head. JS is to load multiple scripts concurrently at the same time. On the contrary, you do not have to extract each script separately. The head. js workflow is as follows:

 
1Head. js ("file1.js", "file2.js", "file3.js ");
 

Although the above scriptFiles are sorted and written down. Head. js does not load the first file first, and then load the second file. It is loaded in parallel and then executed in sequence. It is easy to imagine that the advantage of this loading is that the style sheet and image loading speed is faster, making sure the whole page feels much faster.

CSS functions of the browser

In particular, head. js supports css3, because not all browsers support native standards. Head. js has special class definitions for different browser styles:

. WebKit P{Color:Red;}
 

In the preceding example, all P values in the WebKit browser are marked in red. You can clearly define that the browser supports specific css3 attributes or that your browser does not support:

 
1 . Borderimage Div{2 Border-Image:25% repeat URL ("border.png ");3}45 -No-borderimage Div{6 Border:1px solid green;7}
 

In this example, the IV element we define defines a class in a browser that supports border, and defines another class in a browser that does not support border to differentiate display.

 

How to use head. js to make css3 display different resolutions on different browsers

Another feature of head. JS is that you can define a style sheet to correspond to different resolutions. The following example:

 
Lt-1024 P{& Nbsp; font-size:10px;}
 

If the resolution is less than 1024 pixels, the font size is set to 10 points.Set in head_conf:

 
VaR head_conf ={Screens:[800,102 4]};
 

HTML5 support for the earlier version of IE browser

Older browsers-ignore HTML5 support, but head. js ensures that these elements can be correctly loaded even in old browsers.

Download head. js

Link to this article: website performance analysis (II)-Let the website load concurrently but execute Js in sequence

For more details, see website performance analysis (II)-Let the website load in parallel but execute Js in sequence

 

123