6月12號我和其它同事一起前往美國參加了Velocity 2011的會議，在此期間學習到了很多效能優化方面的經驗和方法，通過本文整理出來分享給大家。
啟程
我們乘坐12號下午4點的國航飛機出發，經過11小時到達了舊金山國際機場，由於時差的關係，到了舊金山後的當地時間是12號中午12點，感覺像穿越了。
下飛機後我們租了2輛車，在美國租車是最經濟方便的交通工具，因為地廣人稀，除了大城市其它地方都很少見到公交和計程車，導航儀很精確，很順利就從機場開到了賓館。
參觀Facebook總部
13號我們參觀了公司在Cupertino的辦公室，然後在HR的帶領下驅車前往Facebook總部進行參觀，Facebook內部不大，只有2 層辦公室，裡面的場景和電影social network中見到的一樣，不像想象中的吵，但也不安靜，很多人都戴著耳麥，由於簽署了保密協議不能拍照片，感興趣的同學可以觀看Facebook官方的MTV Diary of Facebook，幸運的是我們在辦公室裡還見到了Mark。
然後我們在一個會議室裡和2位Facebook工程師簡單進行了交流，對Facebook最大的感受就是其內部的小巧和高效，像一個小公司一樣在運作，每個工程師都可以自由修改任何Facebook的程式碼（當然，會有code review和自動化測試才能上線），Facebook有健全的小流量測試機制來不斷改進產品，任何人都能提需求，然後通過對比測試來決定某個功能是否大規模部署，他們沒有專門的QA，而是由工程師自己來保證質量。
保持小巧是Facebook高效率運作的一個重要原因，目前Facebook的工程師只有500人左右，而且他們不想增長太快。在這次 Velocity大會上Jonathan的演講也提到了Facebook的內部的工程師文化：small and hungry，在對php進行優化時他們最終選擇hiphop這個高風險但高收益的方案，感覺很少有大公司會這麼激進。
之前網上有篇文章How Facebook Ships Code談到了Facebook內部運作的很多細節，感興趣的同學可以閱讀，與傳統的企業相比確實有很多值得借鑑的地方。
6月14號的workshop
由於每個分會場的人都太多了（超過400），第一天的workshop基本上相當於演講，之前還以為主要是動手實驗。
接下來我會列舉出每個session相關的資訊，大家可以點選session標題瀏覽詳細的資訊，其中大部分session都有slide可以下載，有些還有視訊（youtube），而對於還沒有視訊的session請耐心等待一段時間。
Performance Tools
這個session主要介紹了4個效能優化相關的工具：WebPagetest、Mobitest、ShowSlow、dynatrace。
首先介紹的是WebPagetest，這是google員工Patrick Meenan全職開發的效能監測工具，它可以通過截圖來直觀地看到頁面載入的過程，並能進行視訊對比，方便演示效能優化結果，WebPagetest是目前功能最全面的開源監測工具，還可以部署到本地機器，方便進行內部的效能測試。
Mobitest是專門用來測試iOS和android頁面效能的線上服務，可以線上免費使用，但由於移動裝置的侷限性（效能、相關工具），能監測到的資訊要比桌面上的少。它的實現原理是在這些移動裝置上執行一個自己開發的app，監聽伺服器的指令然後呼叫內嵌的webkit來監測頁面效能。
ShowSlow是一個聚合YSlow、Page Speed、dynaTrace測試結果的平臺，方便瀏覽，並能檢視歷史資料，它的實現方法是通過收集beacons結果。
dynatrace AJAX就不用多介紹了，它目前最強大的頁面效能監測工具，可以詳細列出頁面渲染中詳細的資訊，甚至是每個函式的執行時間。
Analyzing the Performance of Mobile Web
Ariya的這個演講是這次會議最好的演講之一，因為Ariya是WebKit的reviewer之一，他對WebKit有深入的研究，提供了不少移動裝置如何進行效能優化的思路，以下是我總結的要點：
- 監測移動裝置效能的方法
- 原始碼注入方式，在相關部分加上日誌，可以得到最詳細的資料，但需要重新編譯
- 通過代理的方式，類似Fiddle 2，不過有侷限
- 通過高速攝像頭，可以方便得到視覺效果，而且不影響執行的效能，但不能得到更多的資料，且不好進行分析
PhantomJS
- 這是一個基於WebKit的命令列工具，可以在JS中呼叫WebKit引擎，方便進行自動化測試
通過程式碼注入方式來監測效能
- 可以得到頁面各元素渲染的順序
- 可以得到細緻的元素速度資料
- JS引擎GC的情況
- 他採用的方法是修改android的程式碼，然後重新編譯，在繪圖部分打日誌
- android的Web類應用開發和除錯工具，包括eventrecoder和remotejs
- remotejs可以實用console.log來獲取頁面中的資料，執行js等，解決了如何方便除錯的問題
- eventrecoder可以用來進行android上web的單元測試
- 一個JS的shell，基於v8實現，類似nodejs，不過功能要簡單很多
- 其中有一個模組Reflect可以用來分析js的語法，它的實現居然是從JavaScriptCore中將解析部分剝離出來，生成的結果類似SpiderMonkey的parser，這個工具可以用來簡化js相關分析工具的開發。
Ariya還提供了一些效能優化和需要注意的事項，如避免建立物件等，具體請參考其slide，建議大家等這個視訊出來後都看一下。
下面是其中的一頁，整個slide做得相當漂亮
Mobile Web & HTML5 Performance Optimization
整體來看這個session沒有什麼亮點，對於mobile web開發不太瞭解的同學可以看看，系統瞭解一下，演講者寫過很多書，比較善於整理和總結，但缺乏新意。
6月15號的會議
15號是velocity第一天的正式會議，sessions很多，整體時間也比14號長。
JavaScript & Metaperformance
果然到處都能見到Douglas，這次除了介紹js語言特點以外還不忘鄙視了一下java，感興趣的同學可以看看ppt。
Douglas說現在的JS效能測試都是騙人的，除了JSMeter看上去還行。
接下來是大家常聽到的：DOM是瓶頸，大部分時間花在layout、painting等工作上，不要過早優化，避免導致程式碼不易維護。。。
然後他說JS中還是有優秀部分的，順帶推廣自己的書JavaScript: The Good Parts。
最後忽悠大家用JSLint來作為效能監測工具，這……
Testing and Monitoring Mobile Apps
主要是Keynote產品的廣告，不過做得很不錯，介紹了Mobile Device Perspective 5，它是一個非常強大的手機測試工具，可以遠端操作真實的iphone、android手機，還可以執行自動化指令碼，監測應用效能等，是移動裝置開發和效能優化的利器。
但實現原理不清楚，懷疑是在越獄的手機上執行後臺程式，大家可以通過看視訊瞭解其功能，這是我15號上午印象最深的一個session，歡迎瞭解內幕的同學指教。
Real-Time Real-Fast
主要談使用WebSocket來減少overhead，可以用於實時性要求高的場景，然後推廣了一下dojo中的socket API，它可以簡化WebSocket的開發，並自動fallback到傳統的long-polling方式，其它沒聽到什麼特別的。
Performance Measurement and Case Studies at MSN
MSN的工程師分享了在效能優化方面的經驗和內部資料，我這邊記的一些要點：
- 之前太過於關注下載時間等網路資料，缺乏對實際展現效能的關注
- 應該更多關注渲染及展現時間，並提議瀏覽器增加這些監測API
- js越來越大了，要將js放底部或延遲載入及執行
- 延遲廣告的載入，看上去他們的廣告長寬是固定的，所以延遲是可行的
- 使用Data URL來顯示縮率圖，減少請求數
建議簡單看一下這個slide，裡面有一些效能優化對比測試的資料。
Improving Performance by Changing the Rules – From Fast to SPDY
主要介紹了SPDY對http的優化對比，在3G網路下效能提升效果顯著，看slide就好了，沒太多可聽的，雖然Google的ssl請求都支援SPDY了，但其它網站及少有支援的。
Understanding Mobile Web Browser Performance
主要內容是介紹了手機中的網路情況，手機為了節能，網路不會一直開啟，所以初次開啟時會有啟動網路的時間，而且3G網路延遲還是很高，也許4G會好點。
在android中只有4個執行緒來處理http請求，所以android中瀏覽器的併發不會超過4個。
android中的瀏覽器預設開啟了pipelining，是極少數預設開啟這個技術的瀏覽器。
10 Tricks for Mobile Performance
介紹了針對移動裝置進行效能優化的建議，具體內容建議看看slide就好了。
Know Your Engines: How to Make Your JavaScript Fast
重點推薦一下David的這個session，David是Mozilla的JS引擎工程師，之前在他的blog上學習到了很多JS引擎優化的細節，這次又有不少收穫，建議對JS引擎實現不太瞭解的同學抽空聽聽這個session，可以學到很多知識。
David首先講解了JS引擎中的JIT和GC實現原理，然後介紹如何根據這些原理來優化JS程式碼，如避免動態改變物件的型別來優化JIT的執行、減小使用全域性變數來減小GC、避免使用稀疏的陣列等。
Take it all off! Lossy Image Optimization
主要針對如何優化圖片這一主題，詳細介紹瞭如何優化圖片的大小，包括png、jpeg，有損、無失真壓縮等細節。通過一定程度的有失真壓縮，在效能和效果上進行權衡。
從目前HTTP Archive的資料來看，圖片是佔頻寬最多的部分（60%左右），對其進行優化可以明顯減少頻寬消耗。
WebPagetest Update
WebPagetest的作者Patrick詳細介紹了WebPagetest這一年來的改進，包括：
- 支援dynaTrace
- Web Page Replay
- 對外API
- 提供WPT Monitor來監控頁面效能變化的情況
建議關注這個效能優化工具。
6月16號的會議
Holistic Performance
John介紹了jQuery中如何進行效能優化的，一些注意的點等：
- 需要進行全域性考慮，執行快的程式碼有可能耗cpu和記憶體
- 用JS字典作為例子來解釋效能優化需要考慮很多方面，包括檔案大小、cpu、記憶體等，之前John在他的blog上討論過
- jQuery效能優化的準則：
[LIST] - 通過JSPerf來測試優化效果，JSPerf基於Benchmark.js，是一個很優秀的JS效能測試工具，它通過很多方法來保證測試結果的準確性
- 考慮全域性優化，細節優化意義不大，純js的效能問題很少見，基本上都是DOM效能問題
- 保持簡潔的程式碼，避免為了效能而減低可讀性
- 保證IE的效能，即便IE是最慢的瀏覽器，但由於市場佔用率高，IE的效能是最重要的
[/list]
Making the Web Instant
介紹了Chrome中的prerender，宣傳視訊很唬人，將原先需要等待6秒的頁面降到了0秒，看來要是大家都用Chrome，我們們也沒必要做效能優化了。
瀏覽器專欄
瀏覽器專欄和去年在北京的velocity類似，主要介紹瀏覽器的一些最新的進展，Chrome、Firefox、IE平時大家也都比較瞭解，所以沒太多特別的地方。
不過今年Opera首次出現，介紹了Opera的產品線，Opera在移動領域有兩個版本，mini和mobile，mobile是全功能的，而mini的渲染是由服務端完成的，原來Opera還有一個模擬器，可以用它來在桌面測試Opear mobile的展現效果。
HTML5, Flash and the Battle for Faster Cat Videos
來自YouTube的工程師介紹了YouTube中視訊播放器的一些經驗，並對HTML5中的video標籤和Flash進行了對比，HTML5最大的優勢是能和頁面中的其它元素更好地結合，而Flash目前在效能上要比HTML5好，尤其是視訊載入的速度。
最後建議主要使用Flash，而專門針對iOS使用者提供HTML5版本，因為iOS對YouTube API流量的貢獻不小。
The Impact of Ads on Performance and Improving Perceived Performance
這個session我並沒有聽，不過從發出來的ppt看，內容還是不錯的，介紹了Yahoo mail中如何改進廣告載入來提高頁面效能，有很多細節的技術方案。
參觀Google總部
17號我們前往位於Mountain View的Google總部進行了參觀，正如傳聞所說的，Google總部很大，裡面人很多。
看到了傳說中的恐龍骨架、飛船、大Nexus One、全景Google map、沙灘排球場，比起facebook工位要寬敞不少，還有很多4人一間的房間，裡面很安靜，傳說中空氣淨化開得很足也是真的，辦公室裡面空氣質量很不錯，關於Google總部的情況大家可以搜尋相關的資料，網上說的基本上靠譜。
Google總部裡有很多餐廳，裡面有各種風格的食物，還有中國、印度等不同地區的口味，比Facebook要大得多。
這裡感謝一下Tim在百忙中抽空帶我們到處參觀。
整體感受
這裡零碎寫下一些自己一些參會的感受：
- 和國內相比還是更容易遇到牛人，比如Ariya和David的兩個session是我覺得收穫最大的，但在國內很難聽到這樣深入的演講
- 最頭疼的問題是時差，上午11點就相當於北京夜裡2點，影響了開會的效率
- 今年效能優化主題已經逐漸轉向了自動化測試和持續整合，通過自動化的方法來保證效能
- 標準化也是一個很大趨勢，beacons和HAR這兩個標準都逐漸被大家接受
- 資料分析對效能優化來說至關重要，Facebook在這方面做得很專業，從他們招聘Web Optimization工程師的職位要求也能看得出來
最後，除了開會，我們還抽空參觀了漂亮的史丹佛大學。最後去參觀了巨集偉的金門大橋，矽谷和舊金山的氣候差距很大，忽然就變成陰雲密佈了。
原文：baidu-tech