2012-03-23 133 views
8

我們正在研究移動設備(Android + iOS)的HTML5應用程序。但最大的問題是內存消耗 - 內存使用量增長非常快,應用程序變得遲緩。移動webkit內存消耗

與HTML(JavaScript)應用程序中的內存泄漏作鬥爭的最佳實踐,提示,工具,解決方案等是什麼?

P.S.我們只針對Webkit瀏覽器

回答

7

最近有關於此主題的一些非常棒的文章。有一些非常令人驚訝的對象創建來源,除非您調整它,否則不會引起您的注意。通常,問題不在於內存使用,而是實際收集應用程序緩慢泄漏內存所需的垃圾回收週期。

這篇文章是我最近上的話題讀過的最好的:http://www.scirra.com/blog/76/how-to-write-low-garbage-real-time-javascript

至於工具打擊/診斷問題,谷歌Chrome的Speedtracer想到的。當然,對Chrome進行調整並不能保證所有瀏覽器都能進行調整,但大多數導致Chrome中創建對象的事情都是JS規範所常見的,因爲它是由所有瀏覽器實現的。

需要考慮的一件重要事情是RAM的使用和視頻RAM的使用是不一樣的。一個最佳做法是確定您的用戶界面的哪些部分正在硬件加速並確保它們很小(即一次適合在屏幕上)。如果屏幕硬件的滾動部分增加很多,則會出現GPU撕裂/平鋪和滯後滾動。您可以使用iOS模擬器部分檢測到這一點。這篇文章簡要介紹了這個想法:http://devinsheaven.com/turn-your-iphone-wacky-and-make-your-iphone-application-better/

最後,每個工程師不時遇到一堆JavaScript中常見的內存泄漏模式。 IBM有一個很好的名單。我不能發佈兩個以上的鏈接,因爲我是一個n00b,但你可以谷歌的「通用JavaScript內存泄漏」,這可能是第一個結果。

3

人們可能在Chrome中發現的其他一些診斷工具是任務管理器,時間軸面板和堆分析器。

瀏覽器 - 鉻金絲雀(27.0.1447。3金絲雀)

  • 任務管理器:進入工具 - >任務管理器//右鍵單擊標題標籤,並選中「JavaScript的記憶」

  • 時間軸標籤:工具 - >工具 - 開發 - >時間軸//點擊記錄,做一些互動,然後停止記錄

  • 堆探查器:工具 - >開發者工具 - >配置文件//點擊「取堆快照」

  • 遠程調試

  • 深存儲探查

「3快照」 技術//演示 「消除在Gmail內存泄漏」