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

主要有4方面:(对照下图)
1.控制按钮。
2.overview。页面性能的高级汇总(FPS:帧率,CPU:CPU占用,NET:网络请求)
3.火焰图。CPU堆叠追踪的可视化(左侧名称是主线程的各种事件,Network:网络请求详细情况)
4.数据统计。以图表的形式汇总数据(summary:统计报表,Bottom-Up:事件时长顺序,Call Tree:事件调用顺序,Event log:事件发生的先后顺序)

颜色表示:HTML 文件为蓝色,脚本为黄色,样式表为紫色,媒体文件为绿色,其他资源为灰色

Chrome开发者工具中的performance检测页面性能_第1张图片

做录制:
打开想要查看的页面,刷新页面,打开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://www.cnblogs.com/xiaohuochai/p/9182710.html

你可能感兴趣的:(js)