A brief discussion on page loading js and performance analysis methods_javascript skills

1. Loading

First load the reference js file of the static page, and then check whether the reference file contains the onload function. For example, main.js contains the onload function. Find whether there are references to other js files in main.js. Load the reference js first. Files, the loading order of the referenced files is consistent with the order of main.js.
After loading is completed, the onload function starts to be executed. Since the js execution sequence is sequential, in order to improve the page response speed, the general approach is to only draw the page in onload, and some event binding functions, ajax methods, etc. can be written later.

2. Response speed analysis

1. Use tools for analysis

The developer tools of major browsers (Firefox is my favorite) can easily check the loading and execution time of each js file, html file, css file and image.

2. Hard coding analysis

In the first step, we can basically locate the bottleneck js file. In the bottleneck js, we can use console.time('test') and console.Endtime('test') statements to pinch js functions and code blocks. Get the execution time. However, the console statement is only valid when executed in non-IE browsers, and an error will be reported under IE. If you prefer to use IE, use timestamps. When pinching, the more convenient method is to pinch the entire js file directly, and then use Firefox browser. Press F12 to see the time consumption of all functions and code blocks in the target js in the console, and you can locate the bottleneck code. at.