Web App和Native App效能對比

標籤：使用   移動   一個   複雜   服務   開啟   更新   lan   rip   

比起手機App，網站有一些明顯的優點。

• 跨平台：所有系統都能運行
• 免安裝：開啟瀏覽器，就能使用
• 快速部署：升級只需在伺服器更新代碼
• 超連結：可以與其他網站互連，可以被搜尋引擎檢索

但是，現實是怎樣呢？

（1）體驗差。手機App的操作流暢性，遠超網站。

（2）業界不支援。所有公司的移動端開發重點，幾乎都是原生app。

（3）使用者不在乎。大多數使用者都選擇使用手機app，而不是網站。

如果將來有一天，Web app會成為主流，一定有一個前提，那就是它的效能可以趕上Native app。

 

Web app輸給Native app的地方，不是介面（UI），而是操作效能。主要是互動（interaction）和動畫（animation）這兩方面，會出現卡頓（jank），使用者會感覺到明顯的時滯，有時簡直慢得難以忍受。

Web app的效能瓶頸，主要有以下原因。

（1）Web基於DOM，而DOM很慢。瀏覽器開啟網頁時，需要解析文檔，在記憶體中產生DOM結構，如果遇到複雜的文檔，這個過程是很慢的。可以想象一下，如果網頁上有上萬個、甚至幾十萬個形狀（不管是圖片或CSS），產生DOM需要多久？更不要提與其中某一個形狀互動了。

（2）DOM拖慢JavaScript。所有的DOM操作都是同步的，會堵塞瀏覽器。JavaScript操作DOM時，必須等前一個操作結束，才能執行後一個操作。只要一個操作有卡頓，整個網頁就會短暫失去響應。瀏覽器重繪網頁的頻率是60FPS（即16毫秒/幀），JavaScript做不到在16毫秒內完成DOM操作，因此產生了跳幀。使用者體驗上的不流暢、不連貫就源於此。

（3）網頁是單線程的。現在的瀏覽器對於每個網頁，只用一個線程處理。所有工作都在這一個線程上完成，包括布局、渲染、JavaScript執行、映像解碼等等，怎麼可能不慢？

（4）網頁沒有硬體加速。網頁都是由CPU處理的，沒用GPU進行圖形加速。

上面這些原因，對於PC還不至於造成嚴重的效能問題，但是手機的硬體資源相對有限，使用者互動又相對頻繁，結果跟Native app一比，就完全落在了下風。

Web App和Native App效能對比