关注前端开发微信微信号web007007

前端性能优化:写出高性能的JavaScript

作者 管理员 发布时间 2012-06-07 12:59 文章分类 JavaScript 文章评论 抢沙发 阅读次数

减少浏览器的repaint/reflow
1.什么是浏览器的repaint/reflow

页面在加载的过程中,需要对文档结构进行解析,同时需要结合各种各样的样式来计算这个页面长什么样子,最后再经过浏览器的渲染页面就出现了。这整个过程细说起来还是比较复杂,其中充满了repaint和reflow。对于DOM结构中的各个元素都有自己的盒子模型,这些都需要浏览器根据各种样式(浏览器的、开发人员定义的等)来计算并根据计算结果将元素放到它该出现的位置,这个过程称之为reflow;当各种盒子的位置、大小以及其他属性,例如颜色、字体大小等都确定下来后,浏览器于是便把这些元素都按照各自的特性绘制了一遍,于是页面的内容出现了,这个过程称之为repaint。

在页面加载完成后,用户的一些操作、脚本的一些操作都会导致浏览器发生这种行为。
2.如何触发浏览器的repaint/reflow
DOM元素的添加、修改(内容)、删除( Reflow + Repaint)
仅修改DOM元素的字体颜色(只有Repaint,因为不需要调整布局)
应用新的样式或者修改任何影响元素外观的属性
Resize浏览器窗口、滚动页面
读取元素的某些属性(offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE))
3.为什么要避免repaint/reflow

每一次触发repaint/reflow都会导致祖先节点和子节点重新渲染
4.如何避免触发repaint/reflow
Fast because there’s no repaint/reflow(通过避免repaint/reflow提高js性能)
Techniques:

–Remove element from the document, make changes, insert back into document( 先将元素从document中删除,完成修改后再把元素放回原来的位置)
–Set element’s display to “none”, make changes, set display back to default(将元素的display设置为”none”,完成修改后再把display修改为原来的值)
–Build up DOM changes on a DocumentFragment then apply all at once(如果需要创建多个DOM节点,可以使用DocumentFragment创建完后一次性的加入document)

DocumentFragment

JS中提供了一个DocumentFragment的机制,相信大家对这个并不陌生,它可以提供一个缓冲的机制,将DOM节点先放到内存中,当节点都构造完成后,再将DocumentFragment对象添加到页面中,这时所有的节点都会一次渲染出来,这样就能减少浏览器很多的负担,明显的提高页面渲染速度。

function CreateNodes(){

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

var tmpNode = document.createElement(“div”);
tmpNode.innerHTML = “test” + i + ” <br />”;
document.body.appendChild(tmpNode);//每次循环都要执行一次appendChild,也就是触发了reflow

}
}

function CreateFragments(){

var fragment = document.createDocumentFragment();//构造缓存空间

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

var tmpNode = document.createElement(“div”);
tmpNode.innerHTML = “test” + i + “<br />”;
fragment.appendChild(tmpNode);//把节点缓存到缓存空间中
}

document.body.appendChild(fragment);//最后一次提交
}

本文固定链接: http://www.web92.net/341.html | WEB前端开发

该日志由 于2012年06月07日发表在 JavaScript 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 前端性能优化:写出高性能的JavaScript | WEB前端开发
关键字: