性能优化原则：

  • 多使用内存、缓存或其他方法
  • 减少 CPU 计算量，减少网络加载耗时
  • （适用于所有编程的性能优化 —— 空间换时间）

一、加载角度

1、减少资源体积

压缩代码

2、减少访问次数

2.1 合并代码

多个文件合并为一个文件，减少网络请求次数

2.2 SSR 服务端渲染

  • 服务端渲染：将网页和数据一起加载，一起渲染
  • 非 SSR（前后端分离）：先加载网页，再加载数据，再渲染数据

2.3 缓存

  • 静态资源加 hash 后缀，根据文件内容计算 hash
  • 文件内容不变，则 hash 不变，则 url 不变
  • url 和文件不变，则会自动触发 http 缓存机制，返回 304

3、使用更快的网络：CDN

二、渲染角度

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