Expires和Cache-Control

最新推荐文章于 2024-03-30 13:29:16 发布

weixin_34112181

最新推荐文章于 2024-03-30 13:29:16 发布

阅读量272

点赞数

原文链接：http://www.cnblogs.com/leftJS/p/11083137.html

版权

本文原链接：https://blog.csdn.net/zhouziyu2011/article/details/71312452

浅谈前端性能优化（一）——Expires和Cache-Control

2017年05月07日 11:57:05 筱葭阅读数 9476

前端性能优化中，减少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

转载于:https://www.cnblogs.com/leftJS/p/11083137.html