No120.精选前端面试题，享受每天的挑战和学习

浏览器强制缓存和协商缓存

浏览器缓存是浏览器用于提高网页加载速度的一种机制。浏览器缓存分为强制缓存和协商缓存。

1. 强制缓存：浏览器在第一次请求资源时，会将该资源的缓存相关信息（如过期时间）保存起来。在下次请求该资源时，浏览器会先检查缓存相关信息，如果未过期，浏览器就直接从缓存中加载该资源，不需要再向服务器发送请求。常见的强制缓存策略有：Expires 和 Cache-Control。

• Expires：是 HTTP/1.0 的标准，用于指定资源的过期时间，即到期后就需要重新请求服务器，这个时间是服务器的绝对时间，如：Expires: Wed, 21 Oct 2022 07:28:00 GMT。
• Cache-Control：是 HTTP/1.1 的标准，用于对缓存进行更精细化的控制。常见的取值有：
  • public：表示响应可以被任何缓存（包括公共缓存和私有缓存）缓存。
  • private：表示响应只能被客户端（浏览器）缓存，中间的代理服务器不能缓存该响应。
  • no-cache：表示浏览器在使用缓存副本之前必须先确认其有效性。
  • max-age：表示资源的有效期，单位为秒。

2. 协商缓存：当强制缓存失效时，浏览器会发送一个请求到服务器，服务器通过比较请求头中的一些字段来判断资源是否发生了变化。若资源未发生变化，则服务器返回 304 Not Modified 响应，浏览器继续使用缓存。若资源已经发生变化，服务器返回最新的资源，并携带新的缓存相关信息，存入缓存中。常见的协商缓存策略有：Last-Modified 和 ETag。

• Last-Modified：是服务器响应的一个字段，表示资源的最后修改时间。当浏览器请求该资源时，会携带 If-Modified-Since 请求头，该头字段的值即是上次请求服务器返回的 Last-Modified 值。服务器接收到请求后，根据 If-Modified-Since 的值与资源的最后修改时间进行对比，如果时间一致，说明资源未发生变化，返回 304 Not Modified 响应。如果时间不一致，说明资源已经修改，返回最新的资源并更新 Last-Modified 值。
• ETag：是服务器响应的一个字段，表示资源的唯一标识。当浏览器请求该资源时，会携带 If-None-Match 请求头，该头字段的值即是上次请求服务器返回的 ETag 值。服务器接收到请求后，根据 If-None-Match 的值与资源的 ETag 进行对比，如果一致，说明资源未发生变化，返回 304 Not Modified 响应。如果不一致，说明资源已经修改，返回最新的资源并更新 ETag 值。

通过强制缓存和协商缓存两种机制的配合使用，可以在一定程度上减少对服务器的请求，提高网页加载速度。

cookie，localStorage、sessionStorage

下面是对cookie、localStorage和sessionStorage使用的表格总结：

	Cookie	localStorage	sessionStorage
存储容量	4KB	5MB	5MB
生命周期	可设置过期时间	永久存储	页面关闭时清除
存储位置	浏览器和服务器都能读取	仅浏览器能读取	仅浏览器能读取
是否跨域访问	取决于Cookie的设置	不允许跨域访问	不允许跨域访问
存储数据格式	仅能存储字符串	可以存储各种数据类型	可以存储各种数据类型
与服务器通信	每次请求都会带上cookie	不会自动带上，需要手动设置	不会自动带上，需要手动设置

js闭包，原型，原型链

闭包、原型和原型链是 JavaScript 中重要的概念。

1. 闭包（Closure）：闭包是指有权访问另一个函数作用域中的变量的函数。简单来说，闭包就是函数和声明该函数的词法环境的组合。闭包能够记住并访问其声明时的作用域，即使在函数外部被调用也可以访问到。闭包的一个常见用途是创建私有变量，它可以通过闭包隐藏内部状态，只暴露一些公共接口。

2. 原型（Prototype）：在 JavaScript 中，每个对象都有一个原型。原型是一个对象，其他对象可以通过它来继承属性和方法。当你访问一个对象的属性或方法时，如果这个对象本身没有这个属性或方法，JavaScript 引擎会去它的原型上查找，如果原型上也没有，就会继续查找原型的原型，直到找到或者到达原型链的末尾。

3. 原型链（Prototype Chain）：原型链是由对象的原型组成的链式结构。当一个对象在查找属性或方法时，如果自身没有，它会通过原型链向上查找，直到找到或者到达原型链的末尾（Object.prototype）。原型链是 JavaScript 实现继承的机制之一，可以让对象共享原型的属性和方法。

这些概念相互关联并且在 JavaScript 中非常重要。深入了解它们将有助于更好地理解和使用 JavaScript。

箭头函数和普通函数的区别

箭头函数和普通函数在语法和功能方面有一些区别：

1. 语法：箭头函数使用箭头（=>）来定义函数，而普通函数使用 function 关键字来定义函数。

2. this 绑定：箭头函数没有自己的 this 绑定，它会捕获所在上下文的 this 值，可以理解为箭头函数的 this 值是词法上下文的绑定。而普通函数的 this 值是在运行时动态绑定的。

3. arguments 对象：箭头函数没有自己的 arguments 对象，但它可以访问外部作用域中的 arguments 对象。普通函数可以直接访问自己的 arguments 对象。

4. 构造函数：箭头函数不能用作构造函数，因为箭头函数没有自己的 this 值，无法使用 new 关键字来创建对象。而普通函数可以用作构造函数来创建对象。

5. 返回值：箭头函数的返回值会直接作为函数的返回值，不需要使用 return 关键字。普通函数需要使用 return 关键字来指定返回值。

综上所述，箭头函数适用于一些简单的函数，尤其是需要更简洁的语法和避免 this 绑定问题的场景。而普通函数则更灵活，可以适应更多的场景，并支持更多的语法特性。

promise的状态扭转

Promise 的状态扭转包括三种状态：Pending（进行中）、Fulfilled（已成功）和Rejected（已失败）。

初始状态为 Pending（进行中），表示 Promise 的操作还未完成。

当 Promise 的操作成功完成时，状态会从 Pending（进行中）转变为 Fulfilled（已成功），并且会调用 Promise 的 resolve 函数。

当 Promise 的操作失败时，状态会从 Pending（进行中）转变为 Rejected（已失败），并且会调用 Promise 的 reject 函数。

一旦状态从 Pending（进行中）转变为 Fulfilled（已成功）或 Rejected（已失败），就不会再次发生状态转换。

在状态转换后，可以通过 then 方法来处理 Promise 的结果。如果状态为 Fulfilled（已成功），则会执行第一个参数传入的回调函数；如果状态为 Rejected（已失败），则会执行第二个参数传入的回调函数。

需要注意的是，Promise 的状态是不可逆的，一旦状态发生了改变，就无法再次改变。所以，Promise 的状态转换只会发生一次。