O'Reilly Velocity China 2010 ，在北京舉行了爲期兩天的大會，由 O'Reilly 和 Taobao 聯合主辦，本次大會的主題是 ”Fast by default( 與生俱來的快 )” ，關注 web 性能（更多爲前端性能）和運維。
自己有幸參加了首次在中國舉行的 Velocity 大會，自我總結有以下幾點：
1、 WPO web performance optimation
2、 運維（比如 taobao 如何管理 15,000 臺服務器）
3、 Automate
一些數據
Data@Taobao
• Alexa 排名 13
• 10 億日 PV
• 15,000 服務器
• 帶寬 318G/410G
Data@Facebook
• +5 億的活躍用戶，超過一半每天訪問
• 200 億日 PV
Performance 帶來的價值
WPO
• Web Performance Optimization
– Drives traffic
– Improves UX
– Increases revenue
– Reduces costs
How to WPO
|
Measure |
• Yahoo! Boomerang • Stevesouders.org/episodes • Jiffy • WebPagetest.org • ShowSlow.com |
|
Profile |
• Firebug • Fiddle • HttpWatch • Speed Tracer • Web Inspector • Dyna Trace |
|
Research |
• Domain sharding • Concatenation • Sprites vs. MHTML • WebP (A new image format for the Web) • Prefetch • SPDY, cwnd=10 |
|
Best practices |
• High performance Even faster web sites • High performance JS • Code.google.com/speed • Developer.yahoo.com/performance • Stevesouders.com/blog • Perfplanet.com |
|
Evangelize （傳道） |
• Velocity conference • Workshops • University • Case studies • blogs |
|
Lint |
• Page Speed from google • YSlow |
|
Automate |
如何做到自動化的性能優化？參見下面 |
Facebook 的 3 個前端優化框架
• Quickling ajaxifies the whole web site
• PageCache cache user-visited page in browser
• BigPipe pipelines website
Quickling
remove redundant work via ajax
如上圖，從首頁跳轉到圖片 detail 頁面，紅框標示的部分，它們是不變化的，因此可以不用每次頁面請求，都從服務器端生成這些內容，這也是 Quickling 的出發點（創新無處不在）
實現示意圖：
PageCache
Cache visited pages in client side.
如下圖，在用戶訪問 facebook 網站時，分析用戶行爲發現，一般情況下，用戶會多次訪問首頁，因此可以 cache 第一次訪問，後面的請求都從本地 cache 取數據即可。
PageCache 的實現有幾個難點：
• 實時更新
• Cache 一致性
至於作者如何解決的，還是詳細看他的 ppt 吧（ http://velocity.oreilly.com.cn/ppts/ChanghaoJiang.pdf ）。
BigPipe
Pipeline website
如上圖，爲一般情況下，一個頁面從服務器生成，到網絡傳輸，最後到客戶端渲染的過程。可見它是一個串行的過程。
Facebook 的工程師，經過分析，發現一個頁面（如下圖），可以分成許多 Pagelets ，它們間相互影響不大，可以拆開來分別加載。
BigPipe 後，頁面加載的方式變爲如下方式，這樣可以有效改進用戶感知的頁面加載時間。
更多，也請查看作者的 ppt （ http://velocity.oreilly.com.cn/ppts/ChanghaoJiang.pdf ）
一些個人總結
• 性能提升可以帶來流量、帶來收入
• 前端性能優化很重要
• 有專門的團隊、專門的人在做
• 人是最不可靠的，靠系統，靠自動化
• 持續的做，不是三天打漁，兩天曬網
資源連接
Boomerang （ Boomerang is a piece of JavaScript that you add to the bottom of your Web pages, where it measures page-load time, among other things, and beacons the results back to your server ） ：
http://developer.yahoo.com/blogs/ydn/posts/2010/06/performance_testing_with_boomerang/
Jiffy: http://code.google.com/p/jiffy-web/
SPDY ： http://www.guao.hk/tag/spdy
Page Speed: http://code.google.com/speed/page-speed/
WebP: http://code.google.com/speed/webp/
Speed Tracer: http://code.google.com/webtoolkit/speedtracer/
Web Inspector: http://trac.webkit.org/wiki/WebInspector
Dyna Trace: http://www.dynatrace.com
Velocity china pdf: http://velocity.oreilly.com.cn/index.php?func=slidesvideos