前端性能优化策略

网络层面：

• 构建策略：基于构建工具(Webpack、Vite)
• 图像策略：基于图像类型(JPG、PNG、Base64)
• 分发策略：基于内容分发网络(CDN)
• 缓存策略：基于浏览器缓存(强缓存和协商缓存)

webpack构建策略:

• 精确缩小打包范围(exclude、include)
• 配置编译cache缓存
• 配置resolve提高文件搜索速度

export default {
  resolve:{
    alias:{
  "#":AbsPath(""),
  "@":AbsPath("src"),
  swiper:"swiper/js/swiper.min.js"
},
extensions:[".js",".ts"]  //自动补全import后缀名
}
}

• DLLPlugin 在现代版本中收益不大
• 并行构建
• 配置BundleAnalyzer分析打包文件的可视化数据
• 分割各个模块代码，提取相同部分代码，webpack v4使用splitChunks替代CommonsChunksPlugin
• 摇树优化
• babel垫片
• 路由懒加载(使用webpack魔术注解命名分割可以知道是哪个业务代码块分割出来的)
• 作用提升 (在webpack里只需将打包环境设置成生产环境就能让作用提升生效，或显示设置concatenateModules)
• 压缩代码

图像层面策略

• 使用合适的图像格式
• 进行压缩
• 使用内容分发CDN
  渲染层面
• css策略
• dom策略
• 阻塞策略
• 回流重绘策略
• 异步更新策略

六大指标

• 加载优化
• 执行优化
• 渲染优化
• 样式优化
• 脚本优化
• V8引擎优化

加载优化:
优化网络：缓存资源、避免重定向、无阻塞加载(link、script的位置)、减少http请求、减少携带cookie、异步加载第三方资源
压缩文件：压缩代码、压缩图像体积、合并图标成精灵图、选择正确图像格式、使用css、base64替代、使用cdn加载静态资源且可通过参数调整
首屏体验：预解析：dns获取域名对应ip--pre-parse、预加载：延后加载无需立即用到的资源，确保使用时已加载--pre-load、预渲染：延后渲染无需立即打开的页面，确保使用时已渲染--pre-render 、懒加载、懒执行(执行优化)

渲染优化：
- 设置viewport
- 减少DOM节点
- 优化动画
- 优先使用css动画
- 合理开启GPU加速
- 合理使用canvas动画
- 合理使用requestAnimationFrame
- 节流Throttle
- 防抖debounce
- 增加响应变化的时间间隔
- 使用requestAnimationFrame监听帧变化

样式优化：
- 标准化各种浏览器前缀
- 值为0时不添加任何单位
- 移除css空规则和表达式
- 避免行内样式
- 正确使用display，不滥用float
- 不声明过多font-size

脚本优化：
- 缓存数组长度
- 缓存DOM计算属性
- 避免过多DOM操作
- 尽量使用ID选择器
- 尽量使用事件代理
- 优化Touch事件

V8引擎优化：
- LightHouse获取页面性能指标报告
- Performance获取页面性能瓶颈报告
- Performance API获取页面各个阶段精确时间
- 压缩代码体积、减少嵌套函数降低编译时间
- 保证函数入参类型一致让v8自动优化代码