前端性能优化

• 体验的性能优化：手写防抖、节流

原则：

• 多使用内存、缓存
• 减少 CPU 计算量，减少网络加载耗时
• 性能优化 —— 空间换时间

从何入手：

• 加载更快

  • 减少资源体积：压缩代码（webpack）、图片压缩，gzip压缩（webpack 预压缩）。
  • 减少访问次数：合并代码（雪碧图）、SSR 服务器渲染、缓存。
  • 使用更快的网络：CDN。

• 渲染更快

  • CSS 放 head JS 放 body 最下面
  • 尽早执行 JS ，用 DOMContentLoaded 触发
  • 懒加载，图片懒加载、上滑加载更多
  • DOM 查询进行缓存，频繁 DOM 操作合并到一起插入 DOM 结构，文档片段。
  • 节流 throttle 防抖 debounce

• https://zhuanlan.zhihu.com/p/121056616