JavaScript Performance Tuning Summary

JS Load Order Optimization

principle : In the process of loading JavaScript using the SRC attribute, the browser must first download the code for the external file, which takes some time, and then parses and runs the code. In this process, page parsing and user interaction are completely blocked.

Solution:

--Place all <script> tags at the bottom of the page, immediately above the body close tag </body>.

--Package The script as a group. With fewer <script> tags on the page, the page loads faster and responds more quickly.

--Add defer attribute for <script> tag (only for Internet Explorer and Firefox 3.5 or later)
--Create <script> elements dynamically, use it to download and execute code
--Download the code with the XHR object and inject it into the page

JS for data access optimization

In JavaScript, the location of the data store can have a significant impact on the overall performance of the code. There are four types of data access: direct volume, variable, array item, object member. They have different performance considerations.

Direct and local variables are accessed very quickly, and array items and object members take longer.

A local variable is faster than an extraterritorial variable because it is in the first object in the scope chain. The deeper the variable is positioned in the scope chain, the longer it takes to access it. 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 are used sparingly.

The deeper the position of a property or method in the prototype chain, the slower it is to access it.

In general, you can improve the performance of JavaScript code by storing frequently used object members, array items, and extraterritorial variables in local variables. The local variables are then accessed faster than those of the original variables.

Dom Access optimizations

DOM access and manipulation is an important part of modern web applications. But every time you reach the Dom Island via a bridge from ECMAScript Island, you will be charged a "bridge fee".

Minimize DOM access and do as many things as possible on the JavaScript side.

Use local variables to hold DOM references where you repeatedly visit.

Handle HTML collections with care because they exhibit "presence" and always requery the underlying document. Caches the length property of the collection into a variable, which is used in the iteration. If you work with this collection frequently, you can copy the collection into an array.

Pay attention to redraw and re-typesetting, batch modify style, operate DOM tree offline, cache and reduce access to layout information.

Use absolute coordinates in animations, using drag-and-drop proxies.

Minimize the number of event handles using event-managed technology.

Algorithm and process optimization

The performance characteristics of the for,while,do-while cycle are similar, and no one is faster or slower than anyone else.

Do not use the for-in loop unless you want to iterate through an object that has an unknown property.

The best way to improve cycle performance is to reduce the amount of computation in each iteration and reduce the number of loop iterations.

In general, switch is always faster than if-else, but not always the best solution.

When the judging conditions are more, the table-checking method is faster than if-else or switch.

The browser's call stack size limits the recursion algorithm's application in JavaScript, and the stack overflow error causes other code to not execute properly.

If you encounter a stack overflow error, modify the method to an iterative algorithm or use the tabulation method to avoid duplication of effort.

The larger the amount of code that is running, the more noticeable the performance gains from using these policies are.

JavaScript Performance Tuning Summary