Page load js and performance analysis method
- 2020-03-30 02:24:28
- OfStack
A, loading
Load the reference js file of static page first, and then find out whether the reference file contains the onload function, such as the onload function in main.js, find out whether there are references to other js files in main.js, and load the reference js file first.
When the load is complete, the onload function is executed. Since js execution order is sequential, in order to improve the corresponding speed of the page, the general approach is to draw only the page in onload, some event binding functions, ajax methods can be delayed writing.
Ii. Response speed analysis
1. Analyze with tools
The developer tools of each big browser (most like to use firefox) can easily view the load and execution time of each js file, HTML file, CSS file and image.
2. Hard-coded 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 extract the execution time of js functions and code blocks. However, the console statement only works in non-ie browsers, and an error is reported in IE. If you prefer Internet explorer, use a timestamp. When pinching, the more convenient method is to directly pinch the entire js file, and then use the firefox browser, press F12 to see all the functions and code blocks in the target js in the console, can be located at the bottleneck code.
Load the reference js file of static page first, and then find out whether the reference file contains the onload function, such as the onload function in main.js, find out whether there are references to other js files in main.js, and load the reference js file first.
When the load is complete, the onload function is executed. Since js execution order is sequential, in order to improve the corresponding speed of the page, the general approach is to draw only the page in onload, some event binding functions, ajax methods can be delayed writing.
Ii. Response speed analysis
1. Analyze with tools
The developer tools of each big browser (most like to use firefox) can easily view the load and execution time of each js file, HTML file, CSS file and image.
2. Hard-coded 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 extract the execution time of js functions and code blocks. However, the console statement only works in non-ie browsers, and an error is reported in IE. If you prefer Internet explorer, use a timestamp. When pinching, the more convenient method is to directly pinch the entire js file, and then use the firefox browser, press F12 to see all the functions and code blocks in the target js in the console, can be located at the bottleneck code.