How JavaScript improves performance knowledge _ javascript skills

This article mainly introduces several knowledge points about JavaScript to improve performance. For more information, see I. js file loading location

In an HTML file, the script tag can be addedRegion andRegion. In view of the single thread of JavaScript Execution and UI rendering, if the js file is loaded, the page parsing process is blocked, the page will not continue to perform the operation until the js file is fully loaded and running. Then the problem arises, which may result in blank or choppy pages. As a front-end developer, it is important not only to meet the needs, but also to have a superior user experience. In this case, we need to eliminate the user's boring waiting. To address this problem, we have two solutions that this animal has come up:

1. If the js file does not have special requirements to specify the file that needs to be loaded and compiled before page rendering, then place the js FileBefore the tag (after the content displayed on all pages), the css file is still placedArea (no one wants to see a messy page ). In this way, users can see the layout of pages rather than blank pages first. Some people may point out that the data has to be loaded in through js requests. What should I do? Data can be loaded and sorted, and the interface in urgent need of presentation can be put before execution. If not, the execution can be postponed and a simple loading animation or prompt can be made.

2. if these js files indicate that they need to be executed first to better display the page content, put a loading animation on the first js or page, it can be used in interesting or cute animation scenarios. This can also better avoid the boredom of users waiting, maybe people are more interested in this loading animation, which can improve the user experience of the project.

Final recommendation:Put the script tag as much as possibleAdd tags to improve user experience.

Ii. Merge js files
In the development of many teams, we may place different functional code blocks in different js files, so that it is more convenient for everyone to write code together during the development process, after all, you only need to find the corresponding folder or file instead of finding a method in a very long file. This will indeed improve the development efficiency of the team and facilitate secondary development and maintenance after the newcomers join. So what about putting this problem into page performance? This is exactly the problem. This book points out that Each HTTP request brings with it additional performance overhead, so downloading one single 100 KB file will be faster than downloading four 25 KB files.

Downloading a kb file is faster than downloading four 25KB files, and separating each file in the development process has great benefits, then the problem of merging will be processed after development. I believe that this operation will not be unfamiliar to everyone. The current front-end tools are so rich that everyone will use compression when they are used to compression ~
The defer and async attributes can also be used to load files. In modern browsers, most of them already support the defer attribute, I am not used to using this amount, and I don't know if there will be any problems. If you are interested, you can google this knowledge point. Here is a simple example.

Currently, most of the frameworks work with lazy loading and on-demand loading.

3. faster data access

For a browser, the deeper the location of an identifier, the slower it is to read and write it (for this reason, the prototype chain is also the same ). It should be easy to understand. A simple analogy is: The farther away the grocery store is from your home, the longer it takes to cook soy sauce... bear child, make soy sauce so long, the food is burned -. -~

If we need to use a variable value multiple times in the current function, we can use a local variable to store it first. The example is as follows:

// Function showLi () {var I = 0; for (; I
 
  

  
Iv. Optimization of DOM operations
  
As we all know, DOM operations are far more efficient than javascript operations. Although we cannot avoid DOM operations, we can minimize the performance consumption of such operations.
  
Let's explain this problem through code:
  

  
Function innerLi_s () {var I = 0; for (; I <20; I ++) {document. getElementById ("Num "). innerHTML = "A"; // 20 cycles are performed, and two DOM element accesses are performed at A time: the value of innerHTML is read at A time, and the value is written at A time };};
  

  
Rewrite the preceding method:
  

  
Function innerLi_s () {var content = ""; var I = 0; for (; I <20; I ++) {content + = ""; // here, only js variables are cyclically 20 times}; document. getElementById ("Num "). innerHTML + = content; // here, the value is a DOM operation, and DOM access is performed twice: the value of innerHTML is read at a time, and the value is written at a time };
  

  
5. Reduce the re-layout of Dom
  
Changes to the element layout, content addition, deletion, or browser window size will lead to re-painting. Changes to the font color or background color will lead to re-painting.
For operations similar to the following code, it is said that most modern browsers have been optimized (to be retyped once ):
  

  
// Var el = document. getElementById ("p"); el. style. borderLeft = "1px"; // retypeset el once. style. borderRight = "2px"; // re-typeset el once again. style. padding = "5px"; // There is another re-layout // var el = document after modification. getElementById ("p"); el.style.css Text = "border-left: 1px; border-right: 2px; padding: 5px"; // retypeset once
  

  
For multiple operations, the following three methods can also reduce the number of re-typographical and re-painting times:
  
1. the Dom is hidden first, and the operation is then re-displayed twice (temporary display: none)
  
2.doc ument. createDocumentFragment () creates a document fragment for processing, and appends it to the page for rearranging once.
  
3. var newDOM = oldDOM. cloneNode (true) create a Dom copy. After the copy is modified, oldDOM. parentNode. replaceChild (newDOM, oldDOM) overwrites the original DOM for two rearrangements.
  
Vi. Loop Optimization
  
This should be something that many people know. It can be simply taken over (it will be described in code + annotations later )~
  

  
// Var I = 0; for (; I
VII. Rational Use of Binary
For example, if the modulo operation is performed on 2, the even number of decimal places is 0, the odd number of decimal places is 0, and the result of bitwise AND operation on 1 is 0, and the odd number of decimal places is 1, the result of bitwise AND operation with 1 is 1.
The Code is as follows:
 .odd{color:red} .even{color:yellow}  
    
   
    
     
    
1
    
     
    
2
    
     
    
3
    
     
    
4
    
     
    
5
    
     
    
6
  
    
   
Var I = 0; var lis = document. getElementsByTagName ("li"); var len = lis. length; for (; I
    
     

     

     
Although modern browsers have already done a good job, this animal thinks this is a pursuit of code quality. In addition, a single point or two points won't have much impact on performance, but after being optimized from multiple points, it may lead to a qualitative leap.
     
I hope you can master these knowledge points in JavaScript to improve performance.