JS的性能咋个优化嘛

Web前端 来源:杨斌1994 56℃ 0评论

避免作用域链的频繁查找

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的效率比createElementappendChild效率高,同样也要注意缓存策略

UI事件代理

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

注意HTMLCollection类型的对象

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

欢迎评论

关闭

IT问道推荐

银行贷款频频被拒?
“Dr信用牛牛”让你远离信用污点 国内首家信用健康管理平台免费为你提供信用修复方案