2024年系统总结浏览器缓存，一个web从启动到主页面显示经历了哪些过程

文末

如果30岁以前，可以还不知道自己想去做什么的话，那30岁之后，真的觉得时间非常的宝贵，不能再浪费时间在一些碎片化的事情上，比如说看综艺，电视剧。一个人的黄金时间也就二，三十年，不能过得浑浑噩噩。所以花了基本上休息的时间，去不断的完善自己的知识体系，希望可以成为一个领域内的TOP。

同样是干到30岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说30岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

269页《前端大厂面试宝典》

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

JavaScript

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中的缓存只能被使用一次。

03 缓存策略

---

浏览器缓存策略通常分为两种：强缓存和协商缓存。

一次HTTP请求示意图如下所示。浏览器第一次发起请求，事先询问浏览器是否有缓存。没有则向服务器进行请求，然后结果进行缓存。

1.强缓存

强缓存是利用 http 头中的 Expires 和 Cache-Control 两个字段来控制的。强缓存中，当请求再次发出时，浏览器会根据其中的 expires 和 cache-control 判断目标资源是否“命中”强缓存，若命中则直接从缓存中获取资源，不会再与服务端发生通信。

expires 是一个时间戳，二次请求我们试图向服务器请求资源，浏览器就会先对比本地时间和 expires 的时间戳，如果本地时间小于 expires 设定的过期时间，那么就直接去缓存中取这个资源。

它最大的问题在于对“本地时间”有很大的依赖。如果服务端和客户端的时间设置可能不同，或者我直接手动去把客户端的时间改掉，那么 expires 将无法达到我们的预期。所以我们有第二种方法Cache-Control。

Cache-Control 是一个时间长度，我们通过 max-age 来控制资源的有效期，它意味着该资源在时间长度以内都是有效的，完美地规避了时间戳带来的潜在问题。它的优先级更高，当两者同时出现的时候我们以Cache-Control为准。

Cache-Control有如下字段比较常见。

1. s-maxage 和 max-age

cache-control: max-age=3600, s-maxage=31536000

s-maxage的优先级比max-age高。s-maxage是代理服务器的缓存时间。客户端中我们以max-age为准。

2. public 与 private

public 与 private 是针对资源是否能够被代理服务缓存而存在的一组对立概念。如果我们为资源设置了 public，那么它既可以被浏览器缓存，也可以被代理服务器缓存；如果我们设置了 private，则该资源只能被浏览器缓存。private 为默认值。

3. no-store 与 no-cache

css

1，盒模型
2，如何实现一个最大的正方形
3，一行水平居中，多行居左
4，水平垂直居中
5，两栏布局，左边固定，右边自适应，左右不重叠
6，如何实现左右等高布局
7，画三角形
8，link @import导入css
9，BFC理解

js

1，判断 js 类型的方式
2，ES5 和 ES6 分别几种方式声明变量
3，闭包的概念？优缺点？
4，浅拷贝和深拷贝
5，数组去重的方法
6，DOM 事件有哪些阶段？谈谈对事件代理的理解
7，js 执行机制、事件循环
8，介绍下 promise.all
9，async 和 await,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

[外链图片转存中…(img-vgNPOFOB-1715086004540)]

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】