【ChromeDevTool】Performace的简单使用

⭐️ 本文首发自 前端修罗场(点击即可加入社区)，一个专注 Web 技术、答疑解惑、面试辅导、职业发展的社区。

说到Chrome DevTool，你是不是和我一样，经常在Element，Console,NetWrok...里梭哈 再梭哈

为什么要使用Performance

Performance 作为Web性能监控的工具，能帮助开发者发现性能低效的源头。特别是在页面上渲染动画的时候，Performance可是一把利刃。

So，要知道Web的性能状况，需要先知道页面是怎么渲染出来滴！

浏览器渲染流程

1. 使用 HTTP 协议或者 HTTPS 协议，向服务端请求页面

2. 浏览器解析 HTML 代码，构建成 DOM 树

3. 计算 DOM 树上的 CSS 属性

4. 根据 CSS 属性对元素逐个进行渲染，以位图形式存储至内存中

5. 对位图进行合成，增加后续绘制的速度（Composition）

6. 合成之后，再绘制到页面上

再用一张图来理解：

有了上面的渲染流程，我们大概知道该从哪个步骤下手优化页面性能（就是4、5、6步骤）。这也是Performance要做的。

接下来，我们以一个动画为例子，讲解为什么css3中加了transform等属性，能提升动画的渲染性能。

案例：动画

打开这个动画链接，然后点击Performance -> recode button进行记录一段时间，有如下画面：

其中，有颜色的部分：

• 土黄色：表示Javascript
• 紫色：表示Style、Layout
• 绿色：Paint、Composite

哪个部分占用的多，表示那个部分的某帧在渲染时需要花费较多花销。

其实，动画的渲染流程也类似：

1. Javascript
2. Style
3. Layout
4. Paint
5. Componsite

浏览器如何优化

为了能让动画渲染每一帧的时间保持在较好的时间内（16.6667ms = 1 / 60fps），当浏览器对DOM的CSS属性进行计算时，如果扫描到该DOM节点的Style上包含transform等样式属性，会将这个DOM提出来，作为合成层。（
❤️ 现在关注【前端修罗场】，后台回复【666】，即可获取一份【免费的优质学习资料】,一起学习，一起进步~）

所谓：合成层是指：

某些特殊的渲染层会被认为是合成层（Compositing Layers），合成层拥有单独的 GraphicsLayer，而其他不是合成层的渲染层，则和其第一个拥有 GraphicsLayer 父层公用一个

通常情况下，每个DOM节点会拥有一个Render Object，每个Render Object 知道如何绘制一个节点的内容， 他通过向一个绘图上下文（GraphicsContext）发出必要的绘制调用来绘制节点。每个 GraphicsLayer 都有一个 GraphicsContext，GraphicsContext 会负责输出该层的位图，位图是存储在共享内存中，作为纹理上传到 GPU 中，最后由 GPU 将多个位图进行合成，然后 draw 到屏幕上。

通过Chrome Dev tool ---> Layer，我们也可以看到相关的层，并标注了细节。

由此可见，通过分析浏览器的渲染流程，进一步探索渲染细节，能帮助开发者感知需要改善的部分。

与Chrome DevTool 相关的文章：

• ChromeDevTool高级调式
• https://www.jianshu.com/p/ed219471b393?utm_campaign=hugo&utm_medium=reader_share&utm_content=note&utm_source=weixin-friends