近來公司有個web app 專案執行在移動版android系統上，發現在電腦上跑的很流暢的web頁面在移動版webkit上非常不流暢。根本無法和native app相媲美。HTML5的效能還真是讓人糾結啊的egg pain...
後來發現國外的 Netflix 網路電視服務提供商的web app，全是HTML5實現的，而且2年前就跑在了250多種移動裝置上，在40多個國家上市，UI非常流暢。所以覺得HTML5還是勉強有救的。
公司找了Netflix的資料，決定對自身的web app專案進一步優化，到目前為止效果非常明顯。不廢話了，以下就是優化點：
1、使用設定內聯樣式取代改變class，即直接設定style來改變樣式
這一點，我一開始也無法理解，但經過測試至少在硬體效能較差的移動版webkit核心瀏覽器上就是這樣的
2、有些css選擇器寫法會導到深度重繪，應避免這樣的css選擇器寫法，比如：
.list-showing #browse { … }
3、當webkit-transition中的duration屬性大於0時，在animation週期中會導致 重複多次重繪
4、reuse instead of allocate&destroy
重用代替重新申明建立和銷燬，重用已有的dom而不是建立新的刪除舊的，以減少dom樹的更新
5、don’t do in software what can be handled by hardware
能用硬體加速就用硬體加速，硬體加速方式直接就是paint出來，而非硬體加速方式則需要計算，渲染，再paint
6、以下幾個css屬性要注意
-webkit-gradient
-webkit-box-shadow
background-position
background-repeat
border
適當的選擇使用它們
7、靜態圖片渲染永遠快於css渲染
css需要通過cpu來繪製，一旦圖片下載完成，渲染速度永遠快於css實現的方式，css繪製 效果需要在佈局上重新計算，渲染，繪製
8、儘量少做動畫，如果要，就使用transition
在各裝置上支援的比較好；
對應的動畫屬性也較多；
渲染引擎會對此進行優化；
-webkit-transition-property: opacity, -webkit-transform; 這兩個屬性在硬體加速下不需要重繪
9、強制某些元素擁有硬體加速能力
-webkit-transform: translateZ(0);
而這個屬性就像是以前zoom:1那樣不會對效果產生任何引響，但確使對應的元素擁有了硬體回事能力
10、記憶體注意項
避免記憶體無限增長;
應最少的丟掉再建立元素(dom)；
video設定為display:none可能會釋放掉記憶體；
物件太多會導致頻繁並且很慢的垃圾回收；
閉包什麼的會導致記憶體持續上升;
11、層(我理解為div)
減少層的數量
層保持越小越好
儘量少的去更新層
合理組合層
=============================== i am 分割線 ====================================
如何使用除錯工具來幫助優化？
開啟瀏覽器的除錯功能safari (我的是在mac os上，windows上不知道有木有，好像safari6.0後windows上就木有了)
在safari中顯示debug選單項，需要在terminal程式中輸入
defaults write com.apple.Safari \ IncludeInternalDebugMenu 1
然後就可以在safari選單欄上看到多了一個debug選項
在debug選單項內中找到show composition borders，然後你就可以看到你的網頁各區域的狀態了
色塊說明：
1、紅色compositing layer
代表的是 組合層,左上角的數字代表recalculations重新計算次數
渲染層會被扁平化(畫素化)為單一的圖片形式，有時會被對映到GPU紋理上
2、黃色container layer
代表內容層, 沒有紅色層 (no backing surface)-子元素為layer
3、青色overflow box
no backing surface-debugging tool.(不知道怎麼翻譯，不過這個不影響)
4、綠色 tiled layer
layer寬或高大於1024px
chrome中也有類似的除錯功能，(mac os, windows都有)
在chrome瀏覽器位址列中輸入 about:flags
然後把 composited render layer borders 這個選項 Enable
注：轉載請註明出處部落格園：綠茶-續(偷飯貓)email: willian12345@126.com