Introduction to page loading js and performance analysis methods_javascript skills

1. Load

First load the referenced js file of the static page, and then check whether the referenced file contains the onload function. For example, main.js contains the onload function. Check main.js to see if there are references to other js files. For references, the referenced js files are loaded first, and the loading order of the referenced files is consistent with the order of main.js.
After loading is completed, start executing the onload function. 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. Analyze with the help of tools
The developer tools of major browsers (I like using Firefox the most) can easily view each js file and html file , loading and execution time of css files and images.

2. Hard coding analysis
In the first step, we can basically locate the bottleneck js file. In the bottleneck js, you can use console.time('test') and console.Endtime(' test') statement pinches the execution time of js functions and code blocks. 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.