首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

Web页面Repaint跟Reflow

2013-03-17 
Web页面Repaint和Reflow1. Repaintrepaint(重绘)是在一个元素的外观被改变,但没有改变布局的情况下发生,如

Web页面Repaint和Reflow
1. Repaint

repaint(重绘)是在一个元素的外观被改变,但没有改变布局的情况下发生,如改变visibility、outline、前景色。当repaint发生时,浏览器会验证DOM树上的所有其它结点的visibility属性。

2. Reflow

如果变化涉及元素布局 (如 width), 浏览器则抛弃原有属性, 重新计算并把结果传递给 render 以重新描绘页面元素, 此过程称为 reflow。reflow(回流)是导致DOM脚本执行低效的关键因素之一。页面上任何一个结点触发reflow,都会导致它的子结点及祖先结点重新渲染。

以下操作会引起reflow:

改变窗囗大小 改变文字大小 添加/删除样式表 内容的改变,如用户在输入框中敲字 激活伪类,如:hover 操作class属性 脚本操作DOM 计算offsetWidth和offsetHeight 设置style属性

Reflow是不可避免的,只能将reflow对性能的影响减小到最小,以下是一些建议:

尽可能限制reflow的影响范围。有时 reflow 页面中的一个元素会 reflow 它的父元素(译注:这里是复数)以及所有子元素。 通过设置style属性改变结点样式的话,每设置一次都会导致一次reflow。所以最好通过设置class的方式。 实现元素的动画,它的position属性应当设为fixed或absolute,这样不会影响其它元素的布局。 权衡速度的平滑。比如实现一个动画,以1个像素为单位移动这样最平滑,但reflow就会过于频繁,CPU很快就会被完全占用。如果以3个像素为单位移动就会好很多。不要用tables布局的另一个原因就是tables中某个元素一旦触发reflow就会导致table里所有的其它元素reflow。在适合用table的场合,可以设置table-layout为auto或fixed,这样可以让table一行一行的渲染,这种做法也是为了限制reflow的影响范围。很多情况下都会触发reflow,如果css里有expression,每次都会重新计算一遍。 避免在document上直接进行频繁的DOM操作,如果确实需要可以采用off-document的方式进行先将元素从document中删除,完成修改后再把元素放回原来的位置 将元素的display设置为”none”,完成修改后再把display修改为原来的值 如果需要创建多个DOM节点,可以使用DocumentFragment创建完后一次性的加入 参考文档Minimizing browser reflowRendering: repaint, reflow/relayout, restyle页面重构应注意的repaint和reflow

如需转载,请注明来自: BorisHuai前端修炼 > Repaint and Reflow

热点排行