JS的性能咋个优化嘛

避免作用域链的频繁查找

var gv;
function f () {
    // var iv = gv
    for 100
      console.log(gv)
      // console.log(iv)
}

避免重复的属性查找

首先对于o.x的时间复杂度是O(n)，对于一般变量的取值时间复杂度是O(1)

// var ce = document.createElement
for 100
  document.createElement('div')
  // ce('div')

减少语句

var a = null
var b = null
var c = null
/// var a = b = c = null

优化循环

• 减值循环
• 简化终止条件
• 简化循环体

另外介绍一下Duff装置：通过将循环体展开成多条循环体语句，大幅提高效率

var iterations = Math.floor(values.length / 8)
var leftover = values.length % 8
var i = 0

if (leftover > 0) {
  do {
    process(values[i++])
  } while (--leftover > 0)
}

do {
  process(values[i++])
  process(values[i++])
  process(values[i++])
  process(values[i++])
  process(values[i++])
  process(values[i++])
  process(values[i++])
  process(values[i++])
  // 记住是8个哦
} while (--iterations > 0)

缓存对于DOM的大量修改

document.createDocumentFragment()
另外使用innerHTML的效率比createElement和appendChild效率高，同样也要注意缓存策略

UI事件代理

页面上事件处理程序的数量和页面响应时间呈现负相关。
在父级+的元素上，根据冒泡和捕获特性，实现事件代理。

注意HTMLCollection类型的对象

文档查询的开销很昂贵，而且它们是动态更新的，注意缓存提升效率
getElementsByTageName()
childNodes
attributes
document.forms
document.images

欢迎评论