游客
标题:分析影响网页性能的2个关键地方Reflow和Repaint
正文:
Yahoo!性能工程师Nicole Sullivan写了一篇非常值得一读的分析Reflow和Repaint的文章。repaint(重绘)是在一个元素的外观被改变，但没有改变布局的情况下发生，如改变visibility、outline、前景色。“According to Opera , repaint is expensive because the browser must verify the visibility of all other nodes in the DOM tree.”当repaint发生时，浏览器会验证DOM树上的所有其它结点的visibility属性。reflow(回流)是导致DOM脚本执行低效的关键因素之一。页面上任何一个结点触发reflow，都会导致它的子结点及祖先结点重新渲染。Nicole举了个例子：<body>
<div class=”error”>
<h4>My Module</h4>
<p><strong>Error:</strong>Description of the error…</p>
<h5>Corrective action required:</h5>
<ol>
<li>Step one</li>
<li>Step two</li>
</ol>
</div>
</body>当p结点上发生reflow，div.error和body也会重新渲染，甚至h5和ol也会受到影响。Nicole总结了在哪些情况下会导致reflow发生：改变窗囗大小改变文字大小添加/删除样式表内容的改变，如用户在输入框中敲字(这样也会-_-||)激活伪类，如:hover (IE里是一个兄弟结点的伪类被激活)操作class属性脚本操作DOM计算offsetWidth和offsetHeight设置style属性reflow是不可避免的，只能将reflow对性能的影响减到最小。Nicole提出6点建议：Change classes on the
[<<][[1]][2][>>]
查看评论(0)
发表评论
首页