前端性能优化-指标和工具

一、性能是Web网站和应用的支柱

优化主要体现在流量、搜索、转换率、用户体验。

据Amazon亚马逊的发现，每100ms延迟会导致1%的销量损失。

移动端用户更缺少耐心，大于3秒加载导致53%的跳出率。

 

二、性能优化的标准和指标

RAIL测量模型：

Response响应，这里是指网页给用户的响应，如页面首次绘制时间、可进行交互时间。

Animation动画，页面动画是否足够流畅

Idle空闲，主线程是否有足够的空闲时间让用户进行交互，有足够空闲时间Response才能及时响应

Load加载，页面加载时间

 

RAIL评估标准

响应：处理事件应在50ms以内完成，用户能够接受响应处理时间是100ms，但是程序真正能处理响应的时间是50ms，还有50ms是预留给其他任务处理。

动画：每10ms产生一帧。按60FPS来算，一秒钟要60帧，那一帧约等于16ms，其中6ms用于绘制计算，剩余10ms产生真正帧，这样动画才能够顺畅。

空闲：尽可能增加空闲时间。不可以让程序的处理时间过长，超过50ms的运算都是过长任务，因为按照响应时间来算超过50ms，那么空闲时间就少了，减少了给用户的响应速度。因此前端不应该进行复杂的业务逻辑运算，复杂的业务逻辑运算应该交给后端进行。

加载：在5s内完成内容加载并可以交互。这里的加载不仅仅是加载资源，还包含解析编译，最后能够让用户进行交互的时间。异步请求1秒内完成，如果异步超过一秒需增加交互动画，比如loading。

 

以上四个目标都是优化的终极目标，我们优化的目标就是不断往以上标准上靠近。

 

三、利用测量工具和APIs进行性能分析

以下三个是浏览器F12自带的测量工具

1、Network瀑布图：

纵向看资源加载关系，并行加载情况；

横向看当前资源加载过程，主要是TTFB是最影响页面体验的，TTFB是请求发送到开始返回请求结果的时间，包含服务器的处理能力和网络波动情况的时间。

2、Lighthouse，性能分析报告。会给你当前页面做性能分析并给出相应报告和优化建议。

First Contentful Paint，首次进行绘制时间，即用户从空白到可以看到内容的第一时间。

Speed Index，速度指数，谷歌标准是4秒以下是优秀。

以上两个是主要关注的指标。

3、Performance，该选项卡可以看到页面主线程的性能情况，是否有长任务导致空闲时间过少等等功能。

 

WebPageTest：模拟不同多地区地点测试、全面性能报告

 

window.performance对象所能提供的性能指标API计算公式：

DNS 解析耗时: domainLookupEnd - domainLookupStart
TCP 连接耗时: connectEnd - connectStart
SSL 安全连接耗时: connectEnd - secureConnectionStart
网络请求耗时 (TTFB): responseStart - requestStart
数据传输耗时: responseEnd - responseStart
DOM 解析耗时: domInteractive - responseEnd
资源加载耗时: loadEventStart - domContentLoadedEventEnd
First Byte时间: responseStart - domainLookupStart
白屏时间: responseEnd - fetchStart
首次可交互时间: domInteractive - fetchStart
DOM Ready 时间: domContentLoadEventEnd - fetchStart
页面完全加载时间: loadEventStart - fetchStart
http 头部大小： transferSize - encodedBodySize
重定向次数：performance.navigation.redirectCount
重定向耗时: redirectEnd - redirectStart