High-performance JavaScript knowledge _javascript skills that front-end programmers must know

Presumably everybody knows, Javascrip is the whole stack development language, browser, mobile phone, the server side can see JS figure. This article will share some of the most efficient JavaScript best practices to improve your understanding of JS's underlying and implementation principles.

Data storage
A classic problem with computer science is that by changing the location of the data store to get the best read and write performance, the location of the data store can have a significant impact on code performance in JavaScript. – You can use {} to create an object without using the new object, and you can use [] to create an array without using the new array. The literal volume in JS is accessed faster than the object. – The deeper the position of the variable in the scope chain, the longer the required practice is to be accessed. For this variable, you can save it with a local variable by caching, reducing the number of access to the scope chain – using dot notation (object.name) and operator (Object[name]) operations without much distinction, only safari makes a difference, and the point is always faster

Cycle
The common loops in JS are the following:

for (var i = 0; i < i++) {//does something} for 
(var prop in object) {//For loop object}  
[1,2].foreach (func tion (value, index, array) {//function-based loops})

Needless to argue, the first way is native, the lowest performance consumption, the fastest. The second way for-in each iteration to generate more overhead (local variables), its speed is only the first of the 1/7 the third way clearly provides a more convenient way to cycle, but his speed is only 1/8 of the normal cycle. Therefore, according to their own project situation, choose the right way to cycle.

Event delegates
Just imagine each of the tabs on the page adds an event, and we will add an onclick to each label. This can affect performance when a large number of elements in a page need to be bound to the same event processing. Each binding event increases the load on the page or during the run. For a rich front-end application, an excessive number of bindings can consume too much memory on an interactive page. A simple and elegant way is an event delegate. It is an event-based workflow: Layers of capture, reach targets, bubble-by-layer. Now that the event has a bubbling mechanism, we can handle all of the child elements starting events by giving the outer bound event.

document.getElementById (' content '). onclick = function (e) { 
  e = e | | window.event;  
  var target = E.target | | e.srcelement;  If it is not a label, I will exit if  
  (Target.nodenmae!=== ' a ') {return}  //Print A's link address  
  console.log (TARGET.HREF)}

Redraw and rearrange
when the browser finishes downloading the HTML,CSS,JS, it generates two trees: the DOM tree and the render tree. When the geometry of the DOM changes, such as the height of the DOM, or the color, position, the browser needs to recalculate the geometry of the element and reconstruct the rendering tree, which is called redrawing the rearrangement.

Bodystyle = Document.body.style; 
Bodystyle.color = red; 
Bodystyle.height = 1000px; 
Bodystyke.width = 100%;

By modifying the three properties above, the browser will rearrange the redraw three times, and in some cases reducing the rearrangement can improve the rendering performance of the browser. The recommended method is as follows, only one operation, complete three steps:

Bodystyle = Document.body.style; 
Bodystyle.csstext ' color:red;height:1000px;width:100% ';

JavaScript load
ie8,firefox3.5,chrome2 allows JavaScript files to be downloaded on a mandatory line. So <script> won't block other tag downloads. Unfortunately, the JS download process will still block other resources downloads, such as pictures. Although the latest browsers improve performance by allowing concurrent downloads, scripting blocking is still a problem. Therefore, it is recommended that all <script> tags be placed at the bottom of the <body> tag to minimize the impact on the entire page rendering, so that users can not see a blank

JS file High Performance deployment
Now that you know that multiple <script> tags can affect the speed of page rendering, it's not difficult to understand that "reducing the HTTP required for page rendering" is a classic rule of speed for Web sites. Therefore, in the product environment merged all JS files will reduce the number of requests, thus speeding up the page rendering speed. In addition to merging JS files, we can also compress JS files. Compression is the stripping of the part of the file that is not relevant to the operation. The split content includes whitespace characters, and comments. A change process can usually halve the file size. There are also some compression tools that reduce the length of local variables, such as:

var myname = "foo" + "bar"; 
After compression becomes 
var a = "Foobar";

Cache JS Files
caching HTTP components can greatly improve the user experience of a site visit. The Web server uses the "Expires HTTP response header" To tell the client how long a resource should be cached. Of course, caching also has its own drawbacks: When an application is upgraded, you need to make sure that the user downloads to the latest static content. This problem can be resolved by changing the file name of the static resource. You may see in the Product Environment Browser reference Jsapplication-20151123201212.js, this is the time stamp to save the new JS file, so as to solve the cache does not update the problem.

Summarize
Of course, efficient JS is not only the place to improve, if we can reduce the loss of some performance, we will be more efficient use of javascript development.