node强缓存和协商缓存实战示例

目录
  • 前言
  • 什么是浏览器缓存
    • 优点
  • 强缓存
    • Expires
    • Cache-Control
  • 协商缓存
    • Last-Modified、If-Modified-Since
    • ETag、If-None-Match
  • node实践
    • koa启动服务
      • 创建项目
      • koa代码
      • 启动服务
    • 原生koa实现简易静态资源服务
      • 定义资源类型列表
      • 解析请求的资源类型
      • fs读取文件
      • koa处理
    • 强缓存验证
      • 设置Expire
        • Cache-Control
      • 协商缓存验证
        • Last-Modified,If-Modified-Since
        • etag、If-None-Match
      • 小结
      • 总结

        前言

        浏览器缓存是性能优化非常重要的一个方案,合理地使用缓存可以提高用户体验,还能节省服务器的开销。掌握好缓存的原理和并合理地使用无论对前端还是运维都是相当重要的。

        什么是浏览器缓存

        浏览器缓存(http 缓存) 是指浏览器在本地磁盘对用户最近请求过的文档进行存储,当访问者再次访问同一页面时,浏览器就可以直接从本地磁盘加载文档。

        优点

        减少了冗余的数据传输,节省带宽,减少服务器压力

        加快了客户端加载速度,提升用户体验。

        强缓存

        强缓存不会向服务器发送请求,而是直接从缓存中读取资源,强缓存可以通过设置www.cppcns.com两种 HTTP Header 实现:Expires 和 Cache-Control,这两个头部分别是HTTP1.0和HTTP1.1的实现。

        Expires

        Expires是HTTP1.0提出的一个表示资源过期时间的header,它描述的是一个绝对时间,由服务器返回。

        Expires 受限于本地时间,如果修改了本地时间,就会造成缓存失效。

        Cache-Control

        Cache-Control 出现于 HTTP/1.1,常见字段是max-age,单位是秒,很多web服务器都有默认配置,优先级高于Expires,表示的是相对时间。

        例如Cache-http://www.cppcns.comControl:max-age=3600 代表资源的有效期是 3600 秒。取的是响应头中的 Date,请求发送的时间,表示当前资源在 Date ~ Date +3600s 这段时间里都是有效的。Cache-Control 还拥有多个值:

        • no-cache 不直接使用缓存,也就是跳过强缓存。
        • no-store 禁止浏览器缓存数据,每次请求资源都会向服务器要完整的资源。
        • public 可以被所有用户缓存,包括终端用户和 CDN 等中间件代理服务器。
        • private 只允许终端用户的浏览器缓存,不允许其他中间代理服务器缓存。

        要注意的就是no-cache和no-store的区别,no-cache是跳过强缓存,还是会走协商缓存的步骤,而no-store是真正的完全不走缓存,所有资源都不会缓存在本地

        协商缓存

        当浏览器对某个资源的请求没有命中强缓存,就会发一个请求到服务器,验证协商缓存是否命中,如果协商缓存命中,请求响应返回的http状态为304并且会显示一个Not Modified的字符串。

        协商缓存用的是【Last-Modified,If-Modified-Since】和【ETag、If-None-Match】这两对Header来管理的。

        注意!!协商缓存需要配合强缓存使用,使用协商缓存需要先设置Cache-Control:no-cache或者pragma:no-cache来告诉浏览器不走强缓存

        Last-Modified、If-Modified-Since

        这两个Header是HTTP1.0版本提出来的,两个字段配合使用。

        Last-Modified 表示本地文件最后修改日期,浏览器会在请求头带上If-Modified-Since(上次返回的Last-Modified的值),服务器会将这个值与资源修改的时间匹配,如果时间不一致,服务器会返回新的资源,并且将 Last-Modified 值更新,作为响应头返回给浏览器。如果时间一致,表示资源没有更新,服务器返回 304 状态码,浏览器拿到响应状态码后从本地缓存中读取资源。

        但Last-Modified有几个问题。

        • 文件虽然被修改了,但最终的内容没有变化,这样文件修改时间还是会被更新
        • 有的文件修改频率在秒以内,这时候以秒粒度来记录就不够了

          node强缓存和协商缓存实战示例

        扫一扫手机访问