【学习笔记】面试中的一些盲区

最新推荐文章于 2024-11-05 11:18:17 发布

My-Lady

最新推荐文章于 2024-11-05 11:18:17 发布

阅读量388

点赞数

分类专栏：性能优化文章标签：性能优化 DNS 强缓存协商缓存资源更新

本文链接：https://blog.csdn.net/heshan1992/article/details/77864624

版权

性能优化专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、前端如何对DNS解析进行优化

解析：在CDN内容分发网络时，如果使用的域名不一样，虽然会增加浏览器加载的并发量，但是由于多增加了域名，所以会导致DNS解析耗时增多，所以这两者是相互矛盾的，在此基础上应该对DNS解析进行优化。除了利用缓存技术外可以借助其他的方式行进行预加载。
HTML5中在link标签rel属性（表示的是当前文档和链接之间关系）新增值dns-prefetch，添加该属性值后，会分析这个页面需要的资源所在的域名，在浏览器空闲的时候提前将域名转换为IP地址，在进行请求时则可以直接在缓存中读取到IP地址，无需进行DNS解析，而加快页面的渲染速度。

<meta http-equiv='x-dns-prefetch-control' content='on'>  
<link rel='dns-prefetch' href='http://g-ecx.images-amazon.com'>

该属性的应用场景：
应用场景1：我们的资源存在在不同的 CDN 中，那提前声明好这些资源的域名，就可以节省请求发生时产生的域名解析的时间。
应用场景2：如果我们知道用户接下来的操作一定会发起一起资源的请求，那就可以将这个资源进行 DNS-Prefetch，加强用户体验。

谷歌浏览器会分析用户的习惯，预测用户的下一下可能需要访问的域名，提前进行解析缓存，在需要使用的时候直接通过缓存进行读取。

二、浏览器缓存注意知识点

1、浏览器的缓存和用户刷新操作之间的关系
缓存和刷新操作的关系图
主要的属性操作有：输入地址加回车、f5进行刷新、Ctrl+F5强制刷新
在地址栏输入地址然后进行回车强缓存和协商缓存（如果不清楚协商缓存和强缓存可以戳这里）是都可以起作用的，会先考虑缓存（强缓存 > Etag >lastModified）；如果是利用F5进行刷新，则强缓存将不会起作用，协商缓存会起作用；如果是强制刷新ctrl+ F5则会清空浏览器的所有的缓存文件，缓存失效，所有的资源将会从服务器中进行获取。

（2）即生last-Midified何生Etag
这个和两个的原理相关，首先前者是根据文件的修改时间来判断文件是否修改，后者是根据文件内容生成的唯一的一个标签，只要文件的内容不发生变化，则该标签不变。
由于以上原因所以：
a、当文件内容没有发生变化而只是修改了文件修改的时间时，这是前者将会失效，会重新从服务器读取资源，浪费流量。
b、前者的精确度是到s的，如果某个文件的修改频率为ms或者是更小的计量单位时，前者将没有捕获到文件的修改，不能获取到最新的内容，而后者是根据文件内容生成的，只要内容发生变化，就会修改，使得其从服务器获取资源。

（3）使用强缓存在过期时间内如果缓存资源发生变化该怎么获取新资源？
利用在静态资源上添加版本号的的方式就是query形如：

//添加之前：
<script type = "text/javascript" src = "a.js"></script>
//添加之后
<script type = "text/javascript" src = "a.js?v=1.0.0"></script>

发布上线时新的文件需要覆盖旧的同名的文件资源，不管怎样，在发布的过程中，index.html和a.js更新总有一个先后的顺序，从而中间出现一段或大或小的时间间隔。如果在这个时间间隔内有新的用户进行访问，可能会出现如下情况：
a、如果先覆盖index.html，后覆盖a.js，用户在这个时间间隙访问，会得到新的index.html配合旧的a.js的情况，从而出现错误的页面。
b、如果先覆盖a.js，后覆盖index.html，用户在这个间隙访问，会得到旧的index.html配合新的a.js的情况，从而也出现了错误的页面。
所以很多公司的发布上线在半夜，这样可以减少错误的发生。

同时如果有的公司利用科CDN缓存服务，可能会导致CDN缓存攻击，攻击者知道文件更新的下一个版本，将缓存服务器上的资源版本号修改，使得用户请求时获取的资源还是旧的资源，而导致错误。
对于上诉问题，很多公司采用的是利用根据文件内容生成hash值的方式给文件进行命名（同时也可以利用MD5的方式进行生成）：

<script type = "text/javascript" src = "a_09034e.js"></script>

a_09034e是根据文件内容生成的，只有文件的内容发生变化时才会进行更新，其好处：

（1）线上的a.js不是同名文件覆盖，而是文件名+hash的冗余，所以可以先上线静态资源，再上线html页面，不存在间隙问题；
（2）遇到问题回滚版本的时候，无需回滚a.js，只须回滚页面即可；
（3）由于静态资源版本号是文件内容的hash，因此所有静态资源可以开启永久强缓存，只有更新了内容的文件才会缓存失效，缓存利用率大增；
（4）修改静态资源后会在线上产生新的文件，一个文件对应一个版本，因此不会受到构造CDN缓存形式的攻击