JS性能优化

避免全局查找

//这里循环中引用了多次document全局变量
function updateUI(){
  let imgs = document.getElementsByTagName("img")
  for (let i = 0; len = imgs.length; i < len; ++i){
    imgs[i].title = document.title + " image " + i  
  }    

  let msg = document.getElementById("msg");
  msg.innerHTML = "Update";    
}

// 将document对象存在本地doc中
function updateUI(){
  let doc = document
  let imgs = doc.getElementsByTagName("img")
// 同样将length存入变量中，循环不用每次都读取length
  for (let i = 0; len = imgs.length; i < len; ++i){
    imgs[i].title = doc.title + " image " + i  
  }    

  let msg = doc.getElementById("msg");
  msg.innerHTML = "Update";    
}

最小化现场更新

这段代码添加10个项目，每添加一个项目有2个现场更新：一个添加<li>，一个添加他的文本节点，这样添加10个项目就有20个现场更新。

var list = document.getElementById("myList"),
              item,
              i;
for(i=0; i < 10; i++){
  item = document.createElement("li");
  list.appendChild(item);
  item.appendChild(document.createTextNode("Item "+i))
}

优化：使用文档碎片来构建DOM结构，然后将其添加到list元素中，这样只有一次现场更新，发生在所有项目都创建好之后。
文档碎片用作一个临时的占位符，放置新创建的项目，然后使用appendChild()将所有项目添加到列表中

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

使用innerHTML

对于大的DOM更改，使用innerHTML要比使用标准DOM方法创建同样的DOM结构要快很多。

var list = document.getElementById("myList"),
      html = "",
      i;
for(i=0; i < 10; i++){
  html += "<li>Item" + i + "</li>";
}
list.innerHTML = html

优化循环

image.png

当循环次数是确定的，消除循环并使用多次函数调用往往更快。
有多个if-else，使用switch语句更快。