浅谈前端性能优化(一)——Expires和Cache-Control
2017-05-07 11:57
288 查看
前端性能优化中,减少HTTP请求可以提高页面的响应速度。
浏览器在第一次访问页面时向服务器请求资源,并缓存起来,下次再访问时会判断在缓存中是否已有该资源且有没有更新过,如果已有该资源且未更新过,则直接从浏览器缓存中读取。原理:通过HTTP 请求头中的 If-Modified-Since(If-No-Match) 和响应头中的Last-Modified(ETag)来实现,HTTP请求把 If-Modified-Since(If-No-Match)传给服务器,服务器将其与Last-Modified(ETag)对比,若相同,则文件没有被改动过,则返回304,直接浏览器缓存中读取资源即可。
问题:虽然该方法减少了已缓存资源的下载时间,但仍然发起了一次http请求。
解决:已缓存资源不再发起http请求,即HTTP的Expires和Cache-Control。对一个网站而言,CSS、JavaScript、图片等静态资源更新的频率都比较低,而这些文件又几乎是每次HTTP请求都需要的,如果将这些文件缓存在浏览器中,可以极好的改善性能。通过设置http头中的cache-control和expires的属性,可设定浏览器缓存,将静态内容设为永不过期,或者很长时间后才过期。
1、Cache-Control
Cache-Control属性是在服务器端配置的,不同的服务器有不同的配置,apache、nginx、IIS、tomcat等配置都不尽相同。
以Apache为例,在http.conf中做如下配置:
<filesMatch ”.(jpg|jpeg|png|gif|ico)$”>
Header set Cache Control max-age=16768000,public
</filesMatch>
<filesMatch ”.(css|js)$”>
Header set Cache Control max-age=2628000,public
</filesMatch>
问题:浏览器缓存的资源,若又想更新资源,如何实现?
解决:通过修改该资源的名称来实现。修改了资源名称,浏览器会当做不同的资源。
2、Expires
Expires属性也是在服务端配置的,具体的配置也根据服务器而定。
问题:可能存在客户端时间跟服务端时间不一致的问题。
解决:建议Expires结合Cache-Control一起使用。
3、测试实例:
1) 未使用expires和cache-control的测试demo:
打开网址:http://stevesouders.com/hpws/expiresoff.php
2) 使用expires和cache-control的测试demo:
打开网址:http://stevesouders.com/hpws/expireson.php
浏览器在第一次访问页面时向服务器请求资源,并缓存起来,下次再访问时会判断在缓存中是否已有该资源且有没有更新过,如果已有该资源且未更新过,则直接从浏览器缓存中读取。原理:通过HTTP 请求头中的 If-Modified-Since(If-No-Match) 和响应头中的Last-Modified(ETag)来实现,HTTP请求把 If-Modified-Since(If-No-Match)传给服务器,服务器将其与Last-Modified(ETag)对比,若相同,则文件没有被改动过,则返回304,直接浏览器缓存中读取资源即可。
问题:虽然该方法减少了已缓存资源的下载时间,但仍然发起了一次http请求。
解决:已缓存资源不再发起http请求,即HTTP的Expires和Cache-Control。对一个网站而言,CSS、JavaScript、图片等静态资源更新的频率都比较低,而这些文件又几乎是每次HTTP请求都需要的,如果将这些文件缓存在浏览器中,可以极好的改善性能。通过设置http头中的cache-control和expires的属性,可设定浏览器缓存,将静态内容设为永不过期,或者很长时间后才过期。
1、Cache-Control
Cache-Control属性是在服务器端配置的,不同的服务器有不同的配置,apache、nginx、IIS、tomcat等配置都不尽相同。
以Apache为例,在http.conf中做如下配置:
<filesMatch ”.(jpg|jpeg|png|gif|ico)$”>
Header set Cache Control max-age=16768000,public
</filesMatch>
<filesMatch ”.(css|js)$”>
Header set Cache Control max-age=2628000,public
</filesMatch>
问题:浏览器缓存的资源,若又想更新资源,如何实现?
解决:通过修改该资源的名称来实现。修改了资源名称,浏览器会当做不同的资源。
2、Expires
Expires属性也是在服务端配置的,具体的配置也根据服务器而定。
问题:可能存在客户端时间跟服务端时间不一致的问题。
解决:建议Expires结合Cache-Control一起使用。
3、测试实例:
1) 未使用expires和cache-control的测试demo:
打开网址:http://stevesouders.com/hpws/expiresoff.php
2) 使用expires和cache-control的测试demo:
打开网址:http://stevesouders.com/hpws/expireson.php
相关文章推荐
- 前端性能优化之 gzip+cache-control
- Web前端性能优化教程03:添加Expires头
- 浅谈前端性能优化(八)——cookie优化
- 前端性能优化:Add Expires headers
- 浅谈前端性能优化(六)——CDN内容分发网络
- 浅谈前端性能优化(PC版)
- 浅谈移动前端性能优化
- 浅谈前端性能优化(七)——图像优化
- 前端性能优化--为什么DOM操作慢? 浅谈DOM的操作以及性能优化问题-重绘重排 为什么要减少DOM操作 为什么要减少操作DOM
- 浅谈前端性能优化
- 浅谈移动前端性能优化(转)
- 浅谈前端性能优化(九)——DNS解析优化
- 性能优化,浅谈ASP.NET中的经典性能优化方案,并对大家常用的方案进行一下注释和质疑
- 浅谈hibernate性能优化的几点建议
- 悟道web标准:前端性能优化
- 前端优化之-设置较长的expires
- Uedsky HtmlCompressor v1.0发布(前端性能优化之Html压缩)
- HTTP头的Expires与Cache-control
- 传说中的军规:网站前端和后台性能优化的34条经验和方法
- HTTP头的Expires与Cache-control