代码层面的性能优化

慎用全局变量

• 全局变量定义在全局执行上下文，是所有作用域链的顶端
• 全局执行上下文一直存在于上下文执行栈，直到程序退出
• 如果某个局部作用域出现了同名变量则会遮蔽或污染全局

缓存全局变量

• 把全局变量赋值给局部变量

function getDom() {
  let doc = document
  let div1 = doc.getElementById('div1')
  let div2 = doc.getElementById('div2')
  let div3 = doc.getElementById('div3')
  let div4 = doc.getElementById('div4')
}

原型新增方法

let fn1 = function () {
  this.foo = function () {
    console.log(1111);
  }
}

//推荐使用原型方式
let fn2 = function () {}
fn2.prototype.foo = function() {
  console.log(2222);
}

虚拟DOM方式添加节点

//普通方式创建节点
for (let i = 0; i < 10; i++) {
  let op = document.createElement('div')
  op.innerHTML = i
  document.body.appendChild(op)
}


//虚拟dom方式创建节点,推荐使用
const fragEle = document.createDocumentFragment()
for (let i = 0; i < 10; i++) {
  let op = document.createElement('div')
  op.innerHTML = i
  fragEle.appendChild(op)
}
document.body.appendChild(fragEle);