在前端开发中,缓存是提高网站性能的重要手段之一。当浏览器请求JavaScript文件时,如果服务器响应设置了正确的缓存头信息,浏览器就可以将文件缓存到本地,下次请求时直接从缓存中读取,减少了网络请求时间,提升了用户体验。
缓存的类型
浏览器缓存分为两种类型:强缓存和协商缓存。
强缓存
强缓存是指浏览器在第一次请求资源时,在响应头中设置Cache-Control
或Expires
字段,告诉浏览器该资源可以被缓存多久时间。在过期前再次请求该资源时,浏览器会直接从缓存中读取,不会向服务器发送请求。
Cache-Control
Cache-Control
是HTTP/1.1引入的缓存控制机制。常用的值有:
max-age=<seconds>
:指定资源的最大缓存时间,单位为秒。no-cache
:表示必须先与服务器确认资源是否过期才能使用缓存。no-store
:表示禁止缓存,每次都需要向服务器请求资源。
Expires
Expires
是HTTP/1.0定义的缓存控制机制,它指定一个具体的过期时间点。但由于客户端和服务器时间可能不同,所以该字段的精度不能保证。
协商缓存
当资源过期后,浏览器可以向服务器发送一个请求,询问该资源是否有更新。如果服务器响应返回的304 Not Modified
状态码,表示该资源没有变化,浏览器就可以继续使用本地缓存。
协商缓存的实现需要借助以下两个HTTP头:
Last-Modified / If-Modified-Since
服务器在响应头中添加Last-Modified
字段,表示该资源的最后修改时间。当浏览器再次请求该资源时,会将If-Modified-Since
字段设置为上次缓存的Last-Modified
值,告诉服务器只有在该时间之后修改的资源才需要重新传输。
ETag / If-None-Match
ETag
是服务器为每个资源生成的唯一标识符,也可以用于协商缓存。当浏览器再次请求该资源时,在请求头中添加If-None-Match
字段,值为上次缓存的ETag
值。如果服务器检测到该资源未发生变化,则返回304 Not Modified
状态码。
如何开启缓存
在Node.js中,可以通过设置响应头来控制缓存:
-- -------------------- ---- ------- ----- ---- - ---------------- ----- -- - -------------- ----------------------- ---- -- - ----- ---- - ----------- ----------------- ----- ----- -- - -- ----- - ------------------- ------------- --- --------- - ---- - ----- ----- - ------------------ ----- ------------ - -------------------------- ----- ---- - --------------------------------------------- ------------------------------ ---------------- ------------------------------ -------------- --------------------- ------ ----------------------------------- --- ------------ -- ---------------------------- --- ------ ------------------- ---------- ----- - ------------------ - --------------- ----------------- --- -------------- - - --- ----------------
以上代码展示了如何在Node.js中设置缓存头信息,其中Cache-Control
字段指定了资源的最大缓存时间为1小时,Last-Modified
和ETag
字段用于
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/14863