在你的 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 下载,达到加速的目的。
比如下面这个场景的例子:
- 用户访问 /topics/11 页面,
TopicsController#show
加载@topic
,并通过 View 生成内容返回 - 用户来回访问 10 次 /topics/11,可此页面内容无任何变化
- 过了1天以后,
@topic
有了新的回复,用户再次访问的时候,内容变了
上面的场景用户一共访问了 12 次 /topics/11 这个页面,但只有第一次和最后一次才有实质性的内容需要下载的,可在没有 ETag 的情况下面,服务器执行和浏览器下载都是有 12 次,其中的 10 次是多余的。
如果加上 ETag 以后,将会是这样:
- 用户访问 /topics/11 页面,
TopicsController#show
加载@topic
,并通过 View 生成内容返回,并给出目前内容的ETag: 89vbsn28716
- 用户带着
ETag: 89vbsn28716
再次访问 /topics/11 ,服务器检查 ETag 与执行结果,发现无变化,返回 304,浏览器直接使用 Cache 的内容渲染页面 - 过了一天以后,
@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 |
|
加上 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 |
|
这样一来,每个用户的 ETag 都是不同的,当用户登出和登录以后,页面的内容将会呈现不同的 ETag,同时当你修改 SiteConfig 的某些内容是,ETag 也会随着改变,这样一来 ETag 的引入就不会影响到页面更新了。
实际上你可以大量的使用 fresh_when
方法在你的动态页面上面,来减少 Rails View 的执行与 HTML 下载,只要好好分析,将页面上需要的内容加入到 :etag
参数里面就好了。
比如:
1 |
|
在你的 Rails App 中开启 ETag 加速页面载入同时节省资源的更多相关文章
- APP中内嵌H5页面为什么不能下载?
在APP中内嵌H5页面,若页面上存在下载链接,没有任何反应,为什么呢? 原因是app中内嵌的H5页面是WebView解析的,什么是WebView呢? 在Android手机中内置了一款高性能webkit ...
- 安卓app中嵌入一个H5页面,当手机系统设置字体变大时,如何使H5页面的字体不会随用户自己调整的系统字体变化而变化?
webview.getSettings().setTextZoom(100);WebView加上这个设置后,WebView里的字体就不会随系统字体大小设置发生变化了. https://segmentf ...
- 用Chrome devTools 调试Android手机app中的web页面。
(1) 手机要满足Android系统为4.4或更高版本,低版本不支持这种方式.(2) 确保App已经开启了webview的debug调试模式,由Android工程师协助.(2) 用usb数据线连接好手 ...
- APP中一种在Java层实现的简单守护进程方式
转载请把头部出处链接和尾部二维码一起转载,本文出自逆流的鱼yuiop:http://blog.csdn.net/hejjunlin/article/details/52779986 守护进程是一个黑色 ...
- ViewPager封装工具类: 轻松实现APP导航或APP中的广告栏
相信做app应用开发的,绝对都接触过ViewPager,毕竟ViewPager的应用可以说无处不在:APP第一次启动时的新手导航页,APP中结合Fragment实现页面滑动,APP中常见的广告栏的自动 ...
- 我刚知道的WAP app中meta的属性
之前我一直做的都是WEB前端开发,来北京以后面试了一个移动前端开发,WAP前端开发. 其实在原来公司的时候也做过这方面的开发,可面试的时候面试官问我,要想强制让文档与设备的宽度保持1:1,mate标签 ...
- 我刚知道的WAP app中meta的属性(转载)
之前我一直做的都是WEB前端开发,来北京以后面试了一个移动前端开发,WAP前端开发. 其实在原来公司的时候也做过这方面的开发,可面试的时候面试官问我,要想强制让文档与设备的宽度保持1:1,mate标签 ...
- 在pycharm_2018.2版本中开启Flask的debug的方法 (不要用命令:python **.py启动)
断点后,先ctl+c关闭控制台程序,再点击debuger调试 问题描述:在pycharm_2018.2版本中,我明确开启了debug,代码如下所示: from flask import Flask a ...
- Hybrid App中原生页面 VS H5页面(分享)
本文部分转自 http://www.jianshu.com/p/00ff5664e000 现有3类主流APP,分别为:Web App.Hybrid App(混合模式移动应用,Hybrid有“混合的” ...
随机推荐
- 破解Oracle ERP密码
前提:你有apps的数据库账户,想知道某个用户的密码,因为fnd_user中的密码为加密的,所以无法看懂,你可以尝试用下边的方式来查看用户密码. SQL> desc fnd_user; Name ...
- wsdl 结构解析
webservice的跨平台特性要求它必须有某种手段来对服务进行自我描述,使不同的语言能正确理解如何调用该服务.webservice通过WSDL(Web Services Description La ...
- java keytool生成ssl加密密钥
教程:http://www.cnblogs.com/getherBlog/p/3930317.html 其中用到几个命令: keytool -genkeypair -alias certificate ...
- 阿里巴巴集团2013实习生招聘技术类笔试卷(B)
一.单选题 1.在常用的网络协议中,___是面向连接的.有重传功能的协议. A.IP B.TCP C.UDP D.DXP 2.500张多米诺骨牌整齐地排成一列,依顺序编号为1.2.3… ...
- 解决MS SQL Server 使用HashBytes函数乱码问题
HASHBYTES 语法(参考MSDN): HASHBYTES ( '<algorithm>', { @input | 'input' } ) <algorithm>::= M ...
- C#使用oledb操作excel文件的方法
本文实例讲述了C#使用oledb操作excel文件的方法.分享给大家供大家参考.具体分析如下: 不管什么编程语言都会提供操作Excel文件的方式,C#操作Excel主要有以下几种方式: 1.Excel ...
- Open vSwitch 2.9.2 创建 RPM 安装包
1.安装依赖环境 yum install gcc make python-devel openssl-devel graphviz autoconf automake rpm-build redhat ...
- Android Studio - Unable to create Debug Bridge: Unable to start adb server: adb server version (32) doesn't match this client (40)
错误提示:Unable to create Debug Bridge: Unable to start adb server: adb server version (32) doesn't matc ...
- nginx 场景业务汇总 (初)
本文链接:http://www.cnblogs.com/zhenghongxin/p/8891385.html 在下面的测试中,建议每次修改nginx配置文件后,都用此命令检查一下语法是否正确: [r ...
- bonjour browser 下载
在Mac 上叫 Bonjour Browser http://www.macupdate.com/app/mac/13388/bonjour-browser/download IOS 上的 app 叫 ...