优化相关

怎么优化界面，让用户体验更好

• 减少 HTTP 请求

• 使用 HTTP2

• 使用服务端渲染

  客户端渲染: 获取 HTML 文件，根据需要下载 JavaScript 文件，运行文件，生成 DOM，再渲染。

  服务端渲染：服务端返回 HTML 文件，客户端只需解析 HTML。

• 静态资源使用 CDN

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

• 使用字体图标 iconfont 代替图片图标

• 善用缓存，不重复加载相同的资源

• 压缩文件

• 图片优化

  • 延迟加载（懒加载）
  • 响应式图片
  • 调整图片大小
  • 减低图片质量
  • 尽可能利用 CSS3 效果代替图片
  • 使用 webp 格式的图片

• 通过 webpack 按需加载代码，提取第三库代码，减少 ES6 转为 ES5 的冗余代码

• 减少重绘重排

• 使用事件委托

• 注意程序的局部性

• if-else 对比 switch

  • 当判断条件数量越来越多时，越倾向于使用 switch 而不是 if-else。

• 查找表

  • 当条件语句特别多时，使用 switch 和 if-else 不是最佳的选择，这时不妨试一下查找表。查找表可以使用数组和对象来构建。

• 避免页面卡顿

• 使用 requestAnimationFrame 来实现视觉变化

• 使用 Web Workers

• 使用位操作

• 不要覆盖原生方法

• 降低 CSS 选择器的复杂性

• 使用 flexbox 而不是较早的布局模型

• 使用 transform 和 opacity 属性更改来实现动画

• 合理使用规则，避免过度优化

就是上面这些。。。太强了。看参考文章吧

参考：

• 前端性能优化 24 条建议（2020） - SegmentFault 思否 (opens new window)