Chrome开发者工具中的performance检测页面性能

主要有4方面：（对照下图）
1.控制按钮。
2.overview。页面性能的高级汇总（FPS:帧率，CPU:CPU占用，NET:网络请求）
3.火焰图。CPU堆叠追踪的可视化（左侧名称是主线程的各种事件，Network:网络请求详细情况）
4.数据统计。以图表的形式汇总数据（summary:统计报表，Bottom-Up:事件时长顺序，Call Tree:事件调用顺序，Event log:事件发生的先后顺序）
颜色表示：HTML 文件为蓝色，脚本为黄色，样式表为紫色，媒体文件为绿色，其他资源为灰色

做录制：
打开想要查看的页面，刷新页面，打开performance面板，点击Record按钮（当前面板左上角），开始录制，recode按钮变为红色，执行页面交互，再次点击Record停止录制。完成录制后，开发者工具会猜测哪一部分记录最相关，并自动缩放到那一部分
查看结果：
2.overview窗格包含以下3个图表：
a.FPS。每秒帧数。绿色竖线越高，FPS越高。FPS图表上的红色块表示长时间帧，很可能会出现卡顿。
b.CPU。CPU资源。此面积图指示消耗 CPU 资源的事件类型
c.NET。每条彩色横杠表示一种资源。横杠越长，检索资源所需的时间越长。 每个横杠的浅色部分表示等待时间（从请求资源到第一个字节下载完成的时间）
鼠标可以点击或拖动选取某一部分，火焰图自动匹配到相同部分，可以用 W(放大)、S(缩小)、A(左移)、和 D(右移) 键调整选择。
3.火焰图
在火焰图上看到一到三条垂直的虚线。
蓝线:：DOMContentLoaded 事件。
绿线：首次绘制的时间。
红线： load 事件在火焰图中选择事件时，数据统计窗格会显示与事件相关的其他信息
诊断：
js:
javaScript 计算，特别是会触发大量视觉变化的计算会降低应用性能。 不要让时机不当或长时间运行的 JavaScript 影响用户交互下面是一些常见 JavaScript 问题
　　1、大开销输入处理程序影响响应或动画
         让浏览器尽可能晚地处理触摸和滚动，或者绑定侦听
　　2、时机不当的 JavaScript 影响响应、动画、加载
        使用 requestAnimationFrame、使 DOM 操作遍布各个帧、使用网络工作线程
　　3、长时间运行的 JavaScript 影响响应
　　 将纯粹的计算工作转移到web worker中。如果需要 DOM 访问权限，配合使用requestAnimationFrame
样式：

 

样式更改开销较大，在这些更改会影响 DOM 中的多个元素时更是如此。 只要将样式应用到元素，浏览器就必须确定对所有相关元素的影响、重新计算布局并重新绘制
点击 Recalculate Style 事件（以紫色显示）可以在 Details 窗格中查看更多相关信息。 如果样式更改需要较长时间，对性能的影响会非常大。 如果样式计算会影响大量元素，则需要改进另一个方面

要降低 Recalculate Style 事件的影响，使用一些对渲染性能的影响较小的属性。如使用 transform 和 opacity 属性更改来实现动画，使用 will-change 或 translateZ 提升移动的元素

　　下面是一些常见的CSS问题
　　1、大开销样式计算影响响应或动画
　　任何会更改元素几何形状的 CSS 属性，如宽度、高度或位置；浏览器必须检查所有其他元素并重做布局。避免会触发重排的CSS属性
　　2、复杂的选择器影响响应或动画
　　嵌套选择器强制浏览器了解与所有其他元素有关的全部内容，包括父级和子级。尽量在CSS中引用只有一个类的元素

重排
　　布局（或重排）是浏览器用来计算页面上所有元素的位置和大小的过程。 网页的布局模式意味着一个元素可能影响其他元素；例如body元素的宽度一般会影响其子元素的宽度以及树中各处的节点等等。这个过程对于浏览器来说可能很复杂。 一般的经验法则是，如果在帧完成前从 DOM 请求返回几何值，将发现会出现“强制同步布局”，在频繁地重复或针对较大的 DOM 树执行操作时这会成为性能的大瓶颈。
　　performance面板可以确定页面何时会导致强制同步布局。 这些 Layout 事件使用红色竖线标记
“布局抖动”是指反复出现强制同步布局情况。 这种情况会在 JavaScript 从 DOM 反复地写入和读取时出现，将会强制浏览器反复重新计算布局

重绘
　　绘制是填充像素的过程。这经常是渲染流程开销最大的部分。 如果在任何情况下注意到页面出现卡顿现象，很有可能存在绘制问题。
　　合成是将页面的已绘制部分放在一起以在屏幕上显示的过程。 大多数情况下，如果坚持仅合成器属性并避免一起绘制，性能会有极大的改进，但是需要留意过多的层计数

 

 

转载自：https://blog.csdn.net/kongduxue/article/details/82017491