作者： 文章来源：
本文原地址：https://www.mimiwuqi.com/webqianduan/196062.html
目录文章目录前端性能优化已经是老生常谈的问题了，不仅我们工作中需要，即使前端面试也是经常被考官问得考点，所以对前端性能优化还不是掌握很好的同学，是时候好好学习一下了，这篇前端性能优化总结可能对你有帮助，一起来看看吧。
我们把性能优化的方向分为以下两个方面，有助于结构化的思考与系统分析。
减少呈现页面时所必须的 HTTP 请求数量是加速用户体验的最佳方式，可以通过最大化浏览器缓存组件的能力实现这一个目标。
实体标签（Entity Tag，ETage）是 Web 服务器和浏览器用于确认缓存组件有效性的一种机制。
浏览器下载组件后，根据需要会将他们存储到缓存中，后面再次请求组件的时候去检查缓存中的组件是否过期。如果缓存过期了，浏览器在重用之前，必须要检查有效性，这称之为条件 GET 请求，浏览器必须产生这个请求，但是任然比简单的下载组件效率要高，如果组件是有效的（就是它能够和服务器的组件相互匹配），原始服务器不会返回整个组件，而是返回一个”304 Not Modified”状态码。
服务器检查组件是否和服务器相同的两种方式：
Last-Modefied原始服务器通过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 状态码。
HTTP1.1 规范规定的，当同时出现 If-None-Match 和 If-Modefied-Since 的时候，则原始服务器禁止返回 304(Not Modefied)，除非请求中的条件头字段全部一致。
ETag 的问题是通常使用组件的某些属性来构造它，这些属性对于特定的、寄宿了网站的服务器来说是唯一的，但是当浏览器从一台服务器上获得原始的组件之后，又向另外一个服务器发起条件 GET 请求时，ETag 是不会匹配的（对于采用服务器集群来处理请求的网站来说，这是很常见的一种情况），这种会大大降低有效性验证的成功率。
Apache1.3 和 2.x 使用的 ETag 格式是 inode-size-timestamp，文件系统使用 inode 来存储注入文件类型、文件所有者、组合访问模式等信息。这些信息从一台服务器到另一个服务器，inode 是不同的。后面的去掉了 inode 信息只保留了 size 大小和 timestamp 时间戳或者只有 timestamp 时间戳。
IIS 的 ETag 格式是 Filetimestamp:ChangeNumber，ChangeNumber 适用于跟踪 IIS 配置变化的计数器。
更多 建站教程 请访问 https://www.mimiwuqi.com/webqianduan/