Web前端性能优化教程03:添加Expires头
2016-10-08 14:45
417 查看
本文是Web前端性能优化系列文章中的第三篇,主要讲述添内容:加Expires头。完整教程可查看:[b][b]Web前端性能优化[/b][/b]
什么是Expires头?
Expires存储的是一个用来控制缓存失效的日期。当浏览器看到响应中有一个Expires头时,它会和相应的组件一起保存到其缓存中,只要组件没有过期,浏览器就会使用缓存版本而不会进行任何的HTTP请求。Expires设置的日期格式必须为GMT(格林尼治标准时间)。
HTTP1.1协议中缓存的另一种选择
Expires存在着明显的不足。
首先,Expires头使用的是一个特定的时间,要求客户端和服务器端的时钟严格同步。何为严格同步?我们知道客户端的时间是可以修改的,如果服务器和客户端的时间不统一,这就导致有可能出现缓存提前失效的情况,存在不稳定性。其次,假如Expires的日期到来了,那么还需要在服务器配置中提供一个新的日期。
面对这种情况,HTTP1.1引入了Cache-Control头来克服Expires头的限制。Cache-Control使用max-age制定组件被缓存多久,使用秒为单位,例如Cache-Control:max-age=3600;表示组件将被缓存60分钟。如果max-age和Expires同时出现,则max-age有更高的优先级,浏览器会根据max-age的时间来确认缓存过期时间。
Cache-Control除了可以设置max-age之外,还可以同时设置其他标签。如下图所示常用标签:
如何配置过期缓存?
在ASP.NET下,可以通过web.config文件来配置缓存。
<!--单独配置Expires-->
<system.webServer>
<staticContent>
<clientCache cacheControlMode="UseExpires" httpExpires="Sun, 29 Mar 2020 00:00:00 GMT"/><!--表示过期时间为2020年3月29号-->
</staticContent>
</system.webServer>
<!--单独配置max-age-->
<system.webServer>
<staticContent>
<clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="30.00:01:00"/><!--表示过期时间为(30*24*60*60+60)s后-->
</staticContent>
</system.webServer>
相关文章推荐
- Web前端性能优化教程07:精简JS 移除重复脚本
- Web前端性能优化(三)添加Expires头
- Web前端性能优化教程01:减少Http请求
- Web前端性能优化教程02:使用内容分发网络
- Web前端性能优化教程04:压缩组件
- Web前端性能优化教程05:网站样式和脚本
- webpack学习教程之前端性能优化总结
- Web前端性能优化教程06:减少DNS查找、避免重定向
- Web前端性能优化教程08:配置ETag
- Web前端性能优化教程09:图像和Cookie优化
- WEB前端性能优化:HTML,CSS,JS和服务器端优化
- WEB前端性能优化常见方法
- 柯南君:教你如何对待大型网站平台的性能优化? 之 五---web 前端性能优化策略(长篇总结)
- Web前端性能优化——如何有效提升静态文件的加载速度
- Web 前端性能优化【转】
- web前端性能优化指南
- Web前端性能优化的14条规则
- Web 前端性能优化相关内容解析
- Web前端性能优化
- web前端性能优化