如何優化運行在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項目進一步優化,到目前為止效果非常明顯。不廢話了,以下就是優化點:

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM