性能优化知识点大全

性能优化

查询缓存 -> 发送请求 -> 等待响应 -> 页面解析 -> 下载并处理各类静态资源 -> 运行时 -> 预加载

一、缓存

• 本地数据存储
  localStorage、sessionStorage、indexedDB
• 内存缓存
• Cache API
• http缓存
• Push Cache： HTTP/2 的 Push 功能所带来的

二、发送请求

• 避免多余重定向
• DNS 预解析
• 预先建立连接
• 使用 CDN
  DNS 解析会将 CDN 资源的域名解析到 CDN

服务的负载均衡器上，负载均衡器可以通过请求的信息获取用户对应的地理区域，从而通过负载均衡算法，在背后的诸多服务器中，综合选择一台地理位置近、负载低的机器来提供服务。例如为北京联通用户解析北京的服务器 IP。这样，用户在之后访问 CDN 资源时都是访问北京服务器，距离近，速度快。

三、服务端响应

四、页面解析与处理

1. 注意资源在页面文档中的位置
2. 使用 defer 和 async
3. 页面文档压缩

五、页面静态资源

1.思路

• 减少不必要的请求
• 减少包体大小
  • 使用适合当前资源的压缩技术；
  • 避免再响应包体里“塞入”一些不需要的内容
• 降低应用资源时的消耗
• 利用缓存

2.针对各类资源的性能优化

2.1 JavaScript 优化

• 减少不必要的请求
  • 代码拆分（code split）与按需加载(webpack、路由、 AMD 模块加载器)
  • 代码合并
• 减少包体积大小
  • 代码压缩
  • Tree Shaking：本质是通过检测源码中不会被使用到的部分，将其删除，从而减小代码的体积
  • 优化 polyfill 的使用
  • 优化 polyfill 的使用
• 解析与执行
  • JavaScript 的解析耗时
  • 避免 Long Task
  • 是否真的需要框架
  • 针对代码的优化
• 缓存
  • 发布与部署：https://www.zhihu.com/question/20790576/answer/32602154
  • 将基础库代码打包合并：https://juejin.im/post/6844903602134188046
  • 减少 webpack 编译不当带来的缓存失效

  webpack 会使用自增 ID。这就可能导致一个问题：一些模块虽然它们的代码没有变化，但由于增/删了新的其他模块，导致后续所有的模块 ID 都变更了，文件 MD5 也就变化了。另一个问题在于，webpack 的入口文件除了包含它的 runtime、业务模块代码，同时还有一个用于异步加载的小型 manifest，任何一个模块的变化，最后必然会传导到入口文件。这些都会使得网站发布后，没有改动源码的资源也会缓存失效

   1.使用 Hash 来替代自增 ID: HashedModuleIdsPlugin 插件
   2.将 runtime chunk 单独拆分出来
   3.使用 records

2.2 CSS 优化

• 关键 CSS:经典的骨架屏
• 优化资源请求
  • 按需加载
  • 合并文件
  • 请求的优先级排序
  • 慎用 @import: 这个是串行，可以改成并行
  • 谨慎对待 JavaScript 脚本的位置
• 减少包体大小
  • 压缩
  • 选择合适的兼容性
• 解析与渲染树构建
  • 简化选择器
  • 避免使用昂贵的属性
  • 使用先进的布局方式
• 利用缓存

2.3 图片

• 优化请求数
  • 雪碧图
  • 懒加载
  • CSS 中的图片懒加载
  • 内联 base64
• 减小图片大小
  • 使用合适的图片格式
    • 使用 WebP：
    • 使用 SVG 应对矢量图场景
    • 使用 video 替代 GIF
    • 渐进式 JPEG：
  • 图片质量的权衡：有损 无损
  • 使用合适的大小和分辨率
  • 删除冗余的图片信息
  • SVG 压缩
• 缓存

2.4 字体

• font-display

@font-face 中设置 font-display: swap，他可以让 FOIT 的默认行为变为 FOUT (Flash of Unstyled Text)，即先会使用默认字体样式展示文本，字体加载完毕后再将文本的字体样式进行替换。

• 内联字体
• 使用 CSS Font Loading API
• FOFT

2.5 视频优化

• 使用合适的视频格式
• 视频压缩
• 移除不必要的音轨信息
• 使用“流”
• 移除不必要的视频

六、运行时

1.注意强制同步布局

• 尝试使用 RAF 避免强制同步布局
• 批量化你的操作

2.长列表优化

• 实现 Virtual List
• 原生的 Virtual Scroller

3.避免 JavaScript 运行时间过长

• 任务分解
• 延迟执行
• 并行计算

4.善用 Composite：https://fed.taobao.org/blog/2016/04/26/performance-composite/

5.滚动事件的性能优化：防抖，节流

6.Passive event listeners ？

七、预加载

1.预加载技术

• Resource Hints
  • Prefetch
  • Prerender
  • Preload
  • webpack 中的使用方式
• 基于 JavaScript 的预加载

2.视频预加载

• 为视频添加 preload 属性
• 使用 Preload Link
• 使用 JavaScript 进行自定义的 Buffer 操作

3.预加载的策略

• quicklink
• Guess.js