前端优化之浏览器缓存

为什么80%的码农都做不了架构师？>>>   

    浏览器一般会在用户的文件系统中创建一个目录存放缓存文件，并给每个缓存文件做一些必要的标记，比如过期时间等。不同的浏览器存储缓存的方式也不同。   

    IE浏览器在本地设置了临时文件目录，可以在工具--internet选项中找到对应的路径。firefox是采用二进制文件的方式来存储和管理缓存文件的。在地址栏输入about:cache可以看到相关信息，可以看到firefox不仅用磁盘还使用了内存，使用内存速度更快。打开缓存列表看到了Last modified 和Expires，上次检查时间和过期时间。

浏览器发起请求，web服务器告诉浏览器哪些内容可以缓存，下次请求可以缓存的内容的时候会询问web服务器是否允许使用本地缓存，服务器收到询问后回复浏览器是否允许使用缓存。

Last modified：上次修改时间，刷新页面的时候，浏览器询问web服务器是否在Last modified时间后修改了当前请求文件，如果返回的状态码是304意味着服务器告诉浏览器这个内容没有更新，使用缓存。基于动态内容可以获取http请求中的If-Modified-Since内容，然后和当前时间比较来选择返回304状态还是获取新内容。

<?php
$t = $_SERVER['HTTP_IF_MODIFIED_SINCE'];
if(strtotime($t)+3600 >time()){
  header("HTTP/1.1 304");exit(1);
}
//继续获取新内容
?>

但是如果一个文件更新了，内容却没有变化，或者为了负载均衡分布式存储，每台机器上的同一个文件就很难保证最后修改时间完全相同，切换服务器访问的时候就会重新获取内容。

Etag：由web服务器生成，如果一个内容的Etag没有变，这个内容也没有更新。浏览器获得Etag后下次请求的时候会附加 If-None-Match 询问服务器该内容是否发生变化，服务器通过重新计算并且与Http请求头里面的Etag进行比较，相同返回304。

以上两种方式浏览器都要和web服务器去协商。

Expires：http另外一种标记，告诉浏览器什么时候过期，在该时间之前都可以使用本地缓存。Web服务器默认不对静态内容开启Expires标记支持，需要进行一定的配置（详见google）。我们不能保证服务器时间和本地时间一致，所以这种方式也有弊端。http/1.1提供Cache-Control保级弥补此不足。

Cache-Control:格式为Cache-Control:max-age=<秒>，这个时间是相对于浏览器本地的，静态内容Web服务器会自动添加此标记。动态内容可以在代码中手动添加此标记。当Expires和Cache-Control同时存在浏览器会优先考虑Cache-Control。

转载于:https://my.oschina.net/ozil/blog/121833