1 min read

Web 前端优化 – 缓存页面组件

在 Web 前端优化里,缓存页面组件是很重要的一项。不常改动的图片、CSS 、JavaScript 文件等,可以缓存在浏览器中,这样,用户再次访问时,浏览器直接从缓存中读取文件,一来减少浏览器请求数,加快用户访问速度,二来服务器需要返回的内容少了,减轻服务器负担。

设置方法

缓存页面组件的方法有多种,这一种是修改 HTTP 头。

假设服务器是 Apache,可以通过配置 .htaccess 文件来启用缓存:

<IfModule mod_expires.c>
    # 启用缓存
    ExpiresActive On

    #默认缓存时间为 1 天
    ExpiresDefault "access plus 1 day"

    #图片的缓存时间设置为一周
    ExpiresByType image/x-icon "access plus 7 days"
    ExpiresByType image/jpeg "access plus 7 days"
    ExpiresByType image/png "access plus 7 days"
    ExpiresByType image/gif "access plus 7 days"


    ExpiresByType application/x-shockwave-flash "access plus 7 days"

    #CSS 的缓存时间也设置成一周
    ExpiresByType text/css "access plus 7 day"

    #Javascript 的缓存时间同样设置为一周
    ExpiresByType text/javascript "access plus 7 day"
    ExpiresByType application/x-javascript "access plus 7 day"


    ExpiresByType text/html "access plus 10 minutes"
    ExpiresByType application/xhtml+xml "access plus 10 minutes"
</IfModule>
<IfModule mod_headers.c>
    #设置代理缓存
  <FilesMatch "\.(js|css|xml|gz|html)$">
    Header append Vary: Accept-Encoding
  </FilesMatch>
</IfModule>

以上配置针对不同类型文件设置不同有效期限,比如 jpeg/png/gif 图片,从用户第一次访问算起,7 天内有效,如果用户在 7 天内还访问这个网站,则直接从浏览器缓存中读取该图片,无需服务器上再返回。

打开 firebug,启用 Net 面板,刷新页面,如果看到有返回状态码 304 Not Modified 的文件,说明设置成功。

参考

  1. w3 – caching in http
  2. cache docs
  3. Apache mod_expires
  4. Apache mod_headers
报告问题 修订

如果你有自建 https 代理的需求,欢迎尝试 Phantom,一键搭建,方便快捷。查看 demo