- 1、核心性能指标与 Performance API
- 2、更快的传输: http2
- 3、更小的体积: gzip/brotli
- 4、更小的体积: 压缩混淆工具
- 5、更小的体积: 更小的 Javascript
- 6、更小的体积: 更小的图片
- 7、渲染优化: 关键渲染路径
- 8、渲染优化: 防抖与节流
- 9、渲染优化: 虚拟列表优化
- 10、渲染优化: 请求及资源缓存
- 11、Web Worker
- 12、WASM
- 13、配置 ETag
前端性能优化已经是老生常谈的问题了，不仅我们工作中需要，即使前端面试也是经常被考官问得考点，所以对前端性能优化还不是掌握很好的同学，是时候好好学习一下了，这篇前端性能优化总结可能对你有帮助，一起来看看吧。
我们把性能优化的方向分为以下两个方面，有助于结构化的思考与系统分析。
- 加载性能。如何更快地把资源从服务器中拉到浏览器，如 http 与资源体积的各种优化，都是旨在加载性能的提升。
- 渲染性能。如何更快的把资源在浏览器上进行渲染。如减少重排重绘，rIC 等都是旨在渲染性能的提升。
1、核心性能指标与 Performance API
13、配置 ETag
减少呈现页面时所必须的 HTTP 请求数量是加速用户体验的最佳方式，可以通过最大化浏览器缓存组件的能力实现这一个目标。
ETag
实体标签（Entity Tag，ETage）是 Web 服务器和浏览器用于确认缓存组件有效性的一种机制。
组件是如何被缓存和确认的
浏览器下载组件后，根据需要会将他们存储到缓存中，后面再次请求组件的时候去检查缓存中的组件是否过期。如果缓存过期了，浏览器在重用之前，必须要检查有效性，这称之为条件 GET 请求，浏览器必须产生这个请求，但是任然比简单的下载组件效率要高，如果组件是有效的（就是它能够和服务器的组件相互匹配），原始服务器不会返回整个组件，而是返回一个”304 Not Modified”状态码。
服务器检查组件是否和服务器相同的两种方式：
- 比较最新修订日期
Last-Modefied - 比较实体标签 Etag，HTTP1.1 引入的
原始服务器通过Last-Modefied响应头哎返回组件的最新修订日期。
#请求头 GET /i/yahoo.gif HTTP/1.1 HOST:us.yimg.com #响应头 HTTP 1.1 200 OK Last-Modefied:tue, 21 Feb 2021 13:03:59 GMT Content-length:1195
下次请求的时候，会带上 If-Modefied-Since 头将最新修订日期传回原始服务器进行检查、比较。如果匹配，就会返回 304 响应。
通过实体实体标签进行，使用 ETag 的唯一约束就是，必须使用引号将值包起来。
#请求头 GET /i/yahoo.gif HTTP/1.1 HOST:us.yimg.com #响应头 HTTP 1.1 200 OK Last-Modefied:tue, 21 Feb 2022 13:03:59 GMT ETag:"10c24bc-4ab-457e1c1f" Content-length:1195
下次请求，会使用 If-None-Match 头将 ETag 传回原始服务器，如果匹配，就会返回 304 状态码。
If-None-Match 优先级比 If-Modefied-Since 高
HTTP1.1 规范规定的，当同时出现 If-None-Match 和 If-Modefied-Since 的时候，则原始服务器禁止返回 304(Not Modefied)，除非请求中的条件头字段全部一致。
ETag 的问题
ETag 的问题是通常使用组件的某些属性来构造它，这些属性对于特定的、寄宿了网站的服务器来说是唯一的，但是当浏览器从一台服务器上获得原始的组件之后，又向另外一个服务器发起条件 GET 请求时，ETag 是不会匹配的（对于采用服务器集群来处理请求的网站来说，这是很常见的一种情况），这种会大大降低有效性验证的成功率。
Apache1.3 和 2.x 使用的 ETag 格式是 inode-size-timestamp，文件系统使用 inode 来存储注入文件类型、文件所有者、组合访问模式等信息。这些信息从一台服务器到另一个服务器，inode 是不同的。后面的去掉了 inode 信息只保留了 size 大小和 timestamp 时间戳或者只有 timestamp 时间戳。
IIS 的 ETag 格式是 Filetimestamp:ChangeNumber，ChangeNumber 适用于跟踪 IIS 配置变化的计数器。