In JavaScript, the data storage location has an important impact on the overall performance of the Code. There are four data access types: Direct Volume, local variables, array items, and object member local variables, which can be understood as variables defined within the function, obviously, local variables are faster to access than those outside the scope, because they are located in the first variable object of the scope chain (for details about the scope chain, refer to this Article ). The deeper the variable is in the scope chain, the longer the access time is required, and the global variables are always the slowest, because they are located in the last variable object of the scope chain.
Access to each data type requires a certain performance cost. Both the direct amount and local variables can basically be consumed, while access to array items and object members requires a high price. It shows the time used to perform 200 operations on the four data types in different browsers.
It can be seen that to optimize the code performance, try to use the direct amount and local variables to limit the number of accesses to array items and object members (save object members with a local variable ).
First, we need to understand the access process of the object members. In fact, a function is a special object, so the access of object members is similar to the access of internal variables of the function. They are all trace-based searches. The former is the prototype chain, and the latter is the scope chain, it's just a little different about the chain method.
An object member contains attributes and Methods. If a member is a function, it is called a method. Otherwise, it is called an attribute.
Objects in JavaScript are based on the prototype (the prototype itself is an object), and the prototype is the basis of other objects. When you instantiate an Object or other built-in JS objects (var obj = new Object () or var obj = {}), the original image of the Instance obj is automatically created in the background, the browser FF, safari, and Chrome can use obj. _ proto _ attribute (equivalent to Object. prototype) can access this prototype, and because of this prototype, each instance can share the members of the prototype object. For example:
The Code is as follows:
Var book = {
Name: "Javascript Book ",
GetName = function (){
Return this. name;
}
};
Alert (book. toString (); // "[object Object]"
In this Code, the book object has two private members: the property name and the method getName. The book object does not define the member toString, but the call does not throw an error because the book object inherits the member of the original object. The relationship between the book object and its prototype is as follows:
The process of accessing the toString Member of the book object is as follows. when toString () is called, search for the "toString" member in the background, starting from the instance book itself. If a member named "toString" is found in the book, the search is complete. Otherwise, the search is continued for the prototype Object directed to _ proto _. If no member is found for the prototype Object of the Object, the Member is undefined. In this way, book can access each attribute or method of its prototype object.
Another advanced usage of an object is the simulation class and the inheritance class. The object that I like to call is the object class. The inheritance object class mainly relies on the prototype chain. If there are too many knowledge points, you need to explain them in detail. Through the search process of the above object members, the access speed of the object members will slow as the prototype chain goes deeper. The relationship between the depth of the object member in the prototype chain and the access time is displayed:
It is clear that every step into the prototype chain will increase the performance loss, so the operation overhead of traversing object members is very high. Another common and performance-consuming method is nested object members (such as window. location. href). The best way to do this is to reduce the number of points. For example, location. href is faster than window. location. href.
Let's sum up one sentence: the deeper an attribute or method is in the prototype chain, the slower it is to access it. Solution: store frequently used object members, array items, and out-of-domain variables into local variables, and then access this local variable.
