H5Crash研究_html/css
來源：懂視網
責編：小采
時間：2020-11-27 16:29:25
H5Crash研究_html/css
H5Crash研究_html/css_WEB-ITnose:我們知道，支撐頁面在 webview 上良好運轉的前提是具備一個高效并且穩定的 webview 容器，而容器的高效穩定不僅僅由容器提供方來保障，也需要容器使用者遵守一些基本準則，否則就有可能出現頁面 Crash 的情況，這些準則是什么？什么樣的上層代碼會引起容器異
導讀H5Crash研究_html/css_WEB-ITnose:我們知道，支撐頁面在 webview 上良好運轉的前提是具備一個高效并且穩定的 webview 容器，而容器的高效穩定不僅僅由容器提供方來保障，也需要容器使用者遵守一些基本準則，否則就有可能出現頁面 Crash 的情況，這些準則是什么？什么樣的上層代碼會引起容器異
我們知道，支撐頁面在 webview 上良好運轉的前提是具備一個高效并且穩定的 webview 容器，而容器的高效穩定不僅僅由容器提供方來保障，也需要容器使用者遵守一些基本準則，否則就有可能出現頁面 Crash 的情況，這些準則是什么？什么樣的上層代碼會引起容器異常退出？這是本文需要闡述的內容。
H5 Crash 問題概況
下圖是 H5 Crash 的大致流程圖：
由于前端沒辦法捕捉到頁面 Crash 的狀態和堆棧，但是 H5 頁面上發生的錯誤會傳遞到 Java 和更底層的 Native 直到容器異常退出，在退出的那一刻，容器會將堆棧寫入到日志中，當下次打開容器時（也可能是定時上報）就會上報這些堆棧信息。
H5 Crash 原因初探
測試代碼 倉庫地址 ：
git clone https://github.com/barretlee/h5crash.git;cd demo;
注意：代碼需要在 Webview 容器中測試，PC 瀏覽器下不會出現異常。
H5 Crash 的原因不太明顯，但是從經驗上判斷和摸索，大致歸類為以下三種：
1. 內存問題
測試方法：使用閉包，不斷增加內存量，看看增加到哪個區間大小， webview 容器會出現異常 測試地址： https://rawgit.com/barretlee/h5crash/master/demo/crash-memory.html （微信、微博或者其他客戶端打開該頁面的用戶，可以點進去測試下，選擇 100M 內存，不出意外，你的客戶端會閃退。）
存在的干擾：這種測試存在比較多的干擾，比如設備類型、系統類型（iOS/Android)、和設備內存運行狀態等。 2. Layers 數問題
Layers 數的獲取比較麻煩，Chrome Driver 沒有提供該數據的接口，目前也沒有比較好的辦法拿到這個數據。
測試方法：通過不同的方式創建層，觀察頁面的 Crash 情況 測試地址： https://rawgit.com/barretlee/h5crash/master/demo/crash-layer.html
實際上，創建多個層，也是對內存的巨大消耗，頁面 Crash 可能還是因為內存消耗過大 3. 并發過多問題
測試方法：嘗試并發發出多種不同的請求（Fetch請求、XHR 請求、Script/CSS 資源請求），觀察頁面 Crash 情況 測試地址： https://rawgit.com/barretlee/h5crash/master/demo/crash-request.html
存在的干擾：設備的種類、設備的 CPU 使用情況和網絡狀況等。 H5 Crash 測試結果
測試結果：
通過 opacity、animation、positon 等方式創建層，即便是 1w 個，頁面也沒有明顯變化；但是使用 transform 創建 2k~5k 個層，頁面會卡頓幾秒后立即閃退； 內存是條紅線，測試發現，一次性消耗 20M 的內存，會導致客戶端立即閃退； 并發請求也是存在響應問題的，Fetch API 和 CSS Resource 并發 1k 請求沒有出現問題，但是 XHR 和 Script Resource 請求，問題特別明顯，雖然沒有導致頁面閃退，但是頁面已經進入了假死狀態。 以上臨界值還可以繼續精確。
小結
本文主要是對 H5 Crash 做了一個預研，測試可能存在諸多誤差，測試方法也需要改進，不過沿著這些的思路考究會比較容易找到結論。
后續會給出比較有意義的邊界數據以及探測工具。
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
H5Crash研究_html/css
H5Crash研究_html/css_WEB-ITnose:我們知道，支撐頁面在 webview 上良好運轉的前提是具備一個高效并且穩定的 webview 容器，而容器的高效穩定不僅僅由容器提供方來保障，也需要容器使用者遵守一些基本準則，否則就有可能出現頁面 Crash 的情況，這些準則是什么？什么樣的上層代碼會引起容器異
