高性能建设指南-3.添加Expires头

1简介--在服务器端

1.1添加Expires头，可以最大化地利用浏览器的缓存能力来改善页面的性能。

1.2长久的Expires头最常用于图片，但应该将其用在所有组件上，包括脚本、样式表和Flash。

1.3浏览器（和代理）使用缓存来减少HTTP请求的数量，并减小HTTP响应的大小，使Web页面加载的更快。

1.4Web服务器使用Expires头来告诉Web客户端，它可以使用一个组件的当前副本，知道指定的时间为止。

特别注意：Expires头的限制：因为Expires头需要使用一个特定的时间，它要求服务器和客户端的时钟严格同步。

1.5另一种形式：Cache-Control，HTTP1.1引入的，max-age指令指定组件被缓存多久，以秒为单位。

例：Cache-Control:max-age=315360000  //未来10年刷新

1.6不支持HTTP1.1的浏览器（可能仅占1%以内），利用Expires。

1.7推荐写法：Expires和Cache-Control max-age同时指定。

1.8更加完善的写法：在服务器端mode_expires的Apache模块设置

                           https://my.oschina.net/ososchina/blog/866627

1.9跨浏览器改善缓存的最佳解决方案：使用由ExpiresDefault设置的Expires头。

2空缓存和完整缓存

2.1与页面相关的浏览器缓存的状态，如果组件还没有放在缓存中，称缓存为空；页面中的可缓存组件都在缓存中，称缓存是完整的。

2.2拥有完整缓存的，每天至少访问一次的唯一用户数占40%-60%；带有完整缓存的页面浏览数量为75%-85%。

2.3通过使用长久的Expires头可以增加被浏览器缓存的组件的数量，并在后续页面浏览中重用它们，而无需用户的Internet连接发送一个字节。

3

3.1HTML文档不应该使用Expires头

3.2理论上，页面中所有组件都应该具有长久的Expires头。当文档中的组件都是从浏览器缓存中读取时，响应时间会减少50%或更多。

3.3如果组件是因为经常变化而不被缓存，我们期望看到很近的Last-Modified日期。

3.4 如何设置图片、js/css等缓存--在web服务器上缓存，例如在比如IIS中

     1 选中images/目录，右键属性 - HTTP头 - 选择启用过期- 输入过期时间或时间段。
      2 自定义HTTP头-添加-名称是ETag, 值为空 - 确定

3.5 html5支持离线缓存 https://www.cnblogs.com/wuzhiquan/p/4844258.html

4.修订文件名

4.1为确保用户能获取组件的最新版本，需要在所有的html页面中修改组件的文件名。

4.2解决方案：为所有组件的文件名使用变量--例如将版本号嵌入到文件名中（例yahoo_2.0.6.js），而且在全局映射中修订过的文件名会自动更新。

5 总结

所以说，页面中的组件，应设置长久Expires头，这样其会被缓存，在后续请求时，浏览器直接从硬盘上读取。→为组件添加长久的Expires头