浏览器强制缓存和协商缓存
浏览器缓存是浏览器用于提高网页加载速度的一种机制。浏览器缓存分为强制缓存和协商缓存。
- 强制缓存:浏览器在第一次请求资源时,会将该资源的缓存相关信息(如过期时间)保存起来。在下次请求该资源时,浏览器会先检查缓存相关信息,如果未过期,浏览器就直接从缓存中加载该资源,不需要再向服务器发送请求。常见的强制缓存策略有: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:表示资源的有效期,单位为秒。
- 协商缓存:当强制缓存失效时,浏览器会发送一个请求到服务器,服务器通过比较请求头中的一些字段来判断资源是否发生了变化。若资源未发生变化,则服务器返回 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 中重要的概念。
- 闭包(Closure):闭包是指有权访问另一个函数作用域中的变量的函数。简单来说,
闭包就是函数和声明该函数的词法环境的组合
。闭包能够记住并访问其声明时的作用域,即使在函数外部被调用也可以访问到。闭包的一个常见用途是创建私有变量,它可以通过闭包隐藏内部状态,只暴露一些公共接口。 - 原型(Prototype):在 JavaScript 中,每个对象都有一个原型。
原型是一个对象,其他对象可以通过它来继承属性和方法
。当你访问一个对象的属性或方法时,如果这个对象本身没有这个属性或方法,JavaScript 引擎会去它的原型上查找,如果原型上也没有,就会继续查找原型的原型,直到找到或者到达原型链的末尾。 - 原型链(Prototype Chain):原型链是由对象的原型组成的链式结构。
当一个对象在查找属性或方法时,如果自身没有,它会通过原型链向上查找,直到找到或者到达原型链的末尾(Object.prototype)
。原型链是 JavaScript 实现继承的机制之一,可以让对象共享原型的属性和方法。
这些概念相互关联并且在 JavaScript 中非常重要。深入了解它们将有助于更好地理解和使用 JavaScript。
箭头函数和普通函数的区别
箭头函数和普通函数在语法和功能方面有一些区别:
- 语法:箭头函数使用箭头(=>)来定义函数,而普通函数使用 function 关键字来定义函数。
- this 绑定:箭头函数没有自己的 this 绑定,它会捕获所在上下文的 this 值,可以理解为箭头函数的 this 值是词法上下文的绑定。而普通函数的 this 值是在运行时动态绑定的。
arguments
对象:箭头函数没有自己的 arguments 对象,但它可以访问外部作用域中的 arguments 对象。普通函数可以直接访问自己的 arguments 对象。- 构造函数:箭头函数不能用作构造函数,因为箭头函数没有自己的 this 值,无法使用 new 关键字来创建对象。而普通函数可以用作构造函数来创建对象。
- 返回值:箭头函数的返回值会直接作为函数的返回值,不需要使用 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 的状态转换只会发生一次。