前端性能指标和优化目标

profiling就是性能分析的意思

在性能评测中往往不要勾选Disabled cache，因为我们也要关心用户第二次访问页面时缓存有没有生效，这些缓存会帮助用户再次访问页面时提高访问的速度。

Throttling网络吞吐

自定义调整网络状态，模拟用户网络的情况，比如模拟4G，4G下载的速率大概在5M到12M左右，上传的速度大概在2M到5M。

加载瀑布图

资源首先经过排队才能从浏览器发出去，浏览器会对资源请求进行优先级的安排，它会把高优先级的资源先进行请求；
每个资源会有一个域名，这个域名会被转换成IP找到最终的服务器，就是进行DNS查找的过程，找到资源之后，客户端会和服务器建立连接，就是TCP建立连接的过程；
有的网站是https的，也就是说为了保证安全性，使用了SSL证书，SSL证书的工作原理是要进行安全性的验证，这个过程是SSL协商，这个过程也会耗时；
之后才是真正的把请求发送出去，但是从发送出去请求到资源回来中间还要等待一段时间，这就是TTFB，它就是从请求发出到请求资源回来到底要经历多久，这个参数比较重要，网站到底是快还是慢很大程度上由TTFB决定，TTFB高的话我的请求发送出去了但是资源一直没有回来，那浏览器这边就会是白屏，用户就会感觉网站很慢，如果很快的话，资源回来后就会马上进行解析和渲染以及后面的步骤。影响TTFB的重要因素就是后台的处理能力以及服务器响应的快慢程度，我的请求到了后台之后后台可能要查询数据库，可能要对数据进行组织和处理然后才能把数据返回回来，所以TTFB最主要反应了后台的处理能力，其次是资源回路也就是网络的情况；
最后才是资源的下载，蓝条越长代表资源越大，下载的时间就越长，如果过长可能会造成阻塞，当前资源如果一直在下载，后面的资源就无法加载只能等它完了之后才能再继续。

Lighthouse

Lighthouse是谷歌集成到chrome里面的性能测试工具。
人眼能接受的比较流程的动画帧数是60帧/s，低于60就会觉得动画卡顿。打开chrome 开发调试工具—>快捷键 ctrl+shift+p 然后输入frame来查看动画帧率FPS。

RAIL

RAIL是谷歌提出来的量化测量性能优化的模型，RAIL其实是缩写：

• Response（响应）：处理事件应在50ms以内完成，这里的response是指网站给用户响应的体验时间而不是代码中的response。
• Animation（动画）：每10ms产生一帧。动画只有达到60fps(60帧/秒)才能给人流畅的感觉，一帧就有1000ms/60fps = 16.6666666ms，但是浏览器绘制一帧也需要消耗时间，大概就是6ms左右，这样一帧的动画就是10ms左右。
• Idle（空闲）：让浏览器有足够的空闲，尽可能增加空闲时间，不能让主线程始终处于繁忙的状态，不然浏览器会没有足够的空闲去处理用户另外的交互。比如一些业务逻辑计算放在前端来做这是不合理的，像大量业务相关和运算相关的应该放在后台来做。
• Load（加载）：在5s内完成内容加载并可以交互。

性能测量工具

Chrome DevTools开发调试、性能评估

Size中列出了两个大小，上面代表当前资源通过网络过来总的实际的大小，下面的是资源本身的大小。网络资源传输的大小可以和资源本身的大小不相同，后来将资源返回给前端之前可以对资源进行压缩，在网络传输过程中资源会变小，通过这种方式可以减小网络上的消耗。

performce分析工具中的Main主线程是一个自上而下类似堆栈的结构序列的，它把整个调用关系都罗列了出来。
这里的task中会有分析脚本，脚本中有层层的调用关系，一直到最后，也就是序列中的底部往往是我们自己写的代码部分，序列上面部分大部分是框架本身的代码。
Timings中能看到关键的时间节点。
通过performance能够很好的定位出导致长任务或者阻塞的任务所发生的原因和具体代码位置。

Lighthouse网站整体质量评估

Lighthouse不仅能帮我们生成完整的性能评估报告，还能提供很多有针对性的优化建议。

lighthouse有多种使用方式，可以通过npm install -g lighthouse全局安装。
输入lighthouse http://bilibili.com，这里来测试哔哩哔哩网站。

根据评估结果和评估建议测试相关的js是否是首次加载中必须的。
快捷键 ctrl+shift+p调出命令窗口，输入block:

添加规则来指定哪些资源不加载：

WebPageTest多测试地点、全面性能报告