High-performance Javascript notes, data storage and access performance optimization_javascript skills

Local variables can also be understood as variables defined inside the function. It is obvious that accessing local variables is faster than variables outside the scope, because it is located in the first variable object of the scope chain (for an introduction to the scope chain, you can read this articles). The deeper a variable is in the scope chain, the longer it takes to access it. Global variables are always the slowest because they are the last variable object in the scope chain.

Access to each data type requires a performance price. Direct quantities and local variables are basically affordable, while accessing array items and object members is more expensive. The figure below shows the time it took for different browsers to perform 200'000 operations on these four data types.

As can be seen from the above figure, if you want to optimize the performance of the code, try to use direct quantities and local variables to limit the number of accesses to array items and object members (use a local variable to access the object members save).

First we need to understand the access process of object members. In fact, a function is a special object, so access to object members is similar to access to internal variables of a function. They are both based on chain searches. The former is a prototype chain, and the latter is a scope chain. There are just some differences in the chaining method. .

Object members contain properties and methods. If the member is a function, it is called a method, otherwise it is called a property.
Objects in JavaScript are based on prototypes (the prototype itself is an object), and prototypes are the basis for other objects. When you instantiate an Object object or other JS built-in object (var obj=new Object() or var obj={}), the prototype of the instance obj is automatically created by the background. The browser FF, safari, and Chrome can pass obj. The __proto__ attribute (equivalent to Object.prototype) can access this prototype, and it is precisely because of this prototype that each instance can share the members of the prototype object. For example:


The process of accessing the book object member toString is as follows. When book.toString() is called, the background searches for the member named "toString", starting from the instance book itself. If If a member named "toString" is found in the book, the search ends. Otherwise, the search continues to the prototype object pointed to by __proto__. If the member cannot be found in the prototype object of Object, it means that the member is undefined. In this way, book can access every property or method owned by its prototype object.

Another advanced usage of objects is simulated classes and inherited classes. I like to call objects used in this way object classes. Inheriting object classes is mainly accomplished by relying on the prototype chain. There are too many knowledge points that require additional detailed explanation. Through the above object member search process, the speed of accessing object members becomes slower as the prototype chain goes deeper. The following figure shows the relationship between the depth of an object member in the prototype chain and the access time:

As can be clearly seen from the above figure, each layer of the prototype chain will increase the performance loss, so operations like traversing object members are very expensive. Another commonly used and performance-consuming approach is to nest object members (such as window.location.href). The best approach is to reduce the number of clicks. For example, location.href is faster than window.location.href.

Okay, to sum it up in one sentence: the deeper a property or method is in the prototype chain, the slower it is to access it. The solution is to store frequently used object members, array items and variables outside the scope into local variables, and then access this local variable.