High-Performance JavaScript summary

One, load and run

JavaScript code execution blocks other browser processes, leverages Webpack or Gulp tools to compress files, reduces the number of JS files, and thus reduces the number of HTTP requests to improve the actual performance of Web applications.

Second, data access

One of the problems with classical computer science is determining where the data should be stored in order to achieve optimal read and write efficiency. Where the data is stored is related to the speed at which data is retrieved during code execution.

Four basic data storage locations in JS: Direct volume (String, number, Boolean, object, array, function, regular, NULL, undefind), variable, array item, object member.

Each data storage location has a specific load of read and write operations. direct and local variables are accessed faster than array items and object members . Therefore, use direct and local variables as much as possible, limiting the use of array items and object members.

For all browsers, the deeper the location of an identifier, the slower it is to read and write it. In the body of a function, if you use a variable value more than once, try to store the value of a variable outside the local scope with a local variable.

A local variable is faster than an extraterritorial variable because he is in the first object in the scope chain. The deeper the variable is located in the scope chain, the longer the actual access is. Global variables are always the slowest because they are always the last ring in the scope chain.

Nested object members can cause significant performance impact and should be used sparingly.

Third, DOM programming

The Document Object Model (DOM) is a language-independent application interface that uses XML and HTML document operations. Dom and JS (ECMAScript) are independent of each other and are connected by a functional interface, so each time you access or modify the DOM through JS, it can result in performance loss.

In general, for any type of DOM access, it is preferable to use a local variable to cache this DOM member, as if a DOM property or method has been accessed more than once.

Redraw and rearrange: When the DOM changes affect the geometry attribute (width height) of the element or its internal content, the browser needs to recalculate the geometry properties of the element, and the geometry properties and location of the other elements are affected. The browser invalidates portions of the render tree and then reconstructs the render tree. This process is called rearrangement. When re-typesetting is complete, the browser redraws the affected part of the screen in a redraw process.

Several reasons for causing a rearrangement:

1. Add or remove visible DOM elements

2. Change of element position

3. Element size change (box model)

4. Change of content

5, the original page rendering

6, the browser window size changes

Performance issues raised for reflow and redraw can reduce their impact by Bulk modification , offline manipulation of the DOM tree , caching, and reduced access to layout information .

Event hosting techniques can minimize the number of event handles.

Iv. algorithm and Process Control

The for-in loop in JS enumerates the named properties of any object, including the object's instance properties and inherited properties, which are generally deprecated.

The number of recursion supported by the JavaScript engine is directly related to the size of the JavaScript call stack.

Five, the response interface

Most browsers have a separate processing process, which is shared by two tasks: JavaScript any and User Interface update task (UI thread).

The total time (maximum) that a single JavaScript operation should use is 100 milliseconds.

Performance issues arise when multiple recurring timers are created by a colleague. Because there is only one UI thread, all timers compete for running time.

Vi. Ajax Asynchronous JavaScript and XML

Ajax is a method of communicating with a server without overloading the current page.

Beacons (beacons): JS is used to create a new image object that sets src to the URL of the server's previous script file, which contains the key-value pair data that you want to pass back through the get format.

As a data format, plain text and HTML are highly restrictive, but they can save the CPU cycles of the client. XML is widely used but very lengthy and slow to parse. JSON is lightweight, parsed quickly, interactive and XML equivalent. The custom format is very light-weight. In summary, the more lightweight the better the format, the better the custom format of JSON and character segmentation.

VII. Programming practices

eval (), function () constructors, Timers (SetTimeout () and SetInterval ()) Four functions allow you to get a string containing code in your program and run it. At this point, the cost of two evaluations takes longer than the direct inclusion of the corresponding code.

The timer recommends that the first parameter pass in a function instead of a string, or it will cause a memory leak.

JS's native part is generally written in low-level languages, such as C + +, so no matter how to optimize the JS code, will never be more than the JS engine to provide the native method faster, such as the built-in math object provides many methods.

High-Performance JavaScript summary