JavaScript improves performance knowledge point rollup _javascript tips

One, for the JS file loading location

The,<script> tag in an HTML file can be added to the

1. If the JS file does not have special requirements to indicate the need to load and compile before the page renders, then choose to place the JS file before the </body> tag (all the pages are rendered behind), or the CSS file to the

2. If these JS files have specified need to execute first, to better display the content of the page, then on the first JS or page first put a load of small animation, you can some interesting or Meng Meng animation scenes. This is also better to avoid the user waiting for boredom, and perhaps others are more interested in this loading animation, so as to enhance the project's user experience.

Final recommendation: put <script> tags in front of </body> tags as much as possible before loading to enhance the user experience.

Second, for JS file merging
In many team development, we may put different functions of the code blocks in different JS files, so that in the development process of the people to write code will be more convenient, after all, only need to find the corresponding folder or file rather than in a very long file to find a way. This is really going to improve team development efficiency and make it easier to develop and maintain two times after new entrants. So put this problem into page performance? This is the problem, as noted in this book: Each HTTP request brings with it additional performance overhead,so downloading one single KB file wil L be faster than downloading four KB files.

Downloading 1 100KB of files is faster than downloading 4 25KB of files. And the development process of the Central Division of the various documents have great benefits, then the merger of the problem will be put in the development after processing, I believe that this operation is not unfamiliar to everyone, now the front-end tools so rich, You are accustomed to use what compression with what compression it ~
Here simply put forward, in the loading of files can also be used to defer and async properties, for lazy loading and asynchronous loading, in modern browsers, most of them have been supported defer properties, not accustomed to use this amount, do not know what will be the specific problems. Interested friends can Google the knowledge point, here is a simple mention it.

Now the framework is also mostly in conjunction with lazy loading and on-demand loading.

Third, faster data access

For browsers, the deeper the position of an identifier, the slower it is to read and write to him (this is the case with the prototype chain). This should not be difficult to understand, simple analogy is: grocery store away from your home, you go to soy sauce spent more time. Bear Child, a soy sauce so long, the food early burnt-.-~

If we need to use a variable value more than once in the current function, then we can store it with a local variable, and the case is as follows:

 Modify the former
 function Showli () {
   var i = 0;
   for (; I<document.getelementsbytagname ("Li"). length;i++) {  //once access to document
     Console.log (i, document.getElementsByTagName ("Li") [i]); Three visits to document
   };
 Modified
 function Showli () {
   var li_s = document.getelementsbytagname ("li");//once Access document
   var i = 0;
   for (; i<li_s.length;i++) {
     console.log (i,li_s[i]);//three access local variable li_s
   };
 

Iv. optimization of DOM operations

As we all know, DOM operations are far more performance-intensive than JavaScript, and while we can't avoid manipulating the DOM, we can try to reduce the performance cost of the operation.

Let's use the code to explain the problem:

 function innerli_s () {
   var i = 0;
   for (; i<20;i++) {
     document.getElementById ("Num"). Innerhtml= "a";//20 cycles, 2 DOM element accesses at a time: Read the InnerHTML value at a time, Write value at once
   }
 ;

Make one rewrite for the above methods:

 function innerli_s () {
   var content = "";
   var i = 0;
   for (; i<20;i++) {
     content + = "A";//here only to the JS variable loop 20 times
   };
   document.getElementById ("Num"). InnerHTML + = content; Here the value has a DOM operation, 2 times DOM access: Read the value of innerHTML once, write the value
 };

Reduce the DOM redraw redraw

Changes in element layout or additions or deletions to the browser window will result in rearrangement, and changes in font color or background color will result in redrawing.
For operations like the following, it is said that modern browsers are mostly optimized (optimized for 1-time reflow):

 Modified before
 var el = document.getElementById ("div");
 El.style.borderLeft = "1px"; 1 re-typesetting
 el.style.borderRight = "2px";//1 re-typesetting
 el.style.padding = "5px";//1 times re-typesetting
 //modified
 var el = document.getElementById ("div");
 El.style.cssText = "border-left:1px;border-right:2px;padding:5px"; 1 times re-typesetting

For multiple operations, the following three methods can also reduce the number of reflow and redraw:

1.Dom Hide First, then show 2 times rearrangement (temporary Display:none)

2.document.createdocumentfragment () Create document fragment processing, append to page 1 times after operation

3.var Newdom = Olddom.clonenode (True) to create a copy of the DOM, OldDOM.parentNode.replaceChild (Newdom,olddom) overwrites the original Dom 2 times after modifying the replica

Vi. optimization of the cycle

This should be more people know the way of writing, simple with can be (after or with the code + annotation form description) ~

Modified before
 var i = 0;
 for (; i<arr.lengthli++) {//Each loop needs to get the length
   Console.log (arr[i] of the array arr);
 Modified
 var i = 0;
 var len = arr.length; Gets the length for 
 (; i<len;i++) {
   console.log (Arr[i]) of
 the array arr;
 or
 var i = arr.length;;
 for (; i;i--) {
   console.log (arr[i]);
 }

Vii. Rational use of binary system

For example: to 2 modulo, then even the lowest bit is 0, the odd lowest bit is 0, with 1 bitwise AND operation of the result is 0, odd number of the lowest bit is 1, with 1 of the bit and the result of the operation is 1.

The code is as follows:

 . odd{color:red}
 . Even{color:yellow}

  <ul>
    <li>1</li>
    <li>2</li >
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</ Li>
  </ul>

 var i = 0;
 var lis = document.getelementsbytagname ("li");
 var len = lis.length;
 for (; i<len;i++) {
  if (i&1) {
   lis[i].classname = "even";
  } else{
   lis[i].classname = "odd";
  }
 ;

Although modern browsers have done a very good job, but the beast that this is their own code for the quality of a pursuit. And maybe a point or two points do not pay attention is not how much performance impact, but the optimization from multiple points, the likely result will be a qualitative leap

JavaScript Summary of these several improve the performance of knowledge points, I hope you firmly grasp.