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

2023-04-09 17:11:25 浏览数 (2)

页面的绘制时间（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属性，修改样式表，修改文档内容，修改元素计算样式

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

代码语言：javascript复制
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……

但是，我按了没有 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

chrome css

0 人点赞