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

更新日期: 2019-03-02阅读: 2.7k标签: 缓存

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

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

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


强缓存

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

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

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


协商缓存

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

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


缓存判断流程


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


链接: https://fly63.com/article/detial/2170

浏览器缓存_HTTP强缓存和协商缓存

浏览器缓存主要分为强强缓存(也称本地缓存)和协商缓存(也称弱缓存),强缓存是利用http头中的Expires和Cache-Control两个字段来控制的,用来表示资源的缓存时间。协商缓存就是由服务器来确定缓存资源是否可用.

angularjs 缓存详解

一个缓存就是一个组件,它可以透明地存储数据,以便未来可以更快地服务于请求。缓存能够服务的请求越多,整体系统性能就提升得越多。

浏览器缓存问题原理以及解决方案

浏览器缓存就是把一个已经请求过的Web资源(如html页面,图片,js,数据等)拷贝一份副本储存在浏览器中,为什么使用缓存:减少网络带宽消耗,降低服务器压力,减少网络延迟,加快页面打开速度

Web缓存相关知识整理

一个H5页面在APP端,如果勾选已读状态,则下次打开该链接,会跳过此页面。用到了HTML5 的本地存储 API 中的 localStorage作为解决方案,回顾了下Web缓存的知识

使用缓存加速之后的网站访问过程变化

在描述CDN的实现原理之前,让我们先看传统的未加缓存服务的访问过程,以便了解CDN缓存访问方式与未加缓存访问方式的差别,用户访问未使用CDN缓存网站的过程为:用户向浏览器提供要访问的域名;

html页面清除缓存

页面打开时,由于缓存的存在,刚刚更新的数据有时无法在页面得到刷新,当这个页面作为模式窗口被打开时问题更为明显, 如何将缓存清掉?

HTTP之缓存 Cache-Control

通过在Response Header设置Cache-Control head 信息可以控制浏览器的缓存行为。我们先来看一下Cache-Control可以设置哪些值:缓存头Cache-Control只能在服务端设置,在客户端是由浏览器设置的,自己不能修改它的值。

前端静态资源自动化处理版本号防缓存

浏览器会默认缓存网站的静态资源文件,如:js文件、css文件、图片等。缓存带来网站性能提升的同时也带来了一些困扰,最常见的问题就是不能及时更新静态资源,造成新版本发布时用户无法及时看到新版本的变化,严重影响了用户体验。

vue后台管理系统解决keep-alive页面路由参数变化时缓存问题

一个后台管理系统,一个列表页A路由配置需要缓存,另一个页面B里面有多个跳转到A路由的链接。问题描述:首先访问/A?id=1页面,然后到B页面再点击访问A?id=2的页面,发现由于页面A设置了缓存,数据还是id=1的数据,并没有更新。

缓存命中率过低;大量缓存项同时刷新;刷新同一个缓存项

缓存的作用是在内存中临时存储来自外部系统(如数据库)的数据,以便让请求更快的得到响应。如果请求数据在缓存中不存在,或者已经超时失效,那么也要从外部系统查询,然后放入缓存中,这个过程叫刷新缓存。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!