页面的回流(reflow)和重绘(repaintd)

1.首先需要了解的是页面渲染过程(如下图所示):

2.回流和重绘的概念:

回流:浏览器重新构建render tree的过程

重绘:浏览器根据render tree重新绘制界面的过程

3.引起回流的操作

当改变界面已有元素的位置,大小(width,height,border,padding,margin,content),或者新添加元素的时候,都会引起回流;每个页面至少有一次回流,也就是页面刚开始加载的时候

4.引起重绘的操作

  • 当页面发生回流
  • 当改变元素不影响布局的属性的的时候;如:颜色,

5.优化

浏览器实际上在会帮助我们做一些这方面的优化.它会维护一个队列,把所有引起回流,重绘的操作放入到这个队列,当到达一定的条件,浏览器就会对这个队列的所有操作进行一个批处理,这样就会让多次的回流,重绘变成一次回流重绘.

但是我们自身的操作有时候也会引起浏览器刷新整个队列.当要获取元素大小信息的时候,浏览器会为了提供最准确的值而去刷新队列

所以,我们自己能做的优化为:

  • 针对一个node,如果有多个大小相关的样式需要改变,则尽量通过添加类名,csssText拼接;(尽量批量改变,而避免单个改变)
  • a) 使用DocumentFragment进行缓存操作,引发一次回流和重绘;
    b) 使用display:none技术,只引发两次回流和重绘;
    c) 使用cloneNode(true or false) 和 replaceChild 技术,引发一次回流和重绘;
  • 尽量避免访问能够引起浏览器刷讯队列的属性,如果不能避免,则利用缓存
  • 让元素脱离动画流
阅读更多
个人分类: js
上一篇构造函数创建对象
下一篇Flex布局
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭