避免作用域链的频繁查找
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
欢迎评论