前端性能优化

如何进行WEB性能优化

1. 首先需要了解性能指标-多快才算快?
2. 使用专业的工具可量化地评估出网站或应用的性能表现;
3. 然后立足于网站页面响应的生命周期，分析出造成较差性能表现的原因;
4. 最后进行技术改造、可行性分析等具体的优化实施。
5.  迭代优化

WEB性能指标

RAIL性能模型

• 响应（react
• 动画（animation
• 空闲（idle
• 加载（load

具体指标方案（基于用户体验的性能指标）

1. FCP（first contentful paint）
   1. 首次内容绘制（白屏时间）
2. LCP（largest contentful paint）
   1. 最大内容绘制
3. FID（first input delay）
   1. 首次输入延迟
4. TTI（time to interactive）
   1. 网页完全达到可交互
5. TBT（total block time）
   1. 总阻塞时间
6. CLS（cumulative layout shift）
   1. 累计布局偏移

WEB VITALS

简化指标

1. LCP（largest contentful paint）
   1. 最大内容绘制
2. FID（first input delay）
   1. 首次输入延迟
3. CLS（cumulative layout shift）
   1. 累计布局偏移

WEB性能测试

工具

1. lighthouse
2. webpagetest
   1. 支持多地点，多浏览器测试
3. DevTools（*****）

前端页面生命周期

1.  从发出请求到收到响应的优化，比如DNS查询、HTTP长连接、HTTP 2、HTTP压缩、HTTP缓存等。
2. 关键渲染路径优化，比如是否存在不必要的重绘和回流。
3. 加载过程的优化，比如延迟加载，是否有不需要在首屏展示的非关键信息，占用了页面加载的时间。
4. 资源优化，比如图片、视频等不同的格式类型会有不同的使用场景，在使用的过程中是否恰当。
5. 构建优化，比如压缩合并、基于webpack构建优化方案等。
    

1. 浏览器接收到URL，到网络请求线程的开启

   1. 进程与线程

      1. 进程所占用的资源会在关闭后由操作系统回收，既是进程中存在某个线程的内存泄漏，进程退出时相关资源也会被回收

      2. 线程出错整个进程将会崩溃，进程与进程之间相互隔离，一个进程崩溃不会影响其他

      3. 线程之间可以共享所属进程的数据，进程只能访问分配给自己的资源（会通过IPC进行通讯）

   2. 浏览器进程

      1. 渲染进程：每个页面都创建了一个渲染进程
         1. JS引擎线程
         2. GUI渲染线程
         3. 事件触发线程
         4. 定时器触发线程
         5. 异步HTTP请求线程

2. 建立TCP连接

   1. 建立TCP连接

      1. DNS解析
         1. 通信链路的建立

   2. TCP连接

      1. 三次握手

3. 发送HTTP请求

   1. http1的长连接
      1. 优点：只连接一次TCP就可以进行多次http通信（复用TCP链接）
      2. 缺点：对多个请求（并发请求），服务器只能按顺序一一对应，前边回应慢，造成队头堵塞
   2. HTTP2（多服二头）
      1. 多路复用：复用TCP链接，在一个链接里，客户端和浏览器可以同时发送多个请求或回应，不用按顺序一一对应，避免了队头堵塞。
      2. 服务器推送：允许未经服务器请求主动向客户端发送资源。

      3. 二进制分帧：HTTP/2 采用二进制格式传输数据，而非 HTTP 1.x 的文本格式，二进制协议解析起来更高效。

      4. 头部压缩：HTTP/2对消息头采用HPACK（专为http/2头部设计的压缩格式）进行压缩传输，能够节省消息头占用的网络的流量。

   3. HTTP缓存
      1. 协商缓存
         1. 在使用本地缓存之前，向服务器发送一次GET请求，与之协商本地缓存是否已经过期
      2. 强制缓存（res.setHeader('cache control')）
         1. 如果浏览器判断请求的资源有效命中，则可以直接从强制缓存中返回请求响应，无需与服务器进行任何通信

4. 服务器处理

5. 关闭TCP连接

   1. 四次握手

6. 浏览器解析数据包，关键渲染路径（CRP）

   1. 构建对象模型
      1. DOM树 和CSSOM树
      2. 合成Render Tree

7. 游览器布局渲染

   1. 根据渲染树布局，计算CSS样式，即每个节点在页面中的大小和位置等几何信息。HTML默认是流式布局的，CSS和js会打破这种布局，改变DOM的外观样式以及大小和位置。

      

WEB性能优化（加载上，运行上）

1. 加载时

   1. 服务器通信层面

      1. 减少HTTP请求
         1. 资源合并（如雪碧图）
      2. 使用CDN
      3. 使用服务端渲染
         1. 客户端渲染经历流程：获取HTML文件 – 按需要再获取JS文件 – 运行文件 – 生成DOM – 将DOM插入HTML中 – 最后再渲染页面。
         2. 服务端渲染流程：只要获取识别解析HTML文件即可。而且服务端渲染还能有效增强站点的SEO。

   2. 数据传输层面

      1. 缓存
         1. 协商缓存
         2. 强缓存
      2. 压缩
         1. 数据压缩（如GZIP）
         2. 代码文件压缩：删去注释，空格，长变量
         3. 静态资源：字体图标、去除元数据、使用jpg或webp格式、缩小尺寸及分辨率
         4. 头与报文
            1. HTTP减少不必要的头
            2. 减少cookie数据量
      3. 懒加载

   3. 代码层面

      1. 图片压缩
      2. css写头部，js写底部
      3. 能用HTML/CSS实现的效果就不用JS
      4. 减少作用域查找和闭包，避免==，使用块级作用域
      5. 使用flexbox弹性布局
      6. 使用transform实现动画

2. 运行时

   1. 优化关键渲染路径，减少回流和重绘
   2. 使用事件委托
   3. 防抖和节流