10 tips for JavaScript high performance development

javascript 10 recommendations for high performance development

Text / Development Department Dimmacro

Editor's note JavaScript Development Most programmers have done, write out the quality of the code is also very diverse, and now the browser embedded interpreter Although the efficiency is very high, but in the customer experience is still stretched to the trend, writing high-performance JavaScript code, will undoubtedly bring a better customer experience. The recommendations in this article will give the developer some direction and is worth reading.

1. Use delay script, dynamic load script, XHR script injection and other ways to load JS script, avoid multi-script loading the page that appears long wait.

Editor Interpretation: Each read a page, page content loading from top to bottom, every time a JS file is encountered, the UI thread pauses to read the page, download and enter the JS file to parse, if the JS file too large, often lead to pause time is too long, prolong the page load time. Therefore, using the above technology, only the required JS loaded in, to be fully displayed after the page, then load other JS, improve the customer experience.

2. Use temporary variables to store global objects and variables that require multiple accesses, reducing the time to resolve identifiers in the scope chain.

Editor interpretation: When the JS interpreter looks for variables, from local scope chain to global scope chain, if you read a global variable frequently and use temporary variable to refer to it, it will undoubtedly improve the efficiency of reading efficiency and code running.

3. In the JS script as much as possible on the element after the operation of the element, to avoid multiple reading of the same element location, size, offset and other information, stored with variables to reduce the UI thread reflow, redraw the pressure of the element. can also be modified by the hidden elements, the document fragment is modified to join, and the clone copy and after the operation of the copy to replace the original object, as far as possible due to the JS operation caused by multiple UI refreshes.

Editor's interpretation: each time the JS script modifies the HTML element, the UI thread redraws the entire page to update the page, reducing the redraw count, and improving the redraw and reflow efficiency.

4. Loop traversal many uses the step from the back forward, less than the length of the size to judge true or false to improve the performance of a lot. If-else the probability of processing in front of the judgment. The For loop takes more than one operation at a time using the Duff device mode.

Editor Interpretation: The average person iterates through an array or list is the previous traversal, this kind of traversal every time is compared to the current index is greater than the array length minus 1, if the adoption from backward forward, using JS less than 0 is false characteristics, reduce judgment. Duff device mode is a way of thinking that allows a loop to perform as many operations as possible, thus increasing efficiency. The basic idea is: first traverse the total number of times and 8 modulo times, and then traverse the total number of times in addition to the number of 8 rounding, each processing eight the same operation. Such as:

Dafu

variters = Math.floor (ARR.LENGTH/8);

varstartin = arr.length%8;   

start= +new Date ();

do{

Switch (startin) {

case0:process ();

case7:process ();

case6:process ();

case5:process ();

case4:process ();

case3:process ();

case2:process ();

case1:process ();

            }

startin= 0;

}while (--iters);

5. Recursive nesting takes advantage of memoization, which results in a less repetitive calculation of previous calculations.

Editor interpretation: Similar to the multiple factorial problem, in this way to cache the factorial results, can effectively avoid repeated calculations, improve efficiency. Example code:

function Memoize (fundamental,cache) {

cache= Cache | | {};

Varshell = function (ARG) {

if (!cache.hasownproperty (ARG)) {

cache[arg]= Fundamental (ARG);

            }

Returncache[arg];

};

Returnshell;

}

6. String connections are used more than + =, and the most common string in the connection string is placed in the leftmost position after the equal sign, such as Varnewstr=longstr+other1+other2 .... In the case of IE7 and earlier versions, concatenate strings with array-item connections.

Editor's interpretation: IE7 and earlier, the string connection operation taken is all copied to a new memory after the connection of the way, particularly consumption performance, but with the hardware and software upgrades, IE7 and earlier versions have to exit the historical stage. The new ie8,9 has done a lot of optimizations for string connections.

7. Identify the initial matching position of the regular expression, minimize the matching branch, and appropriately use the matching quantifier to avoid the performance problems caused by backtracking confusion.

Edit interpretation: Regular matching, each fuzzy or meta-character is a branch, at the end of each branch match, if there is no successful result, will be returned to the previous branch, therefore, reducing the matching branch can effectively improve the efficiency of matching.

8. Using Timers SetTimeout and SetInterval will take a long time to fragment processing JS script, you can avoid the appearance of the page suspended animation phenomenon.

Editor Interpretation: JS interpretation of the execution and page rendering shared a UI thread, so if the JS code takes too long thread, it will inevitably affect the page rendering and cause the phenomenon of suspended animation. The solution is to use the Timer function, separate the whole section of the JS code execution, segmented using the CPU, so that page rendering can have more opportunities to grab the execution time.

9. Use the native methods supported by the browser instead of the methods you implement yourself.

Editor's interpretation: Native methods, modern browsers have done some optimizations. such as IE8 after the implementation of the query Queryselector and Queryselectorall methods, more efficient than jquery, more convenient to use.

10. Using script preprocessing technology, JavaScript compression technology, multiple script merging techniques, etc., minimize the number of HTTP requests when the browser is loaded and the number of times to skip whitespace and comments.

Editor interpretation: When the page is loaded on each JS file will be executed an HTTP request, so that the content of the JS file read and parse, using the above technology, can reduce the number of HTTP requests, improve the efficiency of interpreter resolution.

From for notes (Wiz)

10 tips for JavaScript high performance development