性能优化

加载性能优化

优化首屏时间-懒加载（IntersectionObserverEntry，判断元素是否在可视区域）

const imgList = [...document.querySelectorAll('img')]

const observer = new IntersectionObserver((entries) =>{
  entries.forEach(item => {
    // isIntersecting是一个Boolean值，判断目标元素当前是否可见
    if (item.isIntersecting) {
      console.log(item.target.dataset.src)
      item.target.src = item.target.dataset.src
      // 图片加载后即停止监听该元素
      observer.unobserve(item.target)
    }
  })
}, {
  root: document.querySelector('.root')
})

// observe遍历监听所有img节点
imgList.forEach(img => observer.observe(img))

渲染优化

减少重排

• dom元素几何属性的修改：width height padding margin left top
• 修改dom树结构： 增加 删除 移动节点

动画优化

requestAnimationFrame

节流&防抖（减少回调函数执行次数）

Web Worker：计算阻塞渲染

缓存优化

• 强缓存
  • cache-control：max-age=xxx 过期时间，单位为秒
  • expires：具体的失效时间戳
• 协商缓存
  • if-modified-since/last-modified 文件改动，变了就重新加载
  • If-none-match/etag 比较上次修改时间，改了就重加载

构建优化

• 代码压缩

  • javascript压缩
    • Tree-shaking： import, export模块导入导出
    • mode=production
    • Es5：Uglifyjs -> uglifyjs-webpack-plugin
    • Es6: Terser -> terser-webpack-plugin（默认开启多线程压缩）
  • css压缩
    • css-minimizer-webpack-plugin 压缩

• 资源合并

  • Node_modules资源
    • 打包成单独文件
    • 设置maxSize阈值，防止verdor包过大
  • 业务代码
    • 设置common分组，通过minChunks配置将使用率较高的资源合并
    • 懒加载的资源使用异步方式引入

• 可视化分析打包结果

  • webpack-bundle-analyzer (webpack)
  • rollup-plugin-visualizer (vite)

性能检测工具

• devtools
• lighthouse（chrome高版本已集成）

性能优化指标

juejin.cn/post/758955…