20111018 zhouchen share

2,490 views

Published on

20111018 share in Company by zhouchen

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,490
On SlideShare
0
From Embeds
0
Number of Embeds
1,871
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

20111018 zhouchen share

  1. 1. 优化网站optimize website 2011.10.18 zhouchen33.com
  2. 2. 介绍• 对于网站来说,速度是第一位的。用户总是讨厌等待,这 就像是去饭馆点菜,左等右等不上菜一样令人焦躁,是非 常糟糕的用户体验。所以如何优化网站,值得深入研究。• 本次分享介绍两种优化方式:• 利用Http Caching• 利用Bigpipe思路
  3. 3. Http Caching• Http Caching 利用浏览器访问网站时,对图片,html等 缓存在本地。再次访问该网站时,浏览器就不用再下载全 部的文件。• 优点 :• 减少下载量,提高页面加载速度。• 减小服务器负载• 减少网络带宽。
  4. 4. Http Caching• 先让我们复习下http请求和响应
  5. 5. Http Caching• 缺陷:• 当我们的网站发生了更新的时候,比如说Logo换了,浏 览器本地仍保存着旧版本的Logo。• 浏览器如何确定使用本地文件还是使用服务器上的新文 件?• 下面介绍按照Http Caching 协议的几种判断的方法。
  6. 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. 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. 8. Http Caching• 2、用 Etag 头• 通常情况下,通过修改时间来比较文件是可行的。但是在一些特殊情况,例如服务器的 时钟发生了错误,服务器时钟进行修改,夏时制DST到来后服务器时间没有及时更新, 这些都会引起通过修改时间比较文件版本的问题。• ETag可以用来解决这种问题。ETag是一个文件的唯一标志符。就像一个哈希或者指 纹,每个文件都有一个单独的标志,只要这个文件发生了改变,这个标志就会发生变化。 服务器返回ETag标签:• ETag: ead145f• 响应头Etag与 请求头If-None-Match 是否一致,• 如果一致就表示没有更新• 就响应304 通知浏览器利用 本地缓存。
  9. 9. Http Caching• 如同 Last-modified 一样,ETag 解决了文件版本比较的问题。• 只不过 ETag 的级别比 Last-Modified 高一些。
  10. 10. Http Caching• 3、用 Expires 头,过期时间• 之前两点都有个缺陷那就是我们必须连接服务器。每次使用前都进行一次比较,这种方 法很安全,但还不是最好的。我们可以使用 Expiration Date 来减少这种请求。• 就像我们喝牛奶一样,每次喝之前都要检查一下牛奶是否安全。但是如果我们知道牛奶 的过期时间,我们就可以在过期之前,直接使用而不用再送去检查。一旦超过了过期时 间,我们再去买一份新的回来。服务器返回的时候,会带上这份数据的过期时间:• Expires: Tue, 20 Mar 2007 04:00:25 GMT• 在过期之前,我们• 就避免了和服务器之间的连接。• 浏览器只需要自己判断• 手中的材料是否过期• 就可以了,• 完全不需要增加服务器的负担。
  11. 11. Http Caching• 让我们再比较一下Expires和Last-Modified• 似乎Last-Modified比不上Expires,• 因为虽然Last-Modified能够节省带宽,• 但是还是要发一个HTTP请求,• 而Expires却使得浏览器连HTTP请求都不用发,• 那还要Last-Modified干什么?• 理想状况的确是这样,不过当用户在浏览器里面按F5或者 点击Refresh按钮的时候,就算对于有Expires,一样也会 发一个HTTP请求出去,• 所以,Last-Modified还是要用的,而且要和Expires一起 用。
  12. 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. 13. Http Caching• 额外的标签• 缓存标签永远不会停止工作,但是有时候我们需要对已经缓存的内容 进行一些控制。• Cache-control: public 表示缓存的版本可以被代理服务器或者 其他中间服务器识别。• Cache-control: private 意味着这个文件对不同的用户是不同的。 只有用户自己的浏览器能够进行缓存,公共的代理服务器不允许缓存。• Cache-control: no-cache 意味着文件的内容不应当被缓存。这 在搜索或者翻页结果中非常有用,因为同样的URL,对应的内容会发 生变化。• 注意:有些标签只是在支持HTTP/1.1的浏览器上可用
  14. 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. 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. 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. 17. Http Caching• nginx服务器可以结合squid控制http caching:• 在server中增加• location ~ ^/(img|js|css)/ {• root /data3/Html;• expires 24h;• }
  18. 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);
  19. 19. Http Caching• 这是PHP来给图片设置Http Caching的例子
  20. 20. Http Caching• 简单应用实例,比如有以下部分:• index.html• css• js• image• 我们可以不缓存index.html,html加载build01中的 css,js,image,并缓存build01目录下的文件。• 当css,js,image需要改变时,新建build02目录, index.html链接新目录的文件,以此类推。
  21. 21. Http Caching• Http Caching 大概就这些,更多信息可以查看http协议 中关于Caching的部分• 参考:• http://betterexplained.com/articles/how-to- optimize-your-site-with-http-caching/• 等
  22. 22. Bigpipe• 历史:• Facebook的网站速度做为最关键的公司任务之一。• 在2009年,实现了Facebook网站速度提升两倍。• 这项提升网站速度的技术,Facebook命名为 BigPipe。
  23. 23. Bigpipe• 国内同类技术:• 人人网• 并发布开源框架rose poral• http://code.google.com/p/paoding-rose/• 新浪微博最新版v4
  24. 24. Bigpipe• 什么是bigpipe?• 举例:在饭馆点菜吃的时候,如果点了四个菜,厨师没有 必要把四个菜一起炒好再上来。• 微博3.0就是这种把所有菜都炒好再上桌的网页加载模式。• 所以用户吃上菜的时候,已经是第5秒了。• 现在新版微博的bigpipe网页加载模式,是炒好一个菜先 一个菜,用户可以先吃着,厨师再炒第二个菜。• 甚至可以几个菜并发同时炒。所以用户吃上第一口菜的时 间可能是第1秒,比之前提前了很多。
  25. 25. Bigpipe• 并行bigpipe实例:
  26. 26. Bigpipe• 实例:
  27. 27. Bigpipe
  28. 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额外带来的请求,会减少 服务器的负载,同样会带来很大的性能提升。
  29. 29. Bigpipe• BigPipe思想与原理• 与AJAX相似,BigPipe使页面可以按区块渲染。 但与AJAX不同的是,BigPipe不需要在页面载入 后再通过XMLHttpRequest向服务器发起异步请 求,而是(通过使用缓冲区)在页面载入过程中 先输出页面布局,并在HTML中预留各个页面区块 (Facebook称为Pagelet),加载完区块由 Javascript进行DOM操作,对区块进行内容填 充,也就是把内容赋给innerHTML。
  30. 30. Bigpipe• BigPipe具体实现
  31. 31. Bigpipe• 不同的语言IO中都有flush功能:• php:ob_flush();flush()• perl:STDOUT->autoflush(1);• java:out.flush()• python:sys.stout.flush()• ruby:stdout.flush
  32. 32. Bigpipe• BigPipe正式环境中服务器端实现• 1.java:后台逻辑如果使用java,可以使用java 的多线程机制去同 时加载不同的pagelet 的内容。每个 pageLet 的内容交给单独的线 程进行生成和处理,这样pageLet 的内容就做到并行处理,无需按照 文档流顺序。每个线程完成后就把生成的页面内容返回给浏览器。• 2.php:后台逻辑如果使用PHP。PHP 不支持多线程,无法像java 使用多线程的机制来并发处理不同pagelet 的内容。虽然可以使用 PHP curl,socket扩展完成功能,但都会遇到服务器阻塞问题。修改 curl模块,添加回调功能。或生产子进程才可以实现并行处理。
  33. 33. Bigpipe• 不同方式
  34. 34. Bigpipe• 结论• 经过上面的讨论,我们可以发现,使用BigPipe 技术优化页面可以有四个好处:• 1. 减少页面的加载时间• 2. 使页面分步输出,改善用户体验• 3. 使页面结构化,提高可读性,更加便于维护• 4. 每个pagelet 都是相互独立的,如果有一个pagelet 的内容不能加载,并不会影响 其他的pagelet 的内容显示。• 缺点:• 1. 访问者是爬虫或者访问者浏览器禁止使用JS的情况• 2 . 对SEO的影响• (解决:user-agent 判断客户端)
  35. 35. 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• 等
  36. 36. • 分享结束 Thanks

×