More Related Content
Similar to 20111018 zhouchen share (20)
20111018 zhouchen share
- 3. Http Caching
• Http Caching 利用浏览器访问网站时,对图片,html等
缓存在本地。再次访问该网站时,浏览器就不用再下载全
部的文件。
• 优点 :
• 减少下载量,提高页面加载速度。
• 减小服务器负载
• 减少网络带宽。
- 5. Http Caching
• 缺陷:
• 当我们的网站发生了更新的时候,比如说Logo换了,浏
览器本地仍保存着旧版本的Logo。
• 浏览器如何确定使用本地文件还是使用服务器上的新文
件?
• 下面介绍按照Http Caching 协议的几种判断的方法。
- 6. Http Caching
• 1、用 Last-Modified 头:
• 服务器为了通知浏览器当前文件(图片,html,css,js)
的版本,会发送一个最后修改时间的标签,例如:
• Last-modified: Fri, 16 Mar 2007 04:00:25 GMT
• 响应头Last-Modified在
请求头If-Modified-Since
后没有更新过就响应304
通知浏览器利用
本地缓存。
- 7. Http Caching
• 服务器端脚本可修改文件最后更改时间信息如:
• php修改 Last-Modified头:
• $time = time() - 60;
• header('Last-Modified: '.gmdate('D, d M Y H:i:s', $time).'
GMT');
• php也可以获取请求头If-Modified-Since 判断来对比更改Last-
Modified
• $if_modified_since =
isset($_SERVER['HTTP_IF_MODIFIED_SINCE']) ?
stripslashes($_SERVER['HTTP_IF_MODIFIED_SINCE']) : FALSE;
- 8. Http Caching
• 2、用 Etag 头
• 通常情况下,通过修改时间来比较文件是可行的。但是在一些特殊情况,例如服务器的
时钟发生了错误,服务器时钟进行修改,夏时制DST到来后服务器时间没有及时更新,
这些都会引起通过修改时间比较文件版本的问题。
• ETag可以用来解决这种问题。ETag是一个文件的唯一标志符。就像一个哈希或者指
纹,每个文件都有一个单独的标志,只要这个文件发生了改变,这个标志就会发生变化。
服务器返回ETag标签:
• ETag: ead145f
• 响应头Etag与
请求头If-None-Match
是否一致,
• 如果一致就表示没有更新
• 就响应304
通知浏览器利用
本地缓存。
- 9. Http Caching
• 如同 Last-modified 一样,ETag 解决了文件版本比较的问题。
• 只不过 ETag 的级别比 Last-Modified 高一些。
- 10. Http Caching
• 3、用 Expires 头,过期时间
• 之前两点都有个缺陷那就是我们必须连接服务器。每次使用前都进行一次比较,这种方
法很安全,但还不是最好的。我们可以使用 Expiration Date 来减少这种请求。
• 就像我们喝牛奶一样,每次喝之前都要检查一下牛奶是否安全。但是如果我们知道牛奶
的过期时间,我们就可以在过期之前,直接使用而不用再送去检查。一旦超过了过期时
间,我们再去买一份新的回来。服务器返回的时候,会带上这份数据的过期时间:
• Expires: Tue, 20 Mar 2007 04:00:25 GMT
• 在过期之前,我们
• 就避免了和服务器之间的连接。
• 浏览器只需要自己判断
• 手中的材料是否过期
• 就可以了,
• 完全不需要增加服务器的负担。
- 11. Http Caching
• 让我们再比较一下Expires和Last-Modified
• 似乎Last-Modified比不上Expires,
• 因为虽然Last-Modified能够节省带宽,
• 但是还是要发一个HTTP请求,
• 而Expires却使得浏览器连HTTP请求都不用发,
• 那还要Last-Modified干什么?
• 理想状况的确是这样,不过当用户在浏览器里面按F5或者
点击Refresh按钮的时候,就算对于有Expires,一样也会
发一个HTTP请求出去,
• 所以,Last-Modified还是要用的,而且要和Expires一起
用。
- 12. Http Caching
• 4、用 max-age 的 Cache-Control 头
• Expires的方法很好,但是我们每次都得算一个精确的时
间。max-age 标签可以让我们更加容易的处理过期时间。
我们只需要说,这份资料你只能用一个星期就可以了。
• Max-age 使用秒来计量,下面是一些常用的单位:
• 1 days in seconds = 86400
• 1 week in seconds = 604800
• 1 month in seconds = 2629000
• 1 year in seconds = 31536000
- 13. Http Caching
• 额外的标签
• 缓存标签永远不会停止工作,但是有时候我们需要对已经缓存的内容
进行一些控制。
• Cache-control: public 表示缓存的版本可以被代理服务器或者
其他中间服务器识别。
• Cache-control: private 意味着这个文件对不同的用户是不同的。
只有用户自己的浏览器能够进行缓存,公共的代理服务器不允许缓存。
• Cache-control: no-cache 意味着文件的内容不应当被缓存。这
在搜索或者翻页结果中非常有用,因为同样的URL,对应的内容会发
生变化。
• 注意:有些标签只是在支持HTTP/1.1的浏览器上可用
- 14. Http Caching
• 小结:
• 四种方式:
• Last-modified:
• ETag:
• Expires:
• Cache-control: max-age=86400
• Last-Modified 与 Etag 头还是要请求服务器的,只是仅返回 304 头,不
返回内容。所以不管浏览器怎么Refresh ,304 都是有效的。但用 Ctrl+
Refresh是全新请求的(这是浏览器行为,不发送缓存相关的头)。
• Expires 头与 max-age 缓存是不需要请求服务器的,直接从本地缓存中取。
但Refresh会忽视缓存(所以使用 httpwatch 之类的 http 协议监察工具
时,不要Refresh误认为 Expires 和 max-age 是无效的)。
- 15. Http Caching
• 我们也可以直接改服务器配置文件来设置这些
• 比如Apache 上创建.htaccess:
• #Create filter to match files you want to cache
• <Files *.js>
• Header add "Cache-Control" "max-age=604800"
• </Files>
• <Files *.js>
• Header add "Expires" "Mon, 28 Jul 2014 23:30:00 GMT"
• Header add "Cache-Control" "max-age=31536000"
• </Files>
- 16. Http Caching
• 利用apache模块mod_expires:
• <ifmodule mod_expires.c>
• expiresactive on
• #默认所有文件缓存时间设置为300秒
• expiresdefault a300
• </ifmodule>
• mod_headers:
• <ifmodule mod_headers.c>
• # css, js, swf类的文件缓存一个星期
• <filesmatch “.(css|js|swf)$”>
• header set cache-control “max-age=604800″
• </filesmatch>
• </ifmodule>
- 17. Http Caching
• nginx服务器可以结合squid控制http caching:
• 在server中增加
• location ~ ^/(img|js|css)/ {
• root /data3/Html;
• expires 24h;
• }
- 18. Http Caching
• php控制http caching:
• header('Cache-Control: max-age=86400,must-
revalidate');
• header('Pragma:');
• header('Last-Modified: ' .gmdate('D, d M Y H:i:s') .
' GMT' );
• header('Expires: ' .gmdate ('D, d M Y H:i:s', time()
+ '86400' ). ' GMT');
- 20. Http Caching
• 简单应用实例,比如有以下部分:
• index.html
• css
• js
• image
• 我们可以不缓存index.html,html加载build01中的
css,js,image,并缓存build01目录下的文件。
• 当css,js,image需要改变时,新建build02目录,
index.html链接新目录的文件,以此类推。
- 21. Http Caching
• Http Caching 大概就这些,更多信息可以查看http协议
中关于Caching的部分
• 参考:
• http://betterexplained.com/articles/how-to-
optimize-your-site-with-http-caching/
• 等
- 22. Bigpipe
• 历史:
• Facebook的网站速度做为最关键的公司任务之一。
• 在2009年,实现了Facebook网站速度提升两倍。
• 这项提升网站速度的技术,Facebook命名为
BigPipe。
- 23. Bigpipe
• 国内同类技术:
• 人人网
• 并发布开源框架rose poral
• http://code.google.com/p/paoding-rose/
• 新浪微博最新版v4
- 28. Bigpipe
• BigPipe与AJAX
• Web2.0的重要特征是网页显示大量动态内容,即web2.0注重网页与用户的交互。其核心技术是
AJAX,如今所有主流网站都或多或少使用AJAX。与AJAX类似,BigPipe 实现了分块儿的概念,使
页面能够分步输出,即每次输出一部分网页内容。接下来讨论 BigPipe 与AJAX 的区别。
• 简单的说,BigPipe 比AJAX 有三个好处:
• 1. AJAX 的核心是XMLHttpRequest,客户端需要异步的向服务器端发送请求,然后将传送过来的
内容动态添加到网页上。如此实现存在一些缺陷,即发送往返请求需要耗费时间,而 BigPipe 技术
使浏览器并不需要发送XMLHttpRequest 请求,这样就节省时间损耗。
• 2. 使用AJAX时,浏览器和服务器的工作顺序执行。服务器必须等待浏览器的请求,这样就会造成
服务器的空闲。浏览器工作时,服务器在等待,而服务器工作时,浏览器在等待,这也是一种性能
的浪费。使用BigPipe,浏览器和服务器可以并行同时工作,服务器不需要等待浏览器的请求,而
是一直处于加载页面内容的工作阶段,这就会使效率得到更大的提高。
• 3. 减少浏览器发送到请求。对一个5亿用户的网站来说,减少了使用AJAX额外带来的请求,会减少
服务器的负载,同样会带来很大的性能提升。
- 32. Bigpipe
• BigPipe正式环境中服务器端实现
• 1.java:后台逻辑如果使用java,可以使用java 的多线程机制去同
时加载不同的pagelet 的内容。每个 pageLet 的内容交给单独的线
程进行生成和处理,这样pageLet 的内容就做到并行处理,无需按照
文档流顺序。每个线程完成后就把生成的页面内容返回给浏览器。
• 2.php:后台逻辑如果使用PHP。PHP 不支持多线程,无法像java
使用多线程的机制来并发处理不同pagelet 的内容。虽然可以使用
PHP curl,socket扩展完成功能,但都会遇到服务器阻塞问题。修改
curl模块,添加回调功能。或生产子进程才可以实现并行处理。
- 34. Bigpipe
• 结论
• 经过上面的讨论,我们可以发现,使用BigPipe 技术优化页面可以有四个好处:
• 1. 减少页面的加载时间
• 2. 使页面分步输出,改善用户体验
• 3. 使页面结构化,提高可读性,更加便于维护
• 4. 每个pagelet 都是相互独立的,如果有一个pagelet 的内容不能加载,并不会影响
其他的pagelet 的内容显示。
• 缺点:
• 1. 访问者是爬虫或者访问者浏览器禁止使用JS的情况
• 2 . 对SEO的影响
• (解决:user-agent 判断客户端)