20111018 zhouchen share

优化网站
optimize website

2011.10.18 zhouchen33.com

介绍
• 对于网站来说，速度是第一位的。用户总是讨厌等待，这
就像是去饭馆点菜，左等右等不上菜一样令人焦躁，是非
常糟糕的用户体验。所以如何优化网站，值得深入研究。
• 本次分享介绍两种优化方式：
• 利用Http Caching
• 利用Bigpipe思路

Http Caching
• Http Caching 利用浏览器访问网站时，对图片，html等
缓存在本地。再次访问该网站时，浏览器就不用再下载全
部的文件。
• 优点 :
• 减少下载量，提高页面加载速度。
• 减小服务器负载
• 减少网络带宽。

Http Caching
• 先让我们复习下http请求和响应

Http Caching
• 缺陷：
• 当我们的网站发生了更新的时候，比如说Logo换了，浏
览器本地仍保存着旧版本的Logo。
• 浏览器如何确定使用本地文件还是使用服务器上的新文
件？
• 下面介绍按照Http Caching 协议的几种判断的方法。

Http Caching
• 1、用 Last-Modified 头：
• 服务器为了通知浏览器当前文件（图片，html，css，js）
的版本，会发送一个最后修改时间的标签，例如：
• Last-modified: Fri, 16 Mar 2007 04:00:25 GMT
• 响应头Last-Modified在
请求头If-Modified-Since
后没有更新过就响应304
通知浏览器利用
本地缓存。

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;

Http Caching
• 2、用 Etag 头
• 通常情况下，通过修改时间来比较文件是可行的。但是在一些特殊情况，例如服务器的
时钟发生了错误，服务器时钟进行修改，夏时制DST到来后服务器时间没有及时更新，
这些都会引起通过修改时间比较文件版本的问题。
• ETag可以用来解决这种问题。ETag是一个文件的唯一标志符。就像一个哈希或者指
纹，每个文件都有一个单独的标志，只要这个文件发生了改变，这个标志就会发生变化。
服务器返回ETag标签：
• ETag: ead145f
• 响应头Etag与
请求头If-None-Match
是否一致，
• 如果一致就表示没有更新
• 就响应304
通知浏览器利用
本地缓存。

Http Caching
• 如同 Last-modified 一样，ETag 解决了文件版本比较的问题。
• 只不过 ETag 的级别比 Last-Modified 高一些。

Http Caching
• 3、用 Expires 头，过期时间
• 之前两点都有个缺陷那就是我们必须连接服务器。每次使用前都进行一次比较，这种方
法很安全，但还不是最好的。我们可以使用 Expiration Date 来减少这种请求。
• 就像我们喝牛奶一样，每次喝之前都要检查一下牛奶是否安全。但是如果我们知道牛奶
的过期时间，我们就可以在过期之前，直接使用而不用再送去检查。一旦超过了过期时
间，我们再去买一份新的回来。服务器返回的时候，会带上这份数据的过期时间：
• Expires: Tue, 20 Mar 2007 04:00:25 GMT

• 在过期之前，我们
• 就避免了和服务器之间的连接。
• 浏览器只需要自己判断
• 手中的材料是否过期
• 就可以了，
• 完全不需要增加服务器的负担。

Http Caching
• 让我们再比较一下Expires和Last-Modified
• 似乎Last-Modified比不上Expires，
• 因为虽然Last-Modified能够节省带宽，
• 但是还是要发一个HTTP请求，
• 而Expires却使得浏览器连HTTP请求都不用发，
• 那还要Last-Modified干什么？
• 理想状况的确是这样，不过当用户在浏览器里面按F5或者
点击Refresh按钮的时候，就算对于有Expires，一样也会
发一个HTTP请求出去，
• 所以，Last-Modified还是要用的，而且要和Expires一起
用。

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

Http Caching
• 额外的标签
• 缓存标签永远不会停止工作，但是有时候我们需要对已经缓存的内容
进行一些控制。
• Cache-control: public 表示缓存的版本可以被代理服务器或者
其他中间服务器识别。
• Cache-control: private 意味着这个文件对不同的用户是不同的。
只有用户自己的浏览器能够进行缓存，公共的代理服务器不允许缓存。
• Cache-control: no-cache 意味着文件的内容不应当被缓存。这
在搜索或者翻页结果中非常有用，因为同样的URL，对应的内容会发
生变化。

• 注意：有些标签只是在支持HTTP/1.1的浏览器上可用

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 是无效的）。

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>

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>

Http Caching

• nginx服务器可以结合squid控制http caching：
• 在server中增加
• location ~ ^/(img|js|css)/ {
• root /data3/Html;
• expires 24h;
• }

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');

Http Caching
• 这是PHP来给图片设置Http Caching的例子

Http Caching
• 简单应用实例，比如有以下部分：
• index.html
• css
• js
• image

• 我们可以不缓存index.html，html加载build01中的
css,js,image,并缓存build01目录下的文件。
• 当css,js,image需要改变时，新建build02目录，
index.html链接新目录的文件，以此类推。

Http Caching

• Http Caching 大概就这些，更多信息可以查看http协议
中关于Caching的部分

• 参考：
• http://betterexplained.com/articles/how-to-
optimize-your-site-with-http-caching/
• 等

Bigpipe
• 历史：
• Facebook的网站速度做为最关键的公司任务之一。
• 在2009年，实现了Facebook网站速度提升两倍。
• 这项提升网站速度的技术，Facebook命名为
BigPipe。

Bigpipe
• 国内同类技术：
• 人人网
• 并发布开源框架rose poral
• http://code.google.com/p/paoding-rose/

• 新浪微博最新版v4

Bigpipe
• 什么是bigpipe？

• 举例：在饭馆点菜吃的时候，如果点了四个菜，厨师没有
必要把四个菜一起炒好再上来。
• 微博3.0就是这种把所有菜都炒好再上桌的网页加载模式。
• 所以用户吃上菜的时候，已经是第5秒了。
• 现在新版微博的bigpipe网页加载模式，是炒好一个菜先
一个菜，用户可以先吃着，厨师再炒第二个菜。
• 甚至可以几个菜并发同时炒。所以用户吃上第一口菜的时
间可能是第1秒，比之前提前了很多。

Bigpipe

• 并行bigpipe实例:

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额外带来的请求，会减少
服务器的负载，同样会带来很大的性能提升。

Bigpipe
• BigPipe思想与原理
• 与AJAX相似，BigPipe使页面可以按区块渲染。
但与AJAX不同的是，BigPipe不需要在页面载入
后再通过XMLHttpRequest向服务器发起异步请
求，而是（通过使用缓冲区）在页面载入过程中
先输出页面布局，并在HTML中预留各个页面区块
（Facebook称为Pagelet），加载完区块由
Javascript进行DOM操作，对区块进行内容填
充，也就是把内容赋给innerHTML。

Bigpipe
• BigPipe具体实现

Bigpipe
• 不同的语言IO中都有flush功能：

• php：ob_flush();flush()

• perl:STDOUT->autoflush(1);

• java:out.flush()

• python:sys.stout.flush()

• ruby:stdout.flush

Bigpipe
• BigPipe正式环境中服务器端实现
• 1.java：后台逻辑如果使用java，可以使用java 的多线程机制去同
时加载不同的pagelet 的内容。每个 pageLet 的内容交给单独的线
程进行生成和处理，这样pageLet 的内容就做到并行处理，无需按照
文档流顺序。每个线程完成后就把生成的页面内容返回给浏览器。

• 2.php：后台逻辑如果使用PHP。PHP 不支持多线程，无法像java
使用多线程的机制来并发处理不同pagelet 的内容。虽然可以使用
PHP curl，socket扩展完成功能，但都会遇到服务器阻塞问题。修改
curl模块，添加回调功能。或生产子进程才可以实现并行处理。

Bigpipe
• 结论

• 经过上面的讨论，我们可以发现，使用BigPipe 技术优化页面可以有四个好处：
• 1．减少页面的加载时间
• 2．使页面分步输出，改善用户体验
• 3．使页面结构化，提高可读性，更加便于维护
• 4．每个pagelet 都是相互独立的，如果有一个pagelet 的内容不能加载，并不会影响
其他的pagelet 的内容显示。

• 缺点：
• 1．访问者是爬虫或者访问者浏览器禁止使用JS的情况
• 2 . 对SEO的影响
• (解决:user-agent 判断客户端)

Bigpipe
• 参考：
• 从新浪微博改版谈网页重构——bigpipe中的页面
构建优化.doc
• http://www.ibm.com/developerworks/cn/j
ava/j-lo-bigpipe/index.html
• http://www.searchtb.com/2011/04/an-
introduction-to-bigpipe.html
• 等

20111018 zhouchen share

More Related Content

What's hot

Viewers also liked

Similar to 20111018 zhouchen share

20111018 zhouchen share