2024年前端最全下班前几分钟，我彻底弄懂了前端缓存，头条Web前端面试节奏

2401_84434331

于 2024-05-12 21:47:34 发布

阅读量679

点赞数 22

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84434331/article/details/138768869

版权

程序员专栏收录该内容

186 篇文章 0 订阅

订阅专栏

JavaScript

js的基本类型有哪些？引用类型有哪些？null和undefined的区别。
如何判断一个变量是Array类型？如何判断一个变量是Number类型？（都不止一种）
Object是引用类型嘛？引用类型和基本类型有什么区别？哪个是存在堆哪一个是存在栈上面的？
JS常见的dom操作api
解释一下事件冒泡和事件捕获
事件委托（手写例子），事件冒泡和捕获，如何阻止冒泡？如何组织默认事件？
对闭包的理解？什么时候构成闭包？闭包的实现方法？闭包的优缺点？
this有哪些使用场景？跟C,Java中的this有什么区别？如何改变this的值？
call，apply，bind
显示原型和隐式原型，手绘原型链，原型链是什么？为什么要有原型链
创建对象的多种方式
实现继承的多种方式和优缺点
new 一个对象具体做了什么
手写Ajax，XMLHttpRequest
变量提升
举例说明一个匿名函数的典型用例
指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？有哪些内置对象和内置函数？
attribute和property的区别
document load和document DOMContentLoaded两个事件的区别
JS代码调试
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
在过期时间以内，为用户省了很多流量。
降低了服务器重复读取磁盘文件的压力。

使用 Expires 的缺点：

缓存过期以后，服务器不管文件有没有变化，都会再次请求服务器。
缓存过期时间是一个具体的时间，这个时间依赖于客户端的时间，如果时间不准确或者被改动，缓存也会随之受到影响。

Cache-Control

请求/响应头，缓存控制字段，精确控制缓存策略。

为了让强缓存更精确，HTTP1.1 增加了 Cache-Control 字段。Cache-Control 既能出现在请求头又能出现在响应头，其不同的值代表不同策略，下面具体分析一下。

Cache-Control 服务端参数：

max-age：缓存有效时间，是一个相对时间，比 Expires 表示的时间更精确。
s-maxage：用于表示 cache 服务器上（比如 cache CDN，缓存代理服务器）的缓存有效时间，并只对 public 缓存有效。
no-cache：不使用本地强缓存，需要使用协商缓存（下面展开）。
no-store：直接禁止浏览器缓存数据，每次用户请求该资源，都会向服务器发送请求，每次都会下载完整的资源。
public：可以被所有的用户缓存，包括终端用户和中间代理服务器。
private：只能被终端用户的浏览器缓存，不允许中间缓存代理进行缓存（默认的）。

Cache-Control 客户端参数：

max-stale: 5，表示当客户端到代理服务器上拿缓存时，即使代理缓存过期，但只要过期时间在 5 秒之内，还是可以从代理中获取的。
min-fresh: 5，表示代理缓存需要一定的新鲜度，不要等到缓存刚好到期再获取，一定要在到期前 5 秒之前获取，否则将获取不到。
only-if-cached：表示客户端只会接受代理缓存，而不会接受源服务器的响应。如果代理缓存无效，则直接返回 504（Gateway Timeout）。

协商缓存

协商缓存主要有四个头字段，它们两两组合一起使用，Last-Modified 和 If-Modified-Since 一组，Etag 和 If-None-Match 一组。当二者同时存在时，Etag 和 If-None-Match 组合的优先级更高。当命中协商缓存的时候，服务器会返回 HTTP 状态码304，让客户端直接从本地缓存里面读取资源。

Last-Modified 和 If-Modified-Since

Last-Modified

响应头，资源最近修改时间，由服务器告诉浏览器。

If-Modified-Since

请求头，资源最近修改时间，由浏览器告诉服务器。其实就是第一次访问服务端时返回的 Last-Modified 的值。

使用场景

当客户端第一次请求服务器的时候，服务端会返回一个 Last-Modified 响应头，该字段是一个标准时间。在客户端请求服务器时会带上 If-Modified-Since 请求头字段，该字段的值就是服务器上一次返回的 Last-Modified 的值。服务器接收到请求后会比较这两个值是否一样，一样就返回状态码304，让客户端直接从缓存中读取；不一样则返回新文件给客户端并更新 Last-Modified 响应头字段的值。

使用 Last-Modified 和 If-Modified-Since 的优点：

当缓存有效时，服务器不会返回文件给客户端，而是直接返回状态码304，让客户端从缓存中获取文件。大大节省了流量和带宽以及服务器的压力。

使用 Last-Modified 和 If-Modified-Since 的缺点：

Last-Modified 过期时间只能精确到秒。如果在同一秒内既修改文件又获取文件，客户端将获取不到最新文件。

Etag 和 If-None-Match

Etag

响应头，资源标识，由服务器告诉浏览器。

If-None-Match

请求头，缓存资源标识，由浏览器告诉服务器。其实就是第一次访问服务端时返回的 Etag 的值。

使用场景

为了解决文件修改时间只能精确到秒带来的问题，我们引入 Etag 响应头。Etag 是由文件修改时间与文件大小计算而成，只有当文件内容或修改时间改变时，Etag 的值才会发生变化。

当客户端第一次请求服务器的时候，服务端会返回一个 Etag 响应头。客户端请求服务器的时候会带上 If-None-Match 请求头字段，该字段的值就是服务器上一次返回的 Etag 的值。服务器接收到请求后会比较这两个值是否一样，一样就返回状态码304，让客户端直接从缓存中读取；不一样就会返回新文件给客户端并更新 Etag 响应头字段的值。

使用 Etag 和 If-None-Match 的优点：

当缓存有效时，服务器不会返回文件给客户端，而是直接返回状态码304，让客户端从缓存中获取文件。大大节省了流量和带宽以及服务器的压力。
并且解决了一秒内修改并读取文件的问题。

流程图

扩展

–

缓存失效问题

缓存可以为我们带来好处，大大提升响应速度以及减轻服务端的压力，但是也会出现一些问题，比如我们明明更新了文件版本，为什么客户端获取到的还是旧文件。在不同的时间段有不同的解决方案。

旧方案

旧方案通过人工自己修改文件名或者为文件名带上版本号、时间戳等，这样客户端就会当新文件请求并使用，之前的强缓存就算在有效期内也会失效。

js基础

1)对js的理解？
2)请说出以下代码输出的值？
3)把以下代码，改写成依次输出0-9
4)如何区分数组对象，普通对象，函数对象
5)面向对象、面向过程
6)面向对象的三大基本特性
7)XML和JSON的区别？
8)Web Worker 和webSocket？
9)Javascript垃圾回收方法？
10)new操作符具体干了什么呢？
11)js延迟加载的方式有哪些？
12)WEB应用从服务器主动推送Data到客户端有那些方式？

js基础.PNG