高效操作DOM-五八三

DOM(Document Object Model,文档对象模型)，是JavaScript操作HTML的接口（这里只讨论属于前端范畴的HTML DOM)。

属于前端的入门知识，同样也是核心内容，因为大部分前端功能都需要借助DOM来实现。比如：

动态渲染列表、表格表单数据
监听点击、提交事件
懒加载一些脚本或样式文件
实现动态展开树组件，表单组件级联等这类复杂的操作

DOM V3标准

DOM V3标准主要常见的由3个部分组成

DOM节点

DOM节点概念区分

概念	说明
标签	标签是HTML的基本单位，比如p、div、input
节点	节点是DOM树的基本单位，有多种类型，比如注释节点、文本节点
元素	元素是节点中的一种，与HTML标签相对应，比如p标签会对应p元素

举例说明

<p>亚里士朱德</p>

p是标签，生成DOM树的时候会产生两个节点

元素节点p
字符串为“亚里士朱德”的文本节点

操作DOM耗时？

为什么说操作DOM耗时？要解释DOM操作带来的性能问题，不得不了解浏览器的工作机制。

从深入理解DOM的必要性说起，然后分析了DOM操作耗时的原因，最后再针对这些原因提出了可行的解决方法。

线程切换

浏览器包含：渲染器引擎，JS引擎，它们都是单线程运行。单线程的优势：开发方便，避免多线程下的死锁、竞争等问题，劣势：失去了并发能力

为了避免两个引擎同时修改页面而造成渲染结果不一致的情况，这两个引擎具有互斥性，也就是说在某个时刻只有一个引擎在运行，另一个引擎会被阻塞。操作系统在进行线程切换的时候需要保存上一个线程执行时的状态信息，并读取下一个线程的状态信息，俗称上下文切换。而这个操作相对而言是比较耗时的。

每次DOM操作就会引发进程的上下文切换，从JavaScript引擎切换到渲染引擎执行对应操作，然后再切换回JavaScript引擎继续执行，这就带来了性能损耗。单次消耗的时间是非常少的，但是频繁大量的切换，就会引发性能问题。

重新渲染

渲染过程中最耗时的两个步骤为重排(Reflow)与重绘(Repaint)

渲染页面时会将HTML和CSS分别解析成DOM树和CSSOM树，然后合并进行排布，再绘制成我们可见的页面，如果在操作DOM时涉及到元素、样式的修改就会引起渲染引擎重新计算样式生成CSSOM树，同时还有可能触发对元素的重新排布(简称“重排”)和重新绘制（简称“重绘”）

验证一下，通过Chrome的性能分析工具，来对渲染耗时进行分析

通过修改DIV的边距触发重排，粗略的认为渲染耗时为Rendering、Painting之和：3030 + 15
通过修改DIV的边距触发重绘，粗略的认为渲染耗时为Rendering、Painting之和：2344 + 15

从结论可以看出：重排耗时明显高于重绘，同时两者Painting耗时接近，也印证了重排会导致重绘

高效操作DOM节点

了解了哪些因素会导致性能问题之后，就有相应的解决方案

循环外操作节点

本质：减少操作节点

const times = 10000
// 循环内
console.time('switch')
for (let i=0;i<times;i++){

  document.body ===1 ? console.log(1):void();
}
console.timeEnd('switch') //1.873046875ms
// 循环外
var body = JSON.stringify(document.body)
console.time('batch')
for (let i=0;i<times;i++){
  body === 1 ? console.log(1):void 0;
}
console.timeEnd('batch') //0.846923828125m

批量操作元素

const times = 10000;
// 循环添加
console.time('createElement')
for (let i=0;i<times;i++){

  const div = document.createElement('div')
  document.body.appendChild(div)
}
console.timeEnd('createElement')  //54.964111328125ms

// 批量添加
console.time('innerHTML'）
let html = ''
for (let i=0;i<times;i++){
  html += '<div></div>'
}
document.body.innerHTML += html
console.timeEnd('innerHTML')  //31.919921875ms

缓存元素集合

// 循环获取元素
for (let i=0;i document.querySelectorAll('div').length;i++){
  document.querySelectorAll(div)[i].innerText = i 
} // 21965ms


// 缓存元素集合
const divs = document.querySelectorAll('div')
for (let i=0;i<divs.length;i++){
  divs[i].innerText = i
} // 838ms

除了以上方法，还有一些原则有可能帮助提升渲染性能

尽量不要使用复杂的匹配规则和复杂的样式，从而减少渲染引擎计算样式规则生成CSSOM树的时间
尽量减少重排和重绘影响的区域
使用CSS3特性来实现动画效果

DOM事件

DOM事件数量非常多，即使分类也有十多种，比如键盘事件、鼠标事件、表单事件等，而且不同事件对象属性也有差异。

从防抖、节流、代理的角度出发，详细了解DOM事件

防抖

为函数的执行设置一个合理的时间间隔，避免事件在时间间隔内频繁触发。同时又保证函数的执行。

这个操作是完全可以抽取成公共函数的，在抽取成公共函数的同时，还需要考虑更复杂的情况

参数和返回值如何传递？

防料化之后的函数是否可以立即执行？

防抖化的函数是否可以手动取消？

案例：用户输入后能即时看到搜索结果

const debounce (func,wait = 0)=>{
  let timeout = null , args


  function debounced(...arg){
    args = arg
    if(timeout){
      clearTimeout(timeout)
      timeout = null
    }

    // 以Promise的形式返回函数执行结果
    return new Promise((res,rej)=>{
      timeout = setTimeout(async ()=>{
        try{
          const result = await func.apply(this,args)
          res(result)
        }catch(e){
          rej(e)
        }
      },wait)
    })
  }

  //允许取消
  function cancel(){
    clearTimeout(timeout)
    timeout = null
  }

  //允许立即执行
  function flush(){
    cancel()
    return func.apply(this,args)
  }

  debounced.cancel cancel
  debounced.flush flush
  return debounced
}

节流

设置在指定一段时间内只调用一次函数，从而降低函数调用频率。

案例：当用户滚动阅读右侧文章内容时，左侧大纲相对应部分高亮显示，提示用户当前阅读位置

const throttle=(func,wait=0,execFirstCall)=>{
  let timeout = null , args , firstCallTimestamp


  function throttled(...arg){


    if (!firstCallTimestamp) firstCallTimestamp = new Date().getTime();

    if (!execFirstCall || !args){
      console.log('set args:',arg)
      args = arg
    }

    if (timeout){
      clearTimeout(timeout)
      timeout = null
    }

    //以Promise的形式返回函数执行结果
    return new Promise(async(res,rej)=>{
      if (new Date().getTime() - firstCallTimestamp >= wait){
        try{

          const result=await func.apply(this,args)
          res(result)
        }catch(e){
          rej(e)
        }finally{
          cancel()
        }
      }else{
        timeout setTimeout(async ()=>{
          try{
            const result = await func.apply(this,args)
            res(result)
          }catch(e){
            rej(e)
          }finally{
            cancel()
          }
        },firstCallTimestamp + wait - new Date().getTime())
      }
    })
  }

  //允许取消
  function cancel(){
    clearTimeout(timeout)
    args = null
    timeout = null
    firstCallTimestamp = null
  }

  //允许立即执行
  function flush(){
    cancel()
    return func.apply(this,args)
  }

  throttled.cancel = cancel
  throttled.flush = flush
  return throttled
}