由于项目越来越大,即使了使用代码压缩工具减少文件大小,js文件还是不可避免的越变越大。而对于用户来说每次重新下载都有可能会消耗大量时间,让我们的首屏展示有较长时间的空白。为了提升网站性能,有效利用缓存能够提升用户体验,提高访问效率。
http-equiv属性,相当于http的文件头中的参数,而content的内容则是对应参数的值
<!-- 告诉浏览器不缓存当前页面 --><meta http-equiv="pragma" content="no-cache">
然而设置pragma: no-cache
并不能应用于HTTP1.1及以上规范,
而且因为这个方法太老了,如果你不需要估计那些史前客户的感受,完全可以不加?
当然可以不用太方,还有其他的参数可以选择使用
<meta http-equiv="Cache-Control" content="no-cache" /> <!-- HTTP1.1 在1.1中优先于expires--><meta http-equiv="pragma" content="no-cache" /> <!-- HTTP1.0 --><meta http-equiv="Expires" content="0" /> <!-- 示意到期时间 HTTP1.0 & 1.1 -->
但是使用meta标签设置的参数优先级低于http请求中声明的,如果你同时设置了http头,那么就没有必要加上meta标签了。
当然,最后还有一个重要的一点,就是根据叉烧包的实验,meta制定这些内容可以说基本没有什么卵用:) 悲伤的故事……当然可能你的浏览器还可以用哦
最保险的显然是配置Header参数来保证资源的缓存
它的缺点就是如果服务器与客户端误差较大,那么它的误差也会变大
ETag通常是服务器生成的文件内容的哈希值或某个其他指纹。如果请求时指纹仍然相同,则表示资源未发生变化,则可跳过下载。
HTTP 1.0
客户端,那么你可以无视Pragma
Cache-Control: no-store, must-revalidateExpires: 0
HTTP 1.0
代理,那么你可以无视Expires
Cache-Control: no-store, must-revalidate
Date
标头,则理论上也可以省略Cache-Control
,并仅依赖于Expires
。不过如果客户端和服务端时间有差别,就可能会失败哦Date: Wed, 24 Aug 2016 18:32:02 GMTExpires: 0
Cache-Control
最妥妥的(如果不打算考虑HTTP 1.0
)在项目中,当我们使用本地缓存后又会遇到另一个问题——如何更新文件、弃用缓存。 通常,我们通过对文件名加入指纹来实现。
以webpack为例, 写配置文件时
{ output: { filename: "bundle.[hash].js"
}
}
为打包后的文件名加上hash,使文件更新之后会生成新的hash,以达到弃用原来缓存的效果。
可以为不同类型的文件定义不同的缓存策略,以达到最高效的结果