这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战
本篇介绍 chrome 中的 Rendering 面板
打开方式
在 chrome 中打开 devtools 后，按 esc 可唤起另一个面板。若面板中不存在 Rendering，可以按最左侧的「更多」按钮点击展示。
页面闪烁
唤起 Rendering 面板后，可以勾选 Paint flashing 我们可以看到页面的闪烁情况。以掘金首页第一个图片增加 1px solid red 为例，查看页面闪烁情况。
我们可以通过这个工具来查看页面中哪些地方闪烁比较厉害，因为页面闪烁是由于页面重新渲染引起的。如果闪烁比较厉害，则说明性能优化时，可以优化这部分内容。在渲染过程中最耗时的两个步骤为重排（Reflow）与重绘（Repaint）。
如果在操作 DOM 时涉及到元素、样式的修改，就会引起渲染引擎重新计算样式生成 CSSOM 树，同时还有可能触发对元素的重新排布（简称“重排”）和重新绘制（简称“重绘”）。
可能会影响到其他元素排布的操作就会引起重排，继而引发重绘，比如：
- 修改元素边距、大小
- 添加、删除元素
- 改变窗口大小
与之相反的操作则只会引起重绘，比如：
- 设置背景图片
- 修改字体颜色
- 改变 visibility 属性值
如果想了解更多关于重绘和重排的样式属性，可以参看这个网址：csstriggers.com/。
下面是两段验证代码，我们通过 Chrome 提供的性能分析工具来对渲染耗时进行分析。
第一段代码，通过修改 div 元素的边距来触发重排，渲染耗时（粗略地认为渲染耗时为紫色 Rendering 事件和绿色 Painting 事件耗时之和）2547 毫秒。
const times = 100000
let html = ''
for(let i=0;i<times;i++) {
html+= `<div>${i}</div>`
}
document.body.innerHTML += html
const divs = document.querySelectorAll('div')
Array.prototype.forEach.call(divs, (div, i) => {
div.style.margin = i % 2 ? '10px' : 0;
})
第二段代码，修改 div 元素字体颜色来触发重绘，得到渲染耗时 2202 ms。
const times = 100000
let html = ''
for(let i=0;i<times;i++) {
html+= `<div>${i}</div>`
}
document.body.innerHTML += html
const divs = document.querySelectorAll('div')
Array.prototype.forEach.call(divs, (div, i) => {
div.style.color = i % 2 ? 'red' : 'green';
})
从两段测试代码中可以看出，重排渲染耗时明显高于重绘，同时两者的 Painting 事件耗时接近，也印证了重排会导致重绘。
页面加载帧率
唤起 Rendering 面板后，可以勾选 Frame Rendering Stats 我们可以看到页面滚动时的帧率情况。以掘金主页为例，查看页面滚动时的帧率变化。
最后说一句
如果这篇文章对您有所帮助，或者有所启发的话，帮忙关注一下，您的支持是我坚持写作最大的动力，多谢支持。
