网站 cache control 最佳实践
推荐阅读:
有时,当第二次访问网站时,看起来比较怪,样式不正常。
通常,是因为 cache control 缓存控制策略定义不正确,导致服务端最新部署之后客户端没有接收到最新的更改。
本文将向您展示正确的缓存设置,以便在每次部署后使所有用户的网站保持最新状态。
缓存在后台如何工作?
浏览器为了提高性能,向服务器请求资源时,都尽量多从本地缓存获取,尽量少从服务器获取。
具体行为我们可以通过指令来控制,通过设置 HTTP 响应头来实现。
缓存处理相关的最常用指令包括:
- Cache-Control
- Expires
- Etag
- Last-Modified
如果没有设置缓存控制指令,浏览器将从服务器获取每个资源,这会增加页面的加载时间。
没有缓存设置的请求流程:
由浏览器决定如何在没有服务器指示的情况下缓存信息。
不同浏览器策略不同,例如 Chrome 和 Safari 每次都从后端下载数据。
为了清楚地定义缓存的处理方式,让我们深入了解一下缓存控制指令。
Etag(实体标签)
Etag 可以让我们在不用下载资源的情况下,就知道服务器上的资源是否变更了。
服务器在给浏览器发送资源文件时(例如 css 文件),会对此资源内容计算出一个 hash 值,作为此文件的 tag,一起发送给浏览器。
浏览器下次请求此资源文件时,先把这个 tag 发给服务器,HTTP header 信息例如:
If-None-Match: W/“1d2e7–1648e509289”
服务器和本地文件的 hash 值对比。
如果一样,就告诉浏览器没有变化,可以使用缓存文件,否则浏览器下载新文件。
使用Etag请求流-第一次加载:
使用Etag请求流-第二次加载:
启用 Etag 缓存策略后,我们总是会去服务器检查文件的哈希值,然后浏览器才会决定从缓存中提取文件或将其完全加载。
如果未修改,则无论您要请求的是10KB还是10MB的文件,只需80–100字节即可进行验证。
Last Modified
服务器有每个文件的最后修改时间戳,在第一次文件加载之后,客户端会向服务器询问此文件在某时间之后是否更改过。
HTTP header 信息例如:
If-Modified-Since: Fri, 13 Jul 2018 10:49:23 GMT
如果改了,就下载新文件,否则使用缓存。
看着挺好,但现实情况并不一定是这样的,“Last-Modified” 是一个弱缓存头信息,浏览器有自己的缓存策略,会自行决定是否从缓存中获取资源或下载新文件,不同浏览器处理方式也不一样。
使用 Last-Modified 的请求流程 - 第一次加载:
使用 Last-Modified 的请求流程 - 第二次加载(完美情况):
使用 Last-Modified 的请求流程 - 第二次加载(通常情况):
所以,“Last-Modified” 是不可靠的,我宁愿完全不使用他。
Cache-Control max-age
这个指令告诉浏览器此文件在本地缓存多长时间。
以秒为单位,形式为:
Cache-Control: max-age=31536000
使用此策略后,浏览器完全不用向服务器发起请求了,直接使用本地缓存,非常快。
但是,没有办法确保这段时间内服务器中的文件不会修改。
因此,为了让浏览器下载最新的文件,我们可以使用一些构建工具,例如 Webpack、Gulp。
每个文件都在服务器中进行预编译,对文件内容进行 hash 计算,把 hash 值添加到文件名中,例如 “app-72420c47cc.css”。
这样,文件内容的变化就可以反应在文件名上,对浏览器来讲就是一个新的文件,旧文件的缓存也就没有了,会从服务器上获取新的。
这个方法适用于 CSS JS 和图片文件。
no-cache
no-cache(无缓存)不意味着根本没有缓存,它只是告诉浏览器在使用缓存之前先验证服务器上的资源。
需要与 Etag 一起使用,因此浏览器将发送一个简单请求并加载额外的80个字节以验证文件的状态。
对于 HTML 文件,就需要使用 “no-cache”。
最终方案
使用 Gulp,Webpack 这类工具将唯一的哈希值添加到 css,js 和图像文件(如app-67ce7f3483.css)。
对于 js,css 和图像文件,设置 Cache-Control:public,max-age = 31536000,不设置 Etag 和 Last-Modified。
对于 HTML 文件,设置 Cache-Control: no-cache 和 Etag。
翻译整理自:
网站 cache control 最佳实践的更多相关文章
- Google的网站性能优化最佳实践
网站性能最佳实践 当描述一个web页面的页面速度,评价的一致性遵循许多不同的规则.这些规则是任何阶段的web开发可以应用的前端最佳实践.这个文档的每个规则都陈述于此,无论你是否运行页面测速工具-- ...
- 【读书笔记】读《高性能网站建设指南》及《高性能网站建设进阶指南:Web开发者性能优化最佳实践》
这两本书就一块儿搞了,大多数已经理解,简单做个标记.主要对自己不太了解的地方,做一些记录. 一.读<高性能网站建设指南> 0> 黄金性能法则:只有10%~20%的最终用户响应时间 ...
- 最佳实践:Windows Azure 网站 (WAWS)
编辑人员注释:本文章由 Windows Azure 网站团队的项目经理Sunitha Muthukrishna 撰写. Windows Azure 网站 (WAWS) 允许您在 Windows ...
- 新书:《Liferay Portal 6.1最佳实践门户网站建设》
新书:<Liferay Portal 6.1最佳实践门户网站建设> <Liferay Portal 6.1门户站点建设最佳实践>是国内第一本全面介绍Liferay Port ...
- 京东前端:PhantomJS 和NodeJS在网站前端监控平台的最佳实践
1. 为什么需要一个前端监控系统 通常在一个大型的 Web 项目中有很多监控系统,比如后端的服务 API 监控,接口存活.调用.延迟等监控,这些一般都用来监控后台接口数据层面的信息.而且对于大型网站系 ...
- Guava Cache 原理分析与最佳实践
前言 目前大部分互联网架构 Cache 已经成为了必可不少的一环.常用的方案有大家熟知的 NoSQL 数据库(Redis.Memcached),也有大量的进程内缓存比如 EhCache .Guava ...
- [转]ASP.NET MVC 4 最佳实践宝典
原文:http://www.cnblogs.com/sonykings/archive/2013/05/30/3107531.html ASP.NET MVC最佳实践 本文档提供了一套旨在帮助创建最佳 ...
- (转)调优 DB2 UDB v8.1 及其数据库的最佳实践
原文:https://www.ibm.com/developerworks/cn/data/library/techarticles/dm-0404mcarthur/index.html 简介 性能是 ...
- memcache的最佳实践方案
1.memcached的基本设置 1)启动Memcache的服务器端 # /usr/local/bin/memcached -d -m 10 -u root -l 192.168.0.200 -p 1 ...
随机推荐
- linux平台依赖性
每个电脑平台有其自己的特点, 内核设计者可以自由使用所有的特性来获得更好的性能. in the target object file ??? 不象应用程序开发者, 他们必须和预编译的库一起连接他们的代 ...
- sparksql 练习题两道
第一题:select '{"id":1,"name":{"url":"http://xxx/yyy/zz/test.js" ...
- apk混淆打包和反编译(转)
前面有人写过了,我就直接引用了,大家就不乱找了.以后有问题再继续更新. 一.混淆打包.编译 1.Android 代码混淆.http://blog.csdn.net/zjclugger/article/ ...
- HRegion 分配与寻址
1.Region 分配 HMaster负责为Region 分配Region Server,一个Region 只能分配给一个Region server. HMaster中 记录: 哪些Regio ...
- csredis-in-asp.net core理论实战-主从配置、哨兵模式
csredis GitHub https://github.com/2881099/csredis 看了github上的开源项目,上面真的只是单纯的使用文档,可能对于我这种人(菜鸟)就不太友好, 我知 ...
- JDK源码那些事儿之浅析Thread上篇
JAVA中多线程的操作对于初学者而言是比较难理解的,其实联想到底层操作系统时我们可能会稍微明白些,对于程序而言最终都是硬件上运行二进制指令,然而,这些又太过底层,今天来看一下JAVA中的线程,浅析JD ...
- Web_telnet 通过JAVA实现网页上面的命令行远程工具 以及对于流的理解
前言 这几天研究了一下如何在web页面上通过telnet 连接一个远程的机器,通过命令行进行控制,让然,B/S架构的项目,如果直接通过 浏览器是无法和远程机器进行通信的,我们就得借助后端来帮助实现这样 ...
- [梁山好汉说IT] 容器概念在北宋社会的应用
[梁山好汉说IT] 容器概念在北宋社会的应用 0x00 摘要 如何对没有软件开发经验的人解释容器? 集装箱真的能够完美解释容器嘛? 除了集装箱还有其他常见实体能够解释容器嘛? 我找到了一个能够 和集装 ...
- SpringMVC||IQ
Here's question about springmvc 1.Springmvc spring Web MVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架,即 ...
- 浅谈Java的默认和静态方法
目录 浅谈Java的默认和静态方法 Java新增默认方法有啥用 Java新增的静态方法有啥用 浅谈Java的默认和静态方法 允许在接口中声明默认方法和静态方法,是JDK1.8新增的特性.存在即合理,两 ...