前端性能优化入门与案例实战

了解页面生命周期

• 地址栏输入链接到页面展示的过程

  • 输入地址，创建网络请求线程： url 解析（协议，端口，路径），网络请求线程下载资源
  • 建立 TCP 连接，发送 HTTP 请求： dns 解析，tcp 连接（三次握手四次挥手）
  • 前后端的交互： 反向代理服务/负载均衡/防火墙（nginx）-> 后端以一个 http 响应数据的形式返回给前端
  • 关键路径渲染： html 解析，dom 树构建，css 解析，cssom 树构建，render 树构建，layout 布局，paint 绘制，composite 合成。

  

• 优化方案

  • 加载优化
    • 减少 http 请求次数
    • 减少 http 请求大小
    • 使用 CDN 加速
    • 使用 http2.0
  • 构建优化
    • 优化 webpack 配置
    • 优化代码(压缩，去除无用代码，合并)
    • 优化图片（压缩）
    • 优化字体
    • 优化第三方库
  • 缓存优化
    • 优化缓存策略
    • 优化缓存位置
    • 优化缓存内容
  • 渲染优化
    • 优化关键渲染路径
    • 优化 css
    • 优化 js
    • 优化渲染流程（减少不必要的，重绘和回流）
    • 优化动画
    • 优化页面卡顿

加载优化

• 图片懒加载
  • 原理：图片不在可视区域内，不加载，等到滚动到可视区域内，再去加载
  • 实现：监听 scroll 事件，判断图片是否在可视区域内，如果在可视区域内，将 img 标签的 src 属性设置为真实的图片地址
  • api: IntersectionObserver/getBoundingClientRect

构建性能优化

• 把字符串形式代码的代码转出 ast 语法树，用到 babel/parser

• 对 ast 语法树进行遍历，找到对应的节点，进行替换，用到 babel/traverse

• 把 ast 语法树转成字符串形式的代码，用到 babel/generator

  

• webpack5 开启多线程打包

  • 原理：开启多个子进程，每个子进程都有自己的进程堆栈和内存空间，互不影响，可以并行执行任务
  • 实现：使用 thread-loader

• 生产环境，打包原则

渲染优化

• 减少重排方案

• 验证重绘方法

  

• 渲染性能优化（动画）

• 节流和防抖方案

• webWorker: 用于在后台运行脚本，不会影响页面的性能

  • 主线程和 worker 线程之间的通信
    • 主线程和 worker 线程之间的通信，通过 postMessage 方法，发送消息
    • 主线程和 worker 线程之间的通信，通过 onmessage 方法，接收消息
  • 计算密集型任务，使用 webWorker

缓存性能优化

• 强缓存

• 协商缓存

• 如何选择缓存策略：强缓存优先级高于协商缓存

  

http 图文

参考资料

• 前端性能优化入门与案例实战
• 为什么 html 不可以缓存？
• 意外惊喜！浏览器缓存优化方案，让页面加载速度飙升 48.5%！