Keywords: identifiers, execution contexts, scopes, scope chains, variable objects, active object theory knowledge
It is important to understand how JavaScript manages scope and scope chains. Because the number of variable objects to look for in the scope chain directly affects the performance of the identifier resolution. The deeper the identifier is in the scope chain, the longer it takes to find and access it, and the negative impact on the execution time of the script if the scope is improperly managed.
When you execute JavaScript code, the JavaScript engine creates an execution context (Execution). The execution context, sometimes referred to as a scope, sets the context in which the code executes. The JavaScript engine creates a global execution context after the page loads, and then creates a corresponding execution context each time a function executes, eventually creating a stack of execution contexts at the top of the stack.
Each execution context has an associated scope chain that is used to resolve identifiers. The scope chain contains one or more variable objects that define identifiers within the execution context scope. There is only one variable object in the scope chain of the global execution context, which defines all the available global variables and functions in JavaScript. When a function is created (not executed), the JavaScript engine assigns the scope chain of the execution context at the time of creation to the internal property of the function [[[Scope]]. Then, when the function is executed, the JavaScript engine creates an active object (Activetion object) and assigns values to this, arguments, named arguments, and all local variables of the function when it is initialized. The active object appears at the top of the execution context-scoped chain, followed by the object in the function [[scope]] property.
When executing code, the JavaScript engine resolves identifiers such as variables and function names by searching the scope chain of the execution context. The process of parsing identifiers starts at the top of the scope and is done in a top-down order.
Verification Theory
function Add (NUM1, num2) {
return NUM1 + num2;
}
When this code executes to begin, the Add function has a [[scope]] property that contains only the global variable object. The following figure:
When the Add function is executed, the JavaScript engine creates a new execution context and an active object that contains this, arguments, NUM1, num2, and adds the active object to the scope chain. When running inside the Add () function, the JavaScript engine needs to parse the NUM1 and num2 identifiers in the function. var total = Add (5, 10);
The parsing process begins with the first object in the scope chain, which is the active object that contains the local variable of the function. If an identifier is not found in the object, it continues to find the identifier in the next object in the scope chain. Once the identifier is found, the lookup ends.
Efficient data Access
A local variable is the fastest read-write identifier in JavaScript.
A good experience: any non-local variable that is used more than once in a function should be stored as a local variable.
For arrays and objects, always store those values that require frequent access to local variables.
In fact, the DOM document is dynamically queried every time the Htmlcollection object property is accessed.
If you need to repeatedly access the members of a Htmlcollection object, the efficient way is to copy them into the array.