如何優化運行在webkit上的web app

　　近來公司有個web app 項目運行在移動版android系統上，發如今電腦上跑的很流暢的web頁面在移動版webkit上很是不流暢。根本沒法和native app相媲美。HTML5的性能還真是讓人糾結啊的egg pain...

　　後來發現國外的 Netflix 網絡電視服務提供商的web app，全是HTML5實現的，並且2年前就跑在了250多種移動設備上，在40多個國家上市，UI很是流暢。因此以爲HTML5仍是勉強有救的。

公司找了Netflix的資料，決定對自身的web app項目進一步優化，到目前爲止效果很是明顯。不廢話了，如下就是優化點：

一、使用設置內聯樣式取代改變class，即直接設置style來改變樣式

 這一點，我一開始也沒法理解，但通過測試至少在硬件性能較差的移動版webkit內核瀏覽器上就是這樣的

二、有些css選擇器寫法會導到深度重繪，應避免這樣的css選擇器寫法，好比：

.list-showing #browse { … }

 

三、當webkit-transition中的duration屬性大於0時，在animation週期中會致使 重複屢次重繪

 

四、reuse instead of allocate&destroy

重用代替從新申明建立和銷燬，重用已有的dom而不是建立新的刪除舊的，以減小dom樹的更新

 

五、don’t do in software what can be handled by hardware

能用硬件加速就用硬件加速，硬件加速方式直接就是paint出來，而非硬件加速方式則須要計算，渲染，再paint

 

六、如下幾個css屬性要注意

-webkit-gradient

-webkit-box-shadow

background-position

background-repeat

border

適當的選擇使用它們

 

七、靜態圖片渲染永遠快於css渲染

css須要經過cpu來繪製，一旦圖片下載完成，渲染速度永遠快於css實現的方式，css繪製 效果須要在佈局上從新計算，渲染，繪製

 

八、儘可能少作動畫，若是要，就使用transition

在各設備上支持的比較好；

對應的動畫屬性也較多；

渲染引擎會對此進行優化；

-webkit-transition-property: opacity, -webkit-transform; 這兩個屬性在硬件加速下不須要重繪

 

九、強制某些元素擁有硬件加速能力

-webkit-transform: translateZ(0);

而這個屬性就像是之前zoom:1那樣不會對效果產生任何引響，但確使對應的元素擁有了硬件回事能力

 

十、內存注意項

避免內存無限增加;

應最少的丟掉再建立元素(dom)；

video設置爲display:none可能會釋放掉內存；

對象太多會致使頻繁而且很慢的垃圾回收；

閉包什麼的會致使內存持續上升;

 

十一、層(我理解爲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，而後你就能夠看到你的網頁各區域的狀態了

色塊說明：

一、紅色compositing layer

表明的是 組合層,左上角的數字表明recalculations從新計算次數

渲染層會被扁平化(像素化)爲單一的圖片形式，有時會被映射到GPU紋理上

二、黃色container layer

表明內容層, 沒有紅色層 (no backing surface)-子元素爲layer

三、青色overflow box

no backing surface-debugging tool.(不知道怎麼翻譯，不過這個不影響)

四、綠色 tiled layer

layer寬或高大於1024px

 

 

chrome中也有相似的調試功能，(mac os, windows都有)

在chrome瀏覽器地址欄中輸入 about:flags

而後把 composited render layer borders 這個選項 Enable

 

注：轉載請註明出處博客園：綠茶-續(偷飯貓)email: willian12345@126.com