性能优化篇 - Performance（工具 & api）
「~Performance性能优化 ~」
Performance 一个在前端开发领域中，无法被忽视的存在，如果我们的开发是一个满足需求就可以的产品，那么可能就用不到它；但是如果我们想对我们的这个产品，做一个极致的优化，那么 Performance 是一个很好的选择，也是一个不容忽视的选择。
简短的概括：
1、Performance 工具使用
2、浏览器渲染过程
3、Performance API
正文从这里开始~~~
一、Performance 工具
performance 的前世就是之前的 timeline（好吧，我错过了这个时代） 如果你真的找不到的话，可以检查下浏览器的版本，说不定是版本的问题，我的是最新的，所以肯定没有问题。
Chrome 57 之前叫作「Timeline」，而现在换了个更长的马甲 —— 「Performance」
1、在 Chrome 中，我们打开 Chrome 调试面板，进入 performance 界面。
第二步：screenshots 是对你的屏幕进行截图，后面会生成相关的比较直观的截图。
第四步：模拟 CPU 速度，更加方便你重现问题，如果 4x slowdown 不行，你可以选择 6x slowdown。
2、我们可以看到左上侧的位置有几个重要按钮，其作用如下：
3、完成之后就会出现以下的界面，这里都是我们应该重点关注的内容。
先来看看有哪些部分：
第一部分：controls，上面已介绍
第二部分：重要参数，这一部分我们称之为 Overview 窗格，我们可以看到 FPS， CPU， NET在页面加载时候的变化。
1）FPS：每秒帧数，绿色竖线越高， FPS 越高，我们应该关注红色部分，这说明我们的页面很可能出现卡顿现象，另外 60 是一个比较理想的值。
2）CPU: CPU 资源。
3）NET: 每条彩色横杆代表一种资源，横杆越长，检索资源所需要的越长。
第三部分：火焰图
1）横轴表示加载的时间。
2）纵轴表示事件（线程）的执行顺序，先是上面的执行再到下面的，我们要特别注意红色的三角部分。
第四部分：Summary 部分，可以看到 CPU 中中的资源分配，比如下图中的 Rendering（渲染）占比就很大。
3、使用小提示：第二、三、四部分都是联动的，比如你选择火焰图中的某个部分，下面的 Summary 就会显示这个部分的总结
4、使用 Performance 定位性能问题
上面简单介绍了一下 Performance，在我们得到数据之后，怎么分析？
具体的步骤如下：
二、浏览器渲染过程
知晓浏览器的渲染过程对我们理解分析十分重要，这里简要介绍一下浏览器渲染的过程：
当渲染首屏时浏览器分别解析 HTML 与 CSS 文件，生成文档对象模型（DOM）与 CSS 对象模型（CSSOM）；合并 DOM 与 CSSOM 成为渲染树（Render Tree）；计算样式（ Style）；计算每个节点在屏幕中的精确位置与大小（Layout）；将渲染树按照上一步计算出的位置绘制到图层上（Paint）；渲染引擎合成所有图层最终人眼可见（Composite Layers）。
三、Performance API
performance 是前端性能监控的API，可以检测到网页渲染白屏时间、首屏时间、用户可操作的各时间节点，页面总下载的时间、DNS查询的时间、TCP链接的时间等等等。
帮你做更精准的埋点测试，监控前端网页的性能问题。
MDN文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Performance
1）常用的API 方法
1. performance.now()方法
performance.now()返回performance.navigationStart至当前的毫秒数。performance.navigationStart是下文将介绍到的可以说是浏览器访问最初的时间测量点。
值得注意的两点：
测量初始点是浏览器访问最初测量点，或者理解为在地址栏输入URL后按回车的那一瞬间。
返回值是毫秒数，但带有精准的多位小数。
用performance.now()检测for循环的执行时间(毫秒)
var st = performance.now(); for (var o = 0; o < 10000; o ++) console.log(o) var end = performance.now();
console.log(`for时间${end - st}`); // for时间1155.99500003736472. performance.navigation属性
performance.navigation负责纪录用户行为信息，只有两个属性。
console.log(performance.navigation);// PerformanceNavigation {type: 1, redirectCount: 0}1）type：表示网页的加载来源，可能有4种情况
0：网页通过点击链接、地址栏输入、表单提交、脚本操作等方式加载，相当于常数
1：网页通过“重新加载”按钮或者location.reload()方法加载
2：网页通过“前进”或“后退”按钮加载
255：任何其他来源的加载
2）redirectCount：表示当前网页经过了多少次重定向跳转。
3、performance.getEntries()
包含了所有静态资源的数组列表
获取一组当前页面已经加载的资源PerformanceEntry对象。接收一个可选的参数options进行过滤，options支持的属性有name，entryType，initiatorType。
4、performance.mark()
自定义添加标记的时间, 方便我们计算程序的运行耗时。
5、performance.getEntriesByType()
PerformanceEntry 对象的列表，基于给定的 entry type
6、performance.clearMeasures()
从浏览器的性能输入缓冲区中移除自定义添加的 measure
7、performance.getEntriesByName()
PerformanceEntry 对象的列表，基于给定的 name 和 entry type。
8、performance.toJSON()
JSON 格式转化器，返回 Performance 对象的 JSON 对象。
2、计算公式
1）重定向耗时 :
redirectEnd - redirectStart
2）DNS查询耗时：
domainLookupEnd - domainLookupStart
3）TCP链接耗时：
connectEnd - connectStart
4）HTTP请求耗时：
responseEnd - responseStart
5）解析dom树耗时：
domComplete - domInteractive
6）白屏时间：
responseStart - navigationStart
7）DOMready时间：
domContentLoadedEventEnd - navigationStart
8）onload时间：
loadEventEnd - navigationStart
推荐热门技术文章：
8、让程序员变懒的 “vue-admin-template” 后台管理系统
觉得本文对你有帮助？请分享给更多人
关注「前端学苑」加星标，提升前端技能