在你的 Rails App 中开启 ETag 加速页面载入同时节省资源

转自http://huacnlee.com/blog/use-etag-in-your-rails-app-to-speed-up-loading/

 

什么是 ETag

网上关于 ETag 的解释有很多，我这里简单的说明一下我的理解：

ETag 是 HTTP 协议的标准参数，一般是这样的：”686897696a7c876b7e” 一段字符，它能通过一段字符来判断浏览器 cache 的内容是否和服务端返回的内容是否相同，从而来决定是否要重新从服务器下载东西 (HTTP 状态 200 - 重新下载 / 304 - 没有更新)。

ETag 使用场景举例

这个东西非常适合用于动态内容上面，以减少不必要的 HTML 下载，达到加速的目的。

比如下面这个场景的例子：

1. 用户访问 /topics/11 页面，TopicsController#show 加载 @topic，并通过 View 生成内容返回
2. 用户来回访问 10 次 /topics/11，可此页面内容无任何变化
3. 过了1天以后，@topic 有了新的回复，用户再次访问的时候，内容变了

上面的场景用户一共访问了 12 次 /topics/11 这个页面，但只有第一次和最后一次才有实质性的内容需要下载的，可在没有 ETag 的情况下面，服务器执行和浏览器下载都是有 12 次，其中的 10 次是多余的。

如果加上 ETag 以后，将会是这样：

1. 用户访问 /topics/11 页面，TopicsController#show 加载 @topic，并通过 View 生成内容返回，并给出目前内容的 ETag: 89vbsn28716
2. 用户带着 ETag: 89vbsn28716 再次访问 /topics/11 ，服务器检查 ETag 与执行结果，发现无变化，返回 304，浏览器直接使用 Cache 的内容渲染页面
3. 过了一天以后，@topic 有了新回复，用户再次带着 ETag: 89vbsn28716 /topics/11，服务器检查 ETag 发现不对了，生成新内容，并返回 200

这个过程中，服务端执行了 12 次页面，而下载 HTML 内容到本地却只有两次。

Rails 里面开启 ETag

Rails 的 ActionController 里面已经为我们提供了 fresh_when 和 stale? 这两个方法用于处理 ETag，可以点击连接稍微看一下说明。

我下面以 Ruby China 的 查看 Wiki 页面 为例子演示如何在 Rails 里面合理的使用 ETag

pages_controller.rb:

1 2 3 4 5 6 7

class PagesController < ApplicationController def show @page = Page.find_by_slug(params[:id]) @comments = @page.comments.paginate(:page => params[:page], :per_page => 50) fresh_when(:etag => [@page, @comments]) end end

加上 fresh_when 方法以后，Rails 将会用 @page 和 @comments 内容的组合的 MD5 hash 值作为 ETag 并与 HTTP Headers 里面的 ETag 进行比较来决定是否需要执行后面的 Views 渲染，并返回 200 或 304。

在浏览器上面显示将会是这样：

没有 ETag 的情况 (72 ms)：

有 ETag 的情况 (40 ms)：

OMG! 页面加载速度直接提升了 46%，并且 ETag 命中的情况下，Views 上面的一系列代码都不用执行了，节省了不少资源。

但是实际的场景，往往没有上面这个例子这么简单……

比如，页面上有 current_user 的状态，页脚的 HTML 代码是通过 Setting.footer_html 出来的，Head 里面还有 Setting.custom_heads 出来的代码。

以上这些东西都是需要影响页面更新的。

实际上我们只需要将 fresh_when 方法在 ApplicationController 里面覆盖一下，把页面上需要调用而影响结果的东西加入到 fresh_when 的 :etag 参数里面就好了:

application_controller.rb:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

def fresh_when(opts = {}) opts[:etag] ||= [] # 保证 etag 参数是 Array 类型 opts[:etag] = [opts[:etag]] if !opts[:etag].is_a?(Array) # 加入页面上直接调用的信息用于组合 etag opts[:etag] << current_user # Config 的某些信息 opts[:etag] << SiteConfig.app_name opts[:etag] << SiteConfig.custom_head_html opts[:etag] << SiteConfig.footer_html opts[:etag] << SiteConfig.google_analytics_key # 所有 etag 保持一天 opts[:etag] << Date.current super(opts) end

这样一来，每个用户的 ETag 都是不同的，当用户登出和登录以后，页面的内容将会呈现不同的 ETag，同时当你修改 SiteConfig 的某些内容是，ETag 也会随着改变，这样一来 ETag 的引入就不会影响到页面更新了。

实际上你可以大量的使用 fresh_when 方法在你的动态页面上面，来减少 Rails View 的执行与 HTML 下载，只要好好分析，将页面上需要的内容加入到 :etag 参数里面就好了。

比如：

1 2 3 4 5 6 7

def index @hot_topics = Topic.hot.limit(10) @hot_users = User.hot.limit(10) @hot_nodes = Node.hot.limit(10) @recent_topics = Topic.recent.limit(10) fresh_when(:etag => [@hot_topics,@hot_users,@hot_nodes,@recent_topics]) end