前端js嵌套遍历优化_前端js性能优化的要点

1 尽量少使用全局查找，比如全局变量，如果要多次使用，可以将全局变量存为局部变量再使用

eg：function(){

var body=document.body;

alert(body):

body.innerHTML="hello world"

}

2.优化循环 (1)减值循环 i--(2)do-while比for循环快 (3)简化循环条件 比如循环条件少计算

3 Dom层-最小化现场操作，

就是比如新增很多dom 可以先for循环创建个整体的dom碎片 然后再一次性添加进去 会比一个个dom添加要快

var list=document.getElementById("mylist");

var frament=document.createDocumentFragment();

for (var i=0;i<10;i++){

var item=document.creatElement('li')

frament.appendChild(item)

}

list.appendChild(frament)

4 Dom层 --少使用HTMLCollection

比如循环中获取dom的length

var images=document.getElementsByTagName('img')

for(i=0,len=images.length;i

}

这样就不用总访问images的HTMLCollention

会访问HTMLCollention 的一些情况

(1)进行了getElementsByTagName()调用

(2)获取了元素的childNodes属性

(3)获取了元素的 attributes属性

(4)访问了特殊的集合 如documet.forms ,document.images

5 布局抖动问题

var h1 = element1.clientHeight

element1.style.height = (h1 * 2) + 'px'

var h2 = element2.clientHeight

element2.style.height = (h2 * 2) + 'px'

var h3 = element3.clientHeight

element3.style.height = (h3 * 2) + 'px'

布局抖动是指 DOM 元素被 JavaScript 多次反复读写，导致文档多次无意义重排。我们知道浏览器很“懒”，它会收集(batch)

当前操作，统一进行重排。可是，如果在当前操作完成前，从 DOM 元素中获取值，这会迫使浏览器提早执行布局操作，

这称为强制同步布局。这样的副作用对于低配置的移动设备来说，后果是不堪设想的。

初步优化方案：

// 读

var h1 = element1.clientHeight

var h2 = element2.clientHeight

var h3 = element3.clientHeight

// 写(无效布局)

element1.style.height = (h1 * 2) + 'px'

element2.style.height = (h2 * 2) + 'px'

element3.style.height = (h3 * 2) + 'px'

加强版(所有 DOM 的写操作在下一帧一起执行)：

var h1 = element1.clientHeight

// 写

requestAnimationFrame(() => {

element1.style.height = (h1 * 2) + 'px'

})

// 读

var h2 = element2.clientHeight

// 写

requestAnimationFrame(() => {

element2.style.height = (h2 * 2) + 'px'

})

// 读

var h3 = element3.clientHeight

// 写

requestAnimationFrame(() => {

element3.style.height = (h3 * 2) + 'px'

}