缓存JavaScript文件的重要性

阅读时长 4 分钟读完

在前端开发中,缓存是提高网站性能的重要手段之一。当浏览器请求JavaScript文件时,如果服务器响应设置了正确的缓存头信息,浏览器就可以将文件缓存到本地,下次请求时直接从缓存中读取,减少了网络请求时间,提升了用户体验。

缓存的类型

浏览器缓存分为两种类型:强缓存和协商缓存。

强缓存

强缓存是指浏览器在第一次请求资源时,在响应头中设置Cache-ControlExpires字段,告诉浏览器该资源可以被缓存多久时间。在过期前再次请求该资源时,浏览器会直接从缓存中读取,不会向服务器发送请求。

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-ModifiedETag字段用于

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/14863

纠错
反馈