chrome 对页面重绘和回流以及优化进行优化

页面的绘制时间（paint time）是每一个前端开发都需要关注的的重要指标，它决定了你的页面流畅程度。而如何去观察页面的绘制时间，找到性能瓶颈，可以借助 Chrome 的开发者工具。

回流与重绘

1. 当 render tree 中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。

2. 当 render tree 中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如 background-color。则就叫称为重绘。

注意：回流必将引起重绘，而重绘不一定会引起回流。

回流何时发生：

当页面布局和几何属性改变时就需要回流。下述情况会发生浏览器回流：

1. 页面渲染初始化；

2. 调整窗口大小（Resizing the window），浏览器窗口尺寸改变——resize 事件发生时

3. 增加或者移除样式表（Adding or removing a stylesheet）

4. 元素位置改变、元素尺寸改变——width/height/padding/border/margin

5. 内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；

6. 改变字体（Changing the font）

7. 激活 CSS 伪类，比如 :hover (IE 中为兄弟结点伪类的激活)（Activation of CSS pseudo classes such as :hover (in IE the activation of the pseudo class of a sibling)）

8. 操作 class 属性（Manipulating the class attribute）

9. 脚本操作 DOM（A script manipulating the DOM），添加或者删除可见的 DOM 元素；

10. 计算 offsetWidth 和 offsetHeight 属性（Calculating offsetWidth and offsetHeight）

11. 设置 style 属性的值 （Setting a property of the style attribute）

这么多，分类整理记忆下：

js 请求以下 style 信息时，触发回流(浏览器会立刻清空队列：)

• clientWidth、clientHeight、clientTop、clientLeft

• offsetWidth、offsetHeight、offsetTop、offsetLeft

• scrollWidth、scrollHeight、scrollTop、scrollLeft

• width、height

• getComputedStyle()

• getBoundingClientRect()

css 中如下属性，触发回流

• width/height/padding/border/margin

• font/line-height/font-weight/

• postion/display/float/clear/

js 操作 DOM，修改 class 属性，修改样式表，修改文档内容，修改元素计算样式

让我们看看下面的代码是如何影响回流和重绘的:

ar s = document.body.style;s.padding = "2px"; // 回流+重绘s.border = "1px solid red"; // 再一次 回流+重绘s.color = "blue"; // 再一次重绘s.backgroundColor = "#ccc"; // 再一次 重绘s.fontSize = "14px"; // 再一次 回流+重绘// 添加node，再一次 回流+重绘document.body.appendChild(document.createTextNode('abc!'));

然而这些都是意淫：那么

怎么监控重绘回流

chorme 按下：f12，然后按下 esc……

20160506120224113.png

但是，我按了没有 readering

那是你没有勾选啊，console 旁边有三点是不是，点击，然后勾选，rendering……

以上 5 个选项的意思如下：

1. Show paint rectangles 显示绘制矩形

2. Show composited layer borders 显示层的组合边界（注：蓝色的栅格表示的是分块）

3. Show FPS meter 显示 FPS 帧频

4. Enable continuous page repainting 开启持续绘制模式 并 检测页面绘制时间

5. Show potential scroll bottlenecks 显示潜在的滚动瓶颈。

优化重绘回流

CSS

• 避免使用 table 布局。

• 尽可能在 DOM 树的最末端改变 class。

• 避免设置多层内联样式。

• 将动画效果应用到 position 属性为 absolute 或 fixed 的元素上。

• 避免使用 CSS 表达式（例如：calc()）。

JavaScript

• 避免频繁操作样式，最好一次性重写 style 属性，或者将样式列表定义为 class 并一次性更改 class 属性。

• 避免频繁操作 DOM，创建一个 documentFragment，在它上面应用所有 DOM 操作，最后再把它添加到文档中。

• 也可以先为元素设置 display: none，操作结束后再把它显示出来。因为在 display 属性为 none 的元素上进行的 DOM 操作不会引发回流和重绘。

• 避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。

• 对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。基本原则就是，把动画元素用 position:absolute 踢出文档流，这样 R&R 就限制在了 absolute 元素的子节点。告诉浏览器，我这块结构跟其他的单独渲染，不要搅和全页面了。

参看文章：

回流与重绘：CSS性能让JavaScript变慢？

转载本站文章《chrome对页面重绘和回流以及优化进行优化》,请注明出处：https://www.zhoulujun.cn/html/webfront/browser/webkit/2016_0506_7820.html