最后
javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
通过网络获取内容既速度缓慢又开销巨大。较大的响应需要在客户端与服务器之间进行多次往返通信，这会延迟浏览器获得和处理内容的时间，还会增加访问者的流量费用。因此，缓存并重复利用之前获取的资源的能力成为性能优化的一个关键方面。
浏览器缓存并非是一个“总体”概念，其实它也是有先后顺序的。总的来说分为以下4个方面。
-
Memory Cache
-
Service Worker Cache
-
Disk Cache
-
Push Cache
从这张图中我们可以清楚地看到浏览器缓存的具体位置，其中的网络请求都会有不同位置的缓存。考虑到HTTP缓存是最主要、最有代表性的缓存策略，也是每一位前端工程师都应该深刻理解并掌握的知识。
1. Memory Cache
Memory Cacha是指内存中的缓存。它是浏览器优先去命中的一种缓存，也是响应速度最快的一种缓存。但是它的缺点是缓存时间短，关闭tab页面缓存将不复存在，它与浏览器渲染进程紧密联系。
那么哪一些文件会被放到这一缓存里面呢？其实这没有官方的说明，由于浏览器的内存非常有限，浏览器并不会把所有文件都缓存在此处。一般来说会缓存一些体积不大的js或者css文件。
2. Service Worker Cache
Service Worker 是一种独立于主线程之外的javascript线程。它脱离于浏览器窗体，因此无法直接访问DOM元素。所以这一个独立的线程能够在不干扰主线程的情况下来提升性能。Service Worker 的缓存与浏览器内建的其他缓存机制不一样，它可以让我们自由缓存哪一些文件、如何匹配缓存等，且缓存具有持续性。
实现该缓存一般分为3个步骤：首先注册Service Worker ，然后监听install事件就可以缓存我们想要的文件。用户下次访问可以通过拦截请求的方式来获取缓存数据。若没有则会重新获取数据，然后再进行缓存。
Service Worker 可以用来实现离线缓存、消息推送以及网络代理等功能。那我们如何使用这种缓存呢？
注册：
window.navigator.serviceWorker.register(‘/test.js’).then(
function () {
console.log(‘注册成功’)
}).catch(err => {
console.error(“注册失败”)
})
})
监听事件：
// Service Worker会监听 install事件，我们在其对应的回调里可以实现初始化的逻辑
self.addEventListener(‘install’, event => {
event.waitUntil(
// 考虑到缓存也需要更新，open内传入的参数为缓存的版本号
caches.open(‘test-v1’).then(cache => {
return cache.addAll([
// 此处传入指定的需缓存的文件名
‘/test.html’,
‘/test.css’,
‘/test.js’
])
})
)
})
// Service Worker会监听所有的网络请求，网络请求的产生触发的是fetch事件，我们可以在其对应的监听函数中实现对请求的拦截，进而判断是否有对应到该请求的缓存，实现从Service Worker中取到缓存的目的
self.addEventListener(‘fetch’, event => {
event.respondWith(
// 尝试匹配该请求对应的缓存值
caches.match(event.request).then(res => {
// 如果匹配到了，调用Server Worker缓存
if (res) {
return res;
}
// 如果没匹配到，向服务端发起这个资源请求
return fetch(event.request).then(response => {
if (!response || response.status !== 200) {
return response;
}
// 请求成功的话，将请求缓存起来。
caches.open(‘test-v1’).then(function(cache) {
cache.put(event.request, response);
});
return response.clone();
});
})
);
});
PS：大家注意 Server Worker 对协议是有要求的，必须以 https 协议为前提。
3.Disk Cache
Disk Cache也就是硬盘缓存。这种缓存的缓存位置在电脑硬盘上，什么文件都可以缓存，就是读取速度慢。所有缓存中，它的覆盖面是最广的，会根据HTTP Header中的字段判断哪一些资源需要缓存，哪些可以不请求直接使用，哪一些已过期需要重新请求。
浏览器通常会把哪些文件放进缓存呢?
-
大体积文件
-
系统内存使用率高
4. Push Cache
Push Cache又名推送缓存，是HTTP/2中的内容，只有以上三种缓存未正确命中，它才会使用。仅存在于会话阶段（session），结束就会释放，缓存时间短。
由于国内用的比较少，网上查找后总结几个结论：
Push Cache 是一种存在于会话阶段的缓存，当 session 终止时，缓存也随之释放。
不同的页面只要共享了同一个 HTTP2 连接，那么它们就可以共享同一个 Push Cache
Push Cache 是缓存的最后一道防线。浏览器均未命中以上的情况下才会去询问 Push Cache。
Push Cache中的缓存只能被使用一次。
浏览器缓存策略通常分为两种：强缓存和协商缓存。
一次HTTP请求示意图如下所示。浏览器第一次发起请求，事先询问浏览器是否有缓存。没有则向服务器进行请求，然后结果进行缓存。
1.强缓存
强缓存是利用 http 头中的 Expires 和 Cache-Control 两个字段来控制的。强缓存中，当请求再次发出时，浏览器会根据其中的 expires 和 cache-control 判断目标资源是否“命中”强缓存，若命中则直接从缓存中获取资源，不会再与服务端发生通信。
expires 是一个时间戳，二次请求我们试图向服务器请求资源，浏览器就会先对比本地时间和 expires 的时间戳，如果本地时间小于 expires 设定的过期时间，那么就直接去缓存中取这个资源。
它最大的问题在于对“本地时间”有很大的依赖。如果服务端和客户端的时间设置可能不同，或者我直接手动去把客户端的时间改掉，那么 expires 将无法达到我们的预期。所以我们有第二种方法Cache-Control。
HTTP
-
HTTP 报文结构是怎样的？
-
HTTP有哪些请求方法？
-
GET 和 POST 有什么区别？
-
如何理解 URI？
-
如何理解 HTTP 状态码？
-
简要概括一下 HTTP 的特点？HTTP 有哪些缺点？
-
对 Accept 系列字段了解多少？
-
对于定长和不定长的数据，HTTP 是怎么传输的？
-
HTTP 如何处理大文件的传输？
-
HTTP 中如何处理表单数据的提交？
-
HTTP1.1 如何解决 HTTP 的队头阻塞问题？
-
对 Cookie 了解多少？
-
如何理解 HTTP 代理？
-
如何理解 HTTP 缓存及缓存代理？
-
为什么产生代理缓存？
-
源服务器的缓存控制
-
客户端的缓存控制
-
什么是跨域？浏览器如何拦截响应？如何解决？
-
如何理解 HTTP 缓存及缓存代理？
-
为什么产生代理缓存？
-
源服务器的缓存控制
-
客户端的缓存控制
-
什么是跨域？浏览器如何拦截响应？如何解决？
扫一扫
1396
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
