Implement high-performance data storage in JavaScript

1. There are four basic data access locations in JavaScript: literals, local variables, array elements, and object members.

Generally speaking: [literal, local variable] running speed > [array, object member]

2. Internal properties contain a function created A collection of objects in the scope. This set is called a scope chain.

3. Execute the function->Create execution environment->Create active object (i.e. function runtime variable object).

So calling the same function multiple times will result in the creation of multiple execution environments.

4. Function execution process

Every time a variable is encountered, it will go through an identifier resolution process, where to obtain or store data. This process searches the scope chain of the execution environment. It is this search process that affects performance.

5. Performance of identifier parsing

Global variables always exist at the end of the execution environment scope. Local variables are resolved first.

Rule of thumb: If a cross-scope value is referenced more than once in a function, store it in a local variable.

For example:

function initUI(){
 var bd=document.body;
 //后面有多次doucument这个全局对象的调用
}
//->优化后
function initUI(){
 var doc=document;
  bd=doc.body;
 //把doucument这个全局对象的引用存储到局部变量doc中
 
}

6. Change the scope chain

Generally speaking, a The scope chain of the execution environment will not change.

f35d6e602fd7d0f0edfa6f7d103c1b57with can temporarily change the scope chain

width is used to create a variable for all properties of the object

function initUI(){
 with(document){
 var bd=body; 
 }
}

When the code is executed to with, The scope chain of the execution environment is temporarily changed. A new variable object is created, which contains all properties of the object specified by the parameter. This object is pushed into the first position of the scope chain, so at this time all local variables are in the second scope chain object, so the access cost is higher.

2cc198a1d5eb0d3eb508d858c9f5cbdbtry-catch

When an error occurs in the try statement, the execution process will automatically jump to the catch. Then push the exception object into a variable object and place it at the top of the scope.

Note: Once the catch substatement is executed, the scope chain will return to the previous state.

7. Performance issues caused by closures

Closures are one of the most powerful features of JavaScript.

Because the closure contains a reference to the same object that executes the scope chain of the environment, the active object of the function will not be destroyed, causing more memory overhead.

Performance points of concern: When cross-scope identifiers are frequently accessed, each access will cause performance loss.

Start:19:41:45 2015-11-21 Quoted from by Aaron：/content/3493261.html

8. Memory leak

Memory leak means that a piece of allocated memory cannot be used or recycled until the browser process ends. In C++, because memory is managed manually, memory leaks are a common occurrence. Nowadays, popular languages ​​​​such as C# and Java use automatic garbage collection methods to manage memory, and almost no memory leaks occur under normal use. Browsers also use automatic garbage collection to manage memory. However, due to bugs in the browser's garbage collection method, memory leaks may occur.

Several situations of memory leaks

Circular reference

Javascript closure

DOM insertion order

If a DOM object is referenced by a Javascript object and at the same time references the same or other Javascript object, the DOM object may cause a memory leak. The reference to this DOM object will not be reclaimed by the garbage collector when the script stops. To break a reference cycle, the object referencing the DOM element or a reference to the DOM object needs to be assigned null.

The specifics will be discussed in depth, here is the summary

JS memory leaks, no wonder the elements are removed from the DOM, but there are still variables or object references The DOM object. Then it cannot be deleted from the memory. This keeps the browser's memory usage high. This memory usage will be automatically released as the browser refreshes.

Another situation is circular reference. A DOM object and a JS object refer to each other. This causes a more serious situation. Even if refreshed, the memory will not be reduced. This is a memory leak in the strict sense.

The above is the content of realizing high-performance data storage in JavaScript. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!