1. 背景
性能优化是前端开发一个十分重要的组成部分，如何更好地进行网络传输，如何优化浏览器渲染过程，来定位我的项目中存在的问题。Chrome DevTools 给咱们提供了 2 种罕用形式 Audits 和 Performance，Audits 能够对页面进行性能评分，同时，还会给咱们提供一些优化倡议。而 Performance 提供了十分多的运行时数据，能让咱们看到更多细节数据。上面次要介绍一下如何应用 DevTools 中的 Performance 来进行性能剖析
2.Performance 介绍
首先在新的无痕窗口关上网页，关上 Chrome DevTools 切换到 Performance 下能够看到以下画面
上图 1、3 区域按钮能够用来触发性能数据记录，彩色按钮能够记录交互阶段的性能数据，圆形箭头按钮用来记录加载阶段的性能数据。
上图 2 区域 能够设置以后页面的网络加载速度与 cpu 运算速度。
上面咱们点击彩色按钮来生成一份交互阶段的性能报告
第一局部：概览
这里最次要是整体的界面渲染的时候，每个时间段执行的事件程序，通过上图咱们就能晓得咱们每个时间段（准确到毫秒）都做了什么，当鼠标放上去的时候，咱们还能够大图的模式去查看咱们每个时间段界面的渲染状况，Performance 就会将几个要害指标，诸如页面帧速 (FPS)、CPU 资源耗费、网络申请流量、V8 内存使用量 (堆内存) 等，依照工夫程序做成图表的模式展示进去。
第二局部：性能面板
性能面板次要包含以下几局部
1.Network 这里咱们能够直观的看到资源加载的程序与时长
2.Interactions 用来记录用户交互操作，比方点击鼠标、输出文字、动画等
3.Timings 用来记录一些要害的工夫节点在何时产生的数据信息，诸如 FP、FCP、LCP 等
4.Main 是 Performance 工具中比拟重要的局部，记录了渲染过程中主线程的执行记录，点击 main 能够看到某个工作执行的具体情况
5.Compositor 合成线程的执行记录，用来记录 html 绘制阶段 (Paint)完结后的图层合成操作
6.Raster 光栅化线程池，用来让 GPU 执行光栅化的工作
7.GPU GPU 过程主线程的执行过程记录，如 能够直观看到何时启动 GPU 减速…
Memory 选项，在勾选后，就会显示该折线图，通过该图能够看出咱们在不同的时间段的执行状况。咱们能够看到页面中的内存应用的状况，比方 JS Heap(堆)，如果曲线始终在增长，则阐明存在内存泄露，如果相当长的一段时间，内存曲线都是没有降落的，这里是有产生内存泄露的可能的。
通过对性能面板各个局部的剖析与问题定位，能够更粗浅的了解浏览器是如何工作的
第三局部：Summary（性能摘要）
它是一个用来统计在咱们检测性能的工夫范畴内，都做了哪些事件：
Loading：加载工夫
Scripting：js 计算工夫
Rendering：渲染工夫
Painting：绘制工夫
Other：其余工夫
Idle：浏览器闲置工夫
3.Performance 实际
上面举例来说明一下性能面板的应用，在无痕窗口下点击主动重启页面，并记录整个页面加载的过程，而后来剖析后果～
网络 && 白屏
性能面板，有很多很多的参数，咱们要看一些比拟常见的。首先看白屏工夫和网络加载状况，如下图
上图，咱们能够看几点信息：
本次页面加载的白屏工夫约为 150 ms
从网络资源加载状况来看，图片没有启用 http2，因而每次能够同时加载的图片数无限，未被加载的图片有期待过程
资源的加载工夫也能够看到
另外，咱们能够看一下资源加载有没有空白期，尽管上图没有，然而如果资源加载之间存在空白期，阐明没有充分利用资源加载的闲暇工夫，能够调整一下。
火焰图
火焰图，次要在 Main 面板中，是咱们剖析具体函数耗时最常看的面板，咱们来看一下，如图：
首先，面板中会有很多的 Task，如果是耗时长的 Task，其右上角会标红，这个时候，咱们能够选中标红的 Task，而后放大，看其具体的耗时点。
放大后，这里能够看到都在做哪些操作，哪些函数耗时了多少, 这里代码有压缩，看到的是压缩后的函数名。而后咱们点击一下某个函数，在面板最上面，就会呈现代码的信息，是哪个函数，耗时多少，在哪个文件上的第几行等。这样咱们就很不便地定位到耗时函数了。
同时也能够查看 Main 指标剖析代码外面是否存在强制同步布局等操作，剖析进去这些起因之后，咱们能够有针对性地去优化咱们的程序
工夫线 && 内存状况
在 Timings 的区域，咱们能够看到本次加载的一些要害工夫，别离有：
FCP: First Contentful Paint
LCP: Largest Contentful Paint
FMP: First Meaningful Paint
DCL: DOMContentLoaded Event
L: Onload Event
咱们能够选区(抉择从白屏到有内容的区域，代表本次的页面加载过程)，能够对照着看一下下面的工夫，截图如下：
另外，咱们能够看到页面中的内存应用的状况，比方 JS Heap(堆)，如果曲线始终在增长，则阐明存在内存泄露。如果 Nodes 和 Listeners 一直减少阐明可能存在反复增加节点或者事件的状况。
最下方就是页面的一个整体耗时详情，如果 Scripting 工夫过长，则阐明 js 执行的逻辑太多，能够思考优化 js，如果渲染工夫过长，则思考优化渲染过程，如果闲暇工夫过多，则能够思考充分利用起来，比方把一些上报操作放到页面闲暇工夫再上报等。
4. 最初
大家能够本人去尝试一下 performance 的应用，通过 performance 能够更直观的了解浏览器的渲染原理与工作流程，同时也可能将浏览器的零碎架构、音讯循环机制、渲染流水线等前端概念分割到一起，加深了解。
作者简介
李长江为好将来前端开发高级专家
招聘信息
好将来技术团队正在热招前端、算法、流媒体后盾开发等各个方向高级开发工程师岗位，大家可扫描下方二维码或者微信搜寻关注“好将来技术 ”，点击本公众号“ 技术招聘”栏目理解详情，欢送感兴趣的搭档退出咱们！
兴许你还想看
DStack– 基于 flutter 的混合开发框架
WebRTC 源码剖析——视频流水线建设（上）
“ 考试 ” 背地的迷信：教育测量中的实践与模型（IRT 篇）