感謝公司和部門的支持，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-tools
- android的Web類應用開發和調試工具，包括eventrecoder和remotejs
- remotejs可以實用console.log來獲取頁面中的數據，執行js等，解決了如何方便調試的問題
- eventrecoder可以用來進行android上web的單元測試
-
hammerjs
- 一個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性能優化的準則：
- 通過JSPerf來測試優化效果，JSPerf基於Benchmark.js，是一個很優秀的JS性能測試工具，它通過很多方法來保證測試結果的準確性
- 考慮全局優化，細節優化意義不大，純js的性能問題很少見，基本上都是DOM性能問題
- 保持簡潔的代碼，避免爲了性能而減低可讀性
- 保證IE的性能，即便IE是最慢的瀏覽器，但由於市場佔用率高，IE的性能是最重要的
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工程師的職位要求也能看得出來
最後，除了開會，我們還抽空參觀了漂亮的斯坦福大學：
最後去參觀了宏偉的金門大橋，硅谷和舊金山的氣候差距很大，忽然就變成陰雲密佈了：
