性能优化知识点大全

性能优化

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

一、缓存

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

二、发送请求

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

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

三、服务端响应

四、页面解析与处理

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

五、页面静态资源

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 运行时间过长

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

性能优化知识点大全

性能优化知识点大全

性能优化

一、缓存

二、发送请求

三、服务端响应

四、页面解析与处理

五、页面静态资源

1.思路

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

2.1 JavaScript 优化

2.2 CSS 优化

2.3 图片

2.4 字体

2.5 视频优化

六、运行时

1.注意强制同步布局

2.长列表优化

3.避免 JavaScript 运行时间过长

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

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

6.Passive event listeners ？

七、预加载

1.预加载技术

2.视频预加载

3.预加载的策略