拉钩教大数据高薪训练营2022最新版
download:拉钩教大数据高薪训练营2022最新版
一份简洁、纯粹的Web前端性能优化清单。每个优化点都包含有概念、实操和参考资料。面试、实战两相宜。
这是一个大工程。在正式开始之前，先统一下语言，澄清每一部分的目的和要求，防止跑偏。
概念：把官话翻译成能看懂、能记住的人话，原则上易读性 > 专业性
实操：自己操作一遍，不做云玩家；记录核心实现，方便CV
参考资料：信息来源选用一手资料，以便保证信息的完整性、准确性和时效性。除非看一手的理解不了……
一、网络层面
1. DNS预解析
概念
DNS-prefetch 是一种 DNS 预解析技术。它会在请求跨域资源之前，预先解析并进行DNS缓存，以减少真正请求时DNS解析导致的请求延迟。对于打开包含有许多第三方连接的网站，效果明显。
实操
添加ref属性为“dns-prefetch”的link标签。一般放在在html的head中。
<link rel="dns-prefetch" href="//xxx.download.com">
复制代码
href的值就是要预解析的域名，对应后面要加载的资源或用户有可能打开链接的域名。
备注
同理，也有“ TCP/IP预连接”，叫preconnect。参考资料中有完整的描述。
2. 应用浏览器缓存
概念
浏览器缓存是浏览器存放在本地磁盘或者内存中的请求结果的备份。当有相同请求进来时，直接响应本地备份，而无需每次都从原始服务器获取。这样不仅提升了客户端的响应效率，同时还能缓解服务器的访问压力。
其间，约定何时、如何使用缓存的规则，被称为缓存策略。分为强缓存和协商缓存。
整个缓存执行的过程大致如下：
①. 请求发起，浏览器判断本地缓存，如果有且未到期，则命中强缓存。浏览器响应本地备份，状态码为200。控制台Network中size那一项显示disk cache;
②. 如果没有缓存或者缓存已过期，则请求原始服务器询问文件是否有变化。服务器根据请求头中的相关字段，判断目标文件新鲜度；
③. 如果目标文件没变更，则命中协商缓存，服务器设置新的过期时间，浏览器响应本地备份，状态码为304；
④. 如果目标文件有变化，则服务器响应新文件，状态码为200。浏览器更新本地备份。
上述过程有几个关键点
如何判断缓存是否过期？
浏览器读取缓存的请求结果中响应头的Expires 和Cache-Control，与当前时间进行比较。
其中，Expires是HTTP 1.0的字段，值是一个是绝对时间。
Expires: Tue, 18 Jan 2022 09:53:23 GMT
复制代码
比较绝对时间，有一个弊端，它依赖计算机时钟被正确设置。
为了解决这个问题，HTTP1.1 新增了Cache-Control字段，它的值是一个是相对时间。
Cache-Control: max-age=60 //单位是秒
复制代码
如何判断文件是否变化？
首先可以通过比较 最后修改时间。
// 缓存结果的 响应头
Last-Modified: Mon, 10 Jan 2022 09:06:14 GMT
// 新请求的 请求头
If-Modified-Since: Mon, 10 Jan 2022 09:06:14 GMT
复制代码
浏览器取出缓存结果中Last-Modified的值，通过If-Modified-Since上送到服务端。与服务器中目标文件的最后修改时间做比较。
再者可以通过比较 Etag。
Etag实体标签是附加到文档上的任意标签(引用字符串)。它们可能包含了文档的序列号或版本名，或者是文档内容的校验和及其他指纹信息。当发布者对文档进行修改时，会修改文档的实体标签来说明这是个新的版本。
从响应头的ETag取值，通过请求头的If-None-Match上送，与服务器目标文件的Etag标签比对。
