Some knowledge to effectively improve JavaScript execution efficiency_javascript skills

In order to provide a fresh and unique user experience, many websites use JavaScript to improve design, validate forms, check browsers, Ajax requests, cookie operations, etc., to achieve dynamic effects without refreshing. However, a large amount of content needs to be rendered in the browser, and if it is not handled properly, the website performance will drop sharply. So we need to understand how to improve the execution efficiency of JavaScript.

JavaScript Function

In JavaScript, functions are precompiled before use. Although sometimes strings can be used instead of functions, this JavaScript code will be re-parsed every time it is executed, affecting performance.

1. eval example

Copy code The code is as follows:

eval('output=(input * input)');
// It is recommended to change it to:
eval(new function() { output=(input * input)});

2. setTimeout example

Copy code The code is as follows:

setTimeout("alert(1)", 1000);
// It is recommended to change it to:
setTimeout(function(){alert(1)}, 1000);

Using functions instead of strings as parameters ensures that the code in the new method can be optimized by the JavaScript compiler.

JavaScript scope

Each scope in the JavaScript scope chain contains several variables. It's important to understand scope chaining in order to take advantage of it.

Copy code The code is as follows:

var localVar = "global"; //Global variable

function test() {

var localVar = "local"; //local variable

//Local variables
alert(localVar);

//Global variables
alert(this.localVar);

//If the document cannot be found in local variables, search for global variables
var pageName = document.getElementById("pageName");
}

Using local variables is much faster than using global variables because resolution is slower the further you go in the scope chain. The following figure shows the scope chain structure:

If there are with or try-catch statements in the code, the scope chain will be more complicated, as shown below:

JavaScript String

A function in JavaScript that greatly affects performance is string concatenation. Generally, symbols are used to splice strings. However, early browsers did not optimize this connection method, which resulted in the continuous creation and destruction of strings seriously reducing JavaScript execution efficiency.

Copy code The code is as follows:

var txt = "hello" " " "world";

It is recommended to change it to:

Copy code The code is as follows:

var o = [];
o.push("hello");
o.push(" ");
o.push("world");
var txt = o.join();

Let’s encapsulate it simply:

Copy code The code is as follows:

function StringBuffer(str) {
var arr = [];
arr.push(str || "");
This.append = function(str) {
arr.push(str);
         return this;
};
This.toString = function() {
          return arr.join("");
};
};

Then call it like this:

Copy code The code is as follows:

var txt = new StringBuffer();
txt.append("Hello");
txt.append(" ");
txt.append("World");
alert(txt.toString());

JavaScript DOM manipulation

HTML Document Object Model (DOM) defines a standard way to access and manipulate HTML documents. It represents an HTML document as a node tree containing elements, attributes, and text content. By using the HTML DOM, JavaScript can access all nodes in an HTML document and manipulate them.

DOM redraw

Every time the DOM object of the page is modified, it involves DOM redrawing, and the browser will re-render the page. Therefore, reducing the number of modifications of DOM objects can effectively improve the performance of JavaScript.

Copy code The code is as follows:

for (var i = 0; i < 1000; i ) {
var elmt = document.createElement('p');
elmt.innerHTML = i;
document.body.appendChild(elmt);
}

It is recommended to change it to:

Copy code The code is as follows:

var html = [];
for (var i = 0; i < 1000; i ) {
html.push('

' i '

');
}
document.body.innerHTML = html.join('');

DOM access

Every node in the HTML document can be accessed through the DOM. Every time you call getElementById(), getElementsByTagName() and other methods, the node will be searched and accessed again. Therefore, caching the found DOM nodes can also improve the performance of JavaScript.

Copy code The code is as follows:

document.getElementById("p2").style.color = "blue";
document.getElementById("p2").style.fontFamily = "Arial";
document.getElementById("p2").style.fontSize = "larger";

It is recommended to change it to:

Copy code The code is as follows:

var elmt = document.getElementById("p2");
elmt.style.color = "blue";
elmt.style.fontFamily = "Arial";
elmt.style.fontSize = "larger";

DOM traversal

DOM traversal of child elements usually reads the next child element in a loop according to the index. In early browsers, this reading method has very low execution efficiency. The nextSibling method can be used to improve the efficiency of js traversing DOM.

Copy code The code is as follows:

var html = [];
var x = document.getElementsByTagName("p");//All nodes
for (var i = 0; i < x.length; i ) {
//todo
}

It is recommended to change it to:

Copy code The code is as follows:

var html = [];
var x = document.getElementById("div");//Superior node
var node = x.firstChild;
while(node ​​!= null){
//todo
node = node.nextSibling;
}

JavaScript memory release

In web applications, as the number of DOM objects increases, memory consumption will become larger and larger. Therefore, the reference to the object should be released in time so that the browser can reclaim the memory.

Release the memory occupied by DOM

Copy code The code is as follows:

document.getElementById("test").innerHTML = "";

Set the innerHTML of a DOM element to an empty string to release the memory occupied by its child elements.

Release javascript object

Copy code The code is as follows:

//Object:
obj = null
//Object properties:
delete obj.property
//Array elements:
arr.splice(0,3);//Delete the first 3 elements