前端性能优化

1 前端优化

说到前端优化，大部分人会回答减少合并资源、减少请求、数据缓存等优化手段；
部分人会说在DevTools下看看首屏时间，围绕首屏来优化；
少部分人会说，需要接入一个性能平台来看看现状，诊断一下；
极少数人会说从前端性能体系来系统考虑性能优化；

遇到什么性能问题？ =》 围绕什么样的性能指标 =》 采取了哪些性能优化？ =》 取得了什么样的结果？

比如有这样一个问题：
首页打开缓慢，可以通过性能监控平台直接判断当前性能数据有没有问题？是前端问题？后端问题？还是网络层？

性能优化：缓存请求、服务端响应优化、页面解析与处理、静态资源优化；

2 用例

用户进入列表页，在滑动过程中页面加载突然跳出一个弹窗；

3 性能指标

• 加载（进入页面，页面内容载入过程）
• 交互（是否回应及时）
  可以采用FID（First Input Delay，首次输入延迟）指标，指标必须尽量小于100ms；
  可以采用PSI（Perceptual Speed Index，视觉变化率，衡量标准是小于20%）
• 视觉稳定性指标（CLS，cumulative layout shift，布局偏移量，指页面从一帧切换到另一帧时，视线中不稳定元素的偏移情况）
  依赖Google的Lighthouse做本地采集

目前性能优化到的关键指标是加载（白屏时间和首屏时间）

白屏时间：输入内容回车（包括刷新、跳转等方式）后到页面开始出现第一个字符的时间（包括DNS寻址、建立TCP连接、发送第一个请求，返回HTML文档，HTML文档解析完毕），标准时间：300ms；

白屏时间过长的原因：DNS查询时间长、建立TCP请求连接太慢，服务器处理请求速度太慢，客户端下载、解析、渲染时间太长，没有做Gzip压缩、缺乏本地离线化处理等等；

首屏时间：白屏时间 + 渲染时间
浏览器输入地址并回车后，到首屏内容渲染完毕的时间，这期间不需要滚动鼠标或者下拉页面，否则无效；

验证效率：

1. 采用中位数做正态分布，看分位值统计；
   P50：把所有首屏时间排序得出排在第99位的首屏时间就是P50；
   P99；
2. 秒开率：1s内打开用户的占比

首屏时间可以拆分为白屏时间，数据接口响应时间，图片加载资源等；
数据接口响应时间：可以直接从后端服务中获取，不需要前端重复计算；

4 从URL到页面渲染

4.1 本地缓存

可以让静态资源加载更快，当客户端发起一个请求时，静态资源可以直接从客户端获取，不需要再向服务器请求；

本地缓存有强缓存（expires和cache-control）和协商缓存（last-modified和etag）;

4.2 DNS查询

让DNS查询走缓存，浏览器提供了DNS预获取的接口，可以在打开浏览器或者webView的同时就进行配置；

4.3 HTTP请求

请求阻塞：浏览器为保证访问速度，会默认对同一域名下的资源保持一定的连接数，请求过多就会进行阻塞；（一般限制6个）

当前页面需要用到哪些域名，最关键的首屏需要用到哪些域名；

域名散列：通过不同的域名，增加请求并行连接数；
将静态服务器地址pic.google.com，做成支持pic0-5的6个域名，每次请求随机选一个域名地址进行请求，因为有6个域名同时可用，最多可以并行36个连接；(使用http2.0不再需要这样做）

4.4 服务端数据处理

webServer接受到请求后，从数据存储层取到数据，再返回给前端的过程；
请求参数处理、权限校验；

服务端通过Gzip压缩，传输给浏览器端的文本类资源大小可以变为原来大小的1/3左右。资源下载速度就会快很多；

4.5 数据缓存

4.5.1 借助Service Worker的数据缓存

请求代理层，拦截和处理网络数据请求

4.5.2 借助本地存储的接口缓存

将数据存储到本地存储；下次请求，先从缓存拿；

4.5.3 CDN

在网络各处防止节点服务器；构造一个智能虚拟网络，将用户的请求导向离用户最近的服务节点上；

4.6 重定向

网站资源迁移到其他位置后，用户访问站点，程序自动将用户请求从一个页面转义到另外一个页面的过程。

• 服务端302重定向；
• meta标签实现重定向；
• window.location实现的重定向；

浏览器收到重定向响应后，会根据响应中的Location头部信息自动发起一个新的请求到新的URL，这个过程可能需要再次进行DNS解析（如果新URL的域名未被缓存）。（重定向发生在DNS寻址之后）

4.7 页面解析

解析：将HTML解析成DOM树和CSSOM树的过程；
渲染：解析完成之后进行渲染：主线程计算DOM节点的最终样式，生成布局树，布局树会记录参与页面的节点和样式；
绘制：将各个节点绘制到屏幕上，绘制结果以层的方式保存；当文档中各个部分以不同的层绘制时，相互重叠时，就必须进行合成；

构建DOM树的瓶颈点：

• HTML标签不满足web语义化，浏览器需要更多的时间解析DOM标签的含义；
• DOM节点数量越多，构建DOM树的时间会变长；
• 文档中遇到script标签，DOM构造过程会暂停，等待服务器请求脚本；（defer、async）;

5 性能指标

白屏指标 FP：domLoading - navigationStart；
FPS（Frames Pre Second，每秒显示帧数）：连续3帧不低于20FPS，且保持稳定；
可以利用window.requestAnimationFrame在1秒内执行60次，
页面加载用了x ms，这期间requestAnimationFrame执行了n次；FPS = 1000n/x；

6 性能优化

• 懒加载：少加载点数据；

• 缓存：强缓存+协商缓存；

• 离线化：首页或者列表页不需要登录页面的场景，同时支持SEO功能；
  利用插件，将页面中需要离线化的路由缓存；

• 并行化：
  http1.1：串行的文件传输和同域名的连接数限制（6个）
  http2.0：多路复用：二进制分帧，多路复用；