前端性能优化

加载时

• DNS预解析
• 使用HTTP2
  • 多路复用
  • 基于帧协议
• 减少HTTP请求数量
  • 写代码的时候逻辑处理
• 压缩、合并文件

js压缩：UglifyPlugin
CSS压缩：MiniCssExtractPlugin
HTML压缩：HtmlWebpackPlugin
图片压缩：image-webpack-loader

• 采用svg图片或者字体图标

• 按需加载代码，减少冗余代码

  • 将每个路由页面单独打包为一个文件

• SSR

• 使用 Defer 加载JS

  • 尽量将 CSS 放在文件头部，JavaScript 文件放在底部

• 图片优化

  • 雪碧图

  • 图片懒加载

  • css图片懒加载

• 静态资源CDN

运行时

• 减少重绘和重排
  • 避免table布局
  • 分离读写操作
  • 集中改变样式
  • position属性为absolute或fixed
• 避免卡顿
• 长列表优化
  • 虚拟列表
• 防抖节流
  • 减少事件处理次数
• web worker