工程化——前端静态资源缓存策略

增量更新是目前大部分团队采用的缓存更新方案,能让用户在无感知的情况获取最新内容。具体实现方式通常是(一般我们通过构建工具来实现,比如webpack):

  • 构建产出文件hash(如:index.d94f83fac22c203b788c.css)
  • 更新html文件里静态资源的引用URL

由于其他资源是由html文件直接或间接引用才可以被加载,如果html里的静态资源URL更新了,那请求的肯定就是最新资源了。那我们需要考虑的就是如何确保加载的html是最新的了,其他的静态资源就充分利用浏览器缓存以减少网络请求提高web性能。浏览器缓存实质就是HTTP缓存,而HTTP缓存分为强缓存协商缓存

强缓存

强缓存不会发送请求,直接从浏览器加载资源。是否命中强缓存根据HTTP Response头部ExpiresCache-Controlmax-age)来判断。

  • Expires通过返回一个过期时间来判断是否过期,在此时间之前浏览器直接从缓存加载资源。但其缺点是返回的过期时间为服务器时间,而比较是同客户端时间比较,如果服务端和客户端存在时间误差就不准了。
  • max-age返回的时间过期时间跨度,比如max-age=3600告诉浏览器接下来的1小时内使用缓存。这样就解决了Expires时间误差导致的问题。

强缓存命中优先判断max-agemax-age优先级大于Expires,判断流程如下:

协商缓存

  • EtagIf-None-Match Etag的值是根据一定算法生成的字符串,用以判断文件是否更改,类似于文件hash。在第一次访问时,服务会返回该文件的Etag值,在之后的访问通过在请求头增加If-None-Match参数,把Etag的值带过去,服务器通过比较Etag的值来判断是否需要重新返回最新资源(200 or 304)。
  • Last-ModifiedIf-Modified-Since Last-Modified为该资源文件的最后修改时间。同样在第一次返回,之后通过If-Modified-Since带过去,服务器通过比较值来判断是否需要返回最新资源。

如果 If-None-MatchIf-Modified-Since 都有,则必须一次性都发给服务器,没有优先级,实际中比较ETag就够了。如果请求头里没有,则每次都会返回最新的资源200

缓存判断流程

为了确保html每次都是最新的,我们这里不能使用强缓存。可以在服务器(nginx、tomact)设置访问html文件时Cache-Control为no-cache。(这个需要在服务器配合设置,前端是处理不了的)

原文链接:segmentfault.com

上一篇:markdown-it-regexp
下一篇:精彩代码 vue.js

相关推荐

  • (前端工程化01)私人管家-包管理器

    字数:3883, 阅读时间:10分钟,点击阅读原文 目录: 磨刀篇-开发环境搭建 私人管家-包管理器 待续 包管理器 在很久很久以前,那时候的前端被大家”亲切“的称为“切图仔”,那时前...

    6 个月前
  • (前端工程化01)私人管家-包管理器

    字数:3883, 阅读时间:10分钟,点击阅读原文 目录: 磨刀篇-开发环境搭建 私人管家-包管理器 待续 包管理器 在很久很久以前,那时候的前端被大家”亲切“的称为“切图仔”,那时前...

    6 个月前
  • (前端工程化01)私人管家-包管理器

    字数:3883, 阅读时间:10分钟,点击阅读原文 包管理器 在很久很久以前,那时候的前端被大家”亲切“的称为“切图仔”,那时前端的工作非常简单,仅仅只是将设计图还原,然后加上一些交互和...

    6 个月前
  • 马蜂窝推荐系统容灾缓存服务的设计与实现

    数据库突然断开连接、第三方接口迟迟不返回结果、高峰期网络发生抖动...... 当程序突发异常时,我们的应用可以告诉调用方或者用户「对不起,服务器出了点问题」;或者找到更好的方式,达到提升用户体验的目的...

    2 年前
  • 项目中资源缓存机制实践(静态资源和本地数据缓存)

    网络资源的缓存 核心方案 HTML文件 no-cache js,css文件 时间戳/哈希/版本号,长缓存 图片资源 长缓存,更新时使用新链接地址 1. 前后端未分离,且未引入构建工具的项目 方...

    1 年前
  • 页面缓存相关问题,部份页面使用缓存解决方法

    页面部份: <el-main> <!-- 使用单页组件缓存 --> <keep-alive v-if="$route.meta.keepAlive"&g...

    3 个月前
  • 面试官问我:说说你对浏览器缓存的理解

    缓存类型 强缓存 定义: 当发起HTTP请求时,不会向服务器进行请求,只要当前时间在缓存有效期内,则直接从客户端缓存中获得,当缓存过期之后,才会真正想服务器发起请求重新获得资源。

    4 个月前
  • 面向校招 HTTP与前端缓存知识点总结

    一. 基础概念 HTTP 特点 简单快速:请求服务时,只需传送请求方法和路径 灵活:允许传输任意类型的数据对象,由 Content-Type 标记 无连接:服务端处理完请求就断开连接 无状态:意味着...

    9 个月前
  • 除夕小谈浏览器缓存

    更好的阅读体验 => 点击文末左下角的阅读原文 什么是浏览器缓存? Browser Caching 是浏览器将网络资源存储在本地的一种行为。优点有: 减少冗余数据的传输 减轻服务器的压力...

    2 年前
  • 防止浏览器缓存ajax调用结果

    Mark BellSalamander2007提出了一个问题:Prevent browser caching of jQuery AJAX call result,或许与您遇到的问题类似。

    3 年前

官方社区

扫码加入 JavaScript 社区