Analysis of DOM interactive operation examples for javascript performance optimization_javascript skills

The examples in this article describe DOM interactive operation techniques for javascript performance optimization. Share it with everyone for your reference, the details are as follows:

In all aspects of JavaScript, DOM is undoubtedly the slowest part. DOM operations and interactions take a lot of time because they often require re-rendering the entire page or a certain part. Understanding how to optimize interaction with the DOM can greatly improve the speed of script completion.

1. Minimize DOM update

Look at the example below:

var list = document.getElementById("ul");
for (var i=0; i < 10; i++){
  var item = document.createELement("li");
  item.appendChild(document.createTextNode("item" + i));
  list.appendChild(item);
}
//这段代码为列表添加10个项目。添加每个项目时，都有两次DOM更新。总共需要20次DOM更新。

We can use document fragmentation to minimize DOM updates.

var list = document.getElementById("ul");
var fragment = document.createDocumentFragment();
for (var i=0; i < 10; i++){
  var item = document.createELement("li");
  item.appendChild(document.createTextNode("item" + i));
  fragment.appendChild(item);
}
list.appendChild(fragment);

For more information about document fragmentation, please see the previous article "Analysis of JavaScript document fragmentation operation examples"

2. Use innerHTML

For larger DOM changes, using innerHTML is faster than createElement() and appendChild().

var list = document.getElementById("ul");
var html = "";
for (var i=0; i < 10; i++){
  html += "<li>item" + i + "<li>";
}
list.innerHTML = html;

3. Use event delegation

For details, please refer to the previous article "Detailed explanation of event delegation instances for javascript performance optimization"

4. Pay attention to NodeList

Minimizing the number of accesses to NodeList can greatly improve the performance of the script, because each time a NodeList is accessed, a document-based query will be run.

var imgs = document.getElementsByTagName("img");
for (var i=0, len=imgs.length; i < len; i++){
  var image = imgs[i];
  //more code
}
//这里的关键是长度length存入了len变量，而不是每次都去访问NodeList的length属性。当在循环中使用NodeList的时候，把imgs[i]放入image变量中，以避免在循环体内多次调用NodeList;

For more information about NodeList, please see the previous article "How to process NodeList as an Array array in javascript"

I hope this article will be helpful to everyone in JavaScript programming.