使用chrome开发者工具中的performance面板解决性能瓶颈

使用chrome开发者工具中的performance面板解决性能瓶颈

前面的话

　　使用Chrome DevTools的performance面板能够记录和分析页面在运行时的全部活动。本文将详细介绍如何使用performance面板解决性能瓶颈

准备

【匿名模式】

　　匿名模式能够保证Chrome在一个相对干净的环境下运行。好比安装了许多chrome插件，这些插件可能会影响咱们分析性能表现

　　使用快捷键ctrl + shift + N 便可代码匿名模式下的chrome新标签页

【移动设备CPU】

　　移动设备的CPU通常比台式机和笔记本弱不少。分析页面时，能够用CPU控制器（CPU Throttling）来模拟移动端设备CPU

　　在DevTools中，点击 Performance 的 tab。 确保 Screenshots checkbox 被选中；点击 Capture Settings（⚙️）按钮，DevTools会展现不少设置，来模拟各类情况；对于模拟CPU，选择4x slowdown，因而Devtools就开始模拟4倍低速CPU

概览

【组成】

　　performance面板有以下四个窗格：

　　一、controls。开始记录，中止记录和配置记录期间捕获的信息

　　二、overview。页面性能的高级汇总

　　三、火焰图。 CPU 堆叠追踪的可视化

　　四、统计汇总。以图表的形式汇总数据

【颜色表示】

HTML 文件为蓝色

脚本为黄色

样式表为紫色

媒体文件为绿色

其余资源为灰色

【作记录】

　　打开想要记录的页面，而后从新加载页面。 performance面板会自动记录页面从新加载。

要记录页面交互，打开 performance 面板，而后按Record按钮  或者键入键盘快捷键Cmd+E(Mac) 或Ctrl+E(Windows / Linux)，开始记录。记录时，Record按钮会变成红色。执行页面交互，而后按Record按钮或再次键入键盘快捷键中止记录

　　完成记录后，DevTools 会猜想哪一部分记录最相关，并自动缩放到那一个部分

查看

【Overview】

　　Overview窗格包含如下三个图表：

　　一、FPS。每秒帧数。绿色竖线越高，FPS 越高。 FPS 图表上的红色块表示长时间帧，极可能会出现卡顿

　　二、CPU。 CPU 资源。此面积图指示消耗 CPU 资源的事件类型

　　三、NET。每条彩色横杠表示一种资源。横杠越长，检索资源所需的时间越长。 每一个横杠的浅色部分表示等待时间（从请求资源到第一个字节下载完成的时间）

能够放大显示一部分记录，以便简化分析。使用Overview窗格能够放大显示一部分记录。 放大后，火焰图会自动缩放以匹配同一部分

选择部分后，可使用W、A、S和D键调整您的选择。W和S分别表明放大和缩小。A和D分别表明左移和右移

【火焰图】

在火焰图上看到一到三条垂直的虚线。蓝线表明DOMContentLoaded事件。 绿线表明首次绘制的时间。 红线表明load事件

在火焰图中选择事件时，Details窗格会显示与事件相关的其余信息

诊断

【JS】

　　JavaScript 计算，特别是会触发大量视觉变化的计算会下降应用性能。 不要让时机不当或长时间运行的 JavaScript 影响用户交互

　　下面是一些常见 JavaScript 问题

　　一、大开销输入处理程序影响响应或动画

　　让浏览器尽量晚地处理触摸和滚动，或者绑定侦听

　　二、时机不当的 JavaScript 影响响应、动画、加载

使用requestAnimationFrame、使 DOM 操做遍及各个帧、使用网络工做线程

　　三、长时间运行的 JavaScript 影响响应

将纯粹的计算工做转移到web worker中。若是须要 DOM 访问权限，配合使用requestAnimationFrame

【样式】

　　样式更改开销较大，在这些更改会影响 DOM 中的多个元素时更是如此。 只要将样式应用到元素，浏览器就必须肯定对全部相关元素的影响、从新计算布局并从新绘制

点击Recalculate Style事件（以紫色显示）能够在Details窗格中查看更多相关信息。 若是样式更改须要较长时间，对性能的影响会很是大。 若是样式计算会影响大量元素，则须要改进另外一个方面

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

　　下面是一些常见的CSS问题

　　一、大开销样式计算影响响应或动画

　　任何会更改元素几何形状的 CSS 属性，如宽度、高度或位置；浏览器必须检查全部其余元素并重作布局。避免会触发重排的CSS属性

　　二、复杂的选择器影响响应或动画

　　嵌套选择器强制浏览器了解与全部其余元素有关的所有内容，包括父级和子级。尽可能在CSS中引用只有一个类的元素

【重排】

布局（或重排）是浏览器用来计算页面上全部元素的位置和大小的过程。 网页的布局模式意味着一个元素可能影响其余元素；例如body元素的宽度通常会影响其子元素的宽度以及树中各处的节点等等。这个过程对于浏览器来讲可能很复杂。 通常的经验法则是，若是在帧完成前从 DOM 请求返回几何值，将发现会出现“强制同步布局”，在频繁地重复或针对较大的 DOM 树执行操做时这会成为性能的大瓶颈。

performance面板能够肯定页面什么时候会致使强制同步布局。 这些Layout事件使用红色竖线标记

　　“布局抖动”是指反复出现强制同步布局状况。 这种状况会在 JavaScript 从 DOM 反复地写入和读取时出现，将会强制浏览器反复从新计算布局

【重绘】

　　绘制是填充像素的过程。这常常是渲染流程开销最大的部分。 若是在任何状况下注意到页面出现卡顿现象，颇有可能存在绘制问题。

　　合成是将页面的已绘制部分放在一块儿以在屏幕上显示的过程。 大多数状况下，若是坚持仅合成器属性并避免一块儿绘制，性能会有极大的改进，可是须要留意过多的层计数

　　必定不要使用下面的代码

* {

  will-change: transform;

  transform: translateZ(0);

}

　　这是以迂回方式说想要提高页面上的每一个元素。此处的问题是建立的每一层都须要内存和管理，而这些并非免费的。事实上，在内存有限的设备上，对性能的影响可能远远超过建立层带来的任何好处。每一层的纹理都须要上传到 GPU，使 CPU 与 GPU 之间的带宽、GPU 上可用于纹理处理的内存都受到进一步限制

　　若是大部分渲染时间花费在绘制上，即表示存在绘制问题

　　下面是一些常见的绘制问题

　　一、绘制风暴影响响应或动画

　　较大的绘制区域或大开销绘制影响了响应或动画，要避免绘制、提高将要移动到自有层的元素，使用变形和不透明度

　　二、层数激增影响动画

　　使用 translateZ(0) 过分提高过多的元素会严重影响动画性能，要谨慎提高到层，而且仅在了解这样会有切实改进时才提高到层