資訊專(zhuān)欄INFORMATION COLUMN
摘要：四總結(jié)前端性能測(cè)試方案當(dāng)然，前端性能不僅僅表現(xiàn)在白屏卡頓問(wèn)題，也有可能是手機(jī)過(guò)度發(fā)熱等等。從用戶(hù)核心體驗(yàn)出發(fā)，我們認(rèn)為，前端性能最重要的參考標(biāo)準(zhǔn)就是要以最輕量的方式，給用戶(hù)最好的體驗(yàn)。
H5 頁(yè)面發(fā)版靈活，輕量，又具有跨平臺(tái)的特性，在業(yè)務(wù)上有很多應(yīng)用場(chǎng)景。但是同時(shí)對(duì)比 App，H5 的性能表現(xiàn)總是要遜色一籌，比如頁(yè)面打開(kāi)往往會(huì)出現(xiàn)白屏，滑動(dòng)列表等交互場(chǎng)景下也不如 Native 頁(yè)面流暢。針對(duì)這些白屏、卡慢之類(lèi)的問(wèn)題，我們測(cè)試該從哪些方面去展開(kāi)測(cè)試分析和數(shù)據(jù)對(duì)比呢？接下來(lái)筆者分享一些 H5 前端測(cè)試實(shí)踐的經(jīng)驗(yàn)，拋磚引玉，希望大家一起談?wù)?，一起挖掘更多有價(jià)值的課題。
一、開(kāi)篇：H5 頁(yè)面加載過(guò)程淺析如下圖所示，是精選平臺(tái)打開(kāi) H5 頁(yè)面的幾個(gè)過(guò)程截圖。
圖一到圖四可以簡(jiǎn)單分類(lèi)，圖一是 App 負(fù)責(zé)做的事情，主要是初始化 Webview 上下文；后面三張圖則是一個(gè)H5頁(yè)面加載的過(guò)程。其中，App 這個(gè)階段的耗時(shí)，主要是 Native 代碼的耗時(shí)，這里先不展開(kāi)討論，我們重點(diǎn)放在后面幾個(gè)階段。第四個(gè)圖是用戶(hù)直觀看到的第一屏頁(yè)面，我們通常稱(chēng)為首屏。
1）加載網(wǎng)絡(luò)請(qǐng)求
這個(gè)過(guò)程主要是 Webview 拿到 H5 頁(yè)面 url 之后，調(diào)用 loadUrl 方法，開(kāi)始去網(wǎng)絡(luò)上請(qǐng)求第一個(gè)資源文件。這個(gè)階段主要包含 dns 解析、建立網(wǎng)絡(luò)鏈接、數(shù)據(jù)傳輸?shù)暮臅r(shí)。
2）html 解析
Webview 拿到 html 返回后，需要從上至下解析 html 中的標(biāo)簽和內(nèi)容，識(shí)別外鏈資源、計(jì)算頁(yè)面框架的布局，并渲染繪制出來(lái)。在這個(gè)過(guò)程中會(huì)構(gòu)建出負(fù)責(zé)頁(yè)面結(jié)構(gòu)的 DOM Tree 和負(fù)責(zé)頁(yè)面布局展示的 Render Tree，如下圖所示：
3）外鏈資源加載
這部分主要是從網(wǎng)絡(luò)上加載外鏈的 css、圖片和 js 等，再重新填充到 html 中。之后重新進(jìn)行一次 layout 布局計(jì)算和頁(yè)面渲染繪制，此時(shí)看到的才是有完整內(nèi)容的頁(yè)面。如下圖所示，頁(yè)面需要等圖片和 css 加載出來(lái)后才能展示，js 也是外鏈資源，不過(guò)一般來(lái)說(shuō)，只要放在 html 底部加載，就不會(huì)阻塞頁(yè)面的渲染和展示。
二、實(shí)例分析：白屏問(wèn)題前面我們已經(jīng)了解了 H5 頁(yè)面加載過(guò)程，接下來(lái)如果遇到白屏，我們自然會(huì)問(wèn)，怎么才能知道頁(yè)面當(dāng)前處在哪個(gè)階段，每個(gè)階段耗時(shí)多長(zhǎng)，以及整體首屏加載的耗時(shí)呢？
首先看下通過(guò) PC Chrome 模擬 H5 頁(yè)面的情況。Chrome Devtool 提供的 Performance 工具，可以錄制頁(yè)面從第一個(gè)請(qǐng)求到加載完成的所有事件，通過(guò)這種方式可以很詳細(xì)的看到各階段做的事情和具體的耗時(shí)。
其中兩個(gè)最關(guān)鍵的首屏耗時(shí)指標(biāo)：domContentLoaded（首屏頁(yè)面可見(jiàn)）和onLoad（首屏加載完成）的耗時(shí)，除了圖示的方法，還可以通過(guò)在 console 里打印全局變量window.performance.timing，拿到時(shí)間戳并計(jì)算得到。
但實(shí)際我們要的是移動(dòng)設(shè)備的真機(jī)數(shù)據(jù)，這個(gè)才能真實(shí)反應(yīng)頁(yè)面性能和用戶(hù)體驗(yàn)。想要獲取 H5 真機(jī)耗時(shí)，一種方式是 js 代碼進(jìn)行上報(bào)；另一種是對(duì)于 Android 設(shè)備，可以用 remote-debug 的方式遠(yuǎn)程調(diào)試真機(jī)頁(yè)面。只需要保證 webview 調(diào)試開(kāi)關(guān)打開(kāi) & 與 PC USB 連接且開(kāi)啟 USB 調(diào)試，就可以在 PC Chrome 訪(fǎng)問(wèn) chrome://inspect 來(lái)獲取調(diào)試對(duì)象。之后參考 PC Chrome 模擬 H5 的方法即可拿到數(shù)據(jù)。
對(duì)于傳統(tǒng)頁(yè)面而言，實(shí)際分析發(fā)現(xiàn)大部分耗時(shí)還是在移動(dòng)網(wǎng)絡(luò)請(qǐng)求這部分，所以最直接有效的方式就是對(duì)頁(yè)面進(jìn)行直出改造，也就是改變先加載 html、再加載 css 等數(shù)據(jù)的情況，先在后端（比如 nodejs）并行加載首屏依賴(lài)的所有 css、js 和后臺(tái)接口數(shù)據(jù)，拼裝好一個(gè)完成的最終要呈現(xiàn)的 html 再回給前端，達(dá)到秒開(kāi)的效果。
三、實(shí)例分析：卡慢問(wèn)題有時(shí)候用戶(hù)在頁(yè)面交互的過(guò)程中會(huì)遇到卡慢，比如上下滑動(dòng)列表、左右切換或者輪播等。這個(gè)過(guò)程無(wú)非也是執(zhí)行 js、請(qǐng)求資源、計(jì)算新的頁(yè)面布局并渲染繪制這幾件事。通過(guò) Performance 分析就會(huì)發(fā)現(xiàn)，卡慢其實(shí)并不全是很多人認(rèn)為的“移送設(shè)備性能就是差”，有時(shí)候其實(shí)是假性卡頓。
比如下面這個(gè)就是熱區(qū)過(guò)小的問(wèn)題：
真卡的情況，往往腳本報(bào)錯(cuò)占了很大比重，直觀表現(xiàn)就是頁(yè)面是卡死，而不是變慢。其他的諸如內(nèi)存問(wèn)題，通常表現(xiàn)是頁(yè)面越來(lái)越卡，因?yàn)槭褂脮r(shí)間越長(zhǎng)，資源消耗越大。比如頁(yè)面使用了比較復(fù)雜的 canvas 動(dòng)畫(huà)、比較耗性能的 iframe 元素，或者直播流媒體，這種情況下容易出現(xiàn)內(nèi)存泄漏。
下面這個(gè)就是 dom 節(jié)點(diǎn)引發(fā)的內(nèi)存泄漏,不使用的 commentList 列表沒(méi)有釋放，越積越多到長(zhǎng)度幾萬(wàn)個(gè)的時(shí)候開(kāi)始卡頓。
四、總結(jié)：H5 前端性能測(cè)試方案當(dāng)然，前端性能不僅僅表現(xiàn)在白屏、卡頓問(wèn)題，也有可能是手機(jī)過(guò)度發(fā)熱等等。從用戶(hù)核心體驗(yàn)出發(fā)，我們認(rèn)為，H5 前端性能最重要的參考標(biāo)準(zhǔn)就是：要以最輕量的方式，給用戶(hù)最好的體驗(yàn)。從這個(gè)方向出發(fā)，我們積累了一些測(cè)試經(jīng)驗(yàn)，其中最重要的必過(guò)項(xiàng)是首屏速度（不僅提升用戶(hù)體驗(yàn)，還可以提升業(yè)務(wù)的轉(zhuǎn)化率），其次流暢度、流量和 CPU 等，某些場(chǎng)景下也是需要重點(diǎn)考量的點(diǎn)。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/11400.html
摘要：不過(guò)細(xì)想想，我郵只有前端的選修課啥的，課程也不是那么就業(yè)導(dǎo)向。至少目前，很少有大公司完全把作為前后端通用的技術(shù)棧。不能把簡(jiǎn)單看做是在服務(wù)端的延展。編譯這個(gè)思想在前端領(lǐng)域很重要不改變現(xiàn)有的語(yǔ)言環(huán)境同時(shí)進(jìn)行最佳的工程實(shí)踐。 P.S. 噴神請(qǐng)繞道，大神勿噴，不引戰(zhàn)，不攻擊，不鉆牛角尖。 大二時(shí)第一次接觸前端。許多同學(xué)估計(jì)都想過(guò)要做一個(gè)網(wǎng)站，大部分又是從PHP開(kāi)始的（誰(shuí)讓它是世界上最好的語(yǔ)言呢...
摘要：前言一直混跡社區(qū)突然發(fā)現(xiàn)自己收藏了不少好文但是管理起來(lái)有點(diǎn)混亂所以將前端主流技術(shù)做了一個(gè)書(shū)簽整理不求最多最全但求最實(shí)用。 前言 一直混跡社區(qū),突然發(fā)現(xiàn)自己收藏了不少好文但是管理起來(lái)有點(diǎn)混亂; 所以將前端主流技術(shù)做了一個(gè)書(shū)簽整理,不求最多最全,但求最實(shí)用。 書(shū)簽源碼 書(shū)簽導(dǎo)入瀏覽器效果截圖showImg(https://segmentfault.com/img/bVbg41b?w=107...
摘要：更多資源請(qǐng)文章轉(zhuǎn)自月份前端資源分享的作用數(shù)組元素隨機(jī)化排序算法實(shí)現(xiàn)學(xué)習(xí)筆記數(shù)組隨機(jī)排序個(gè)變態(tài)題解析上個(gè)變態(tài)題解析下中的數(shù)字前端開(kāi)發(fā)筆記本過(guò)目不忘正則表達(dá)式聊一聊前端存儲(chǔ)那些事兒一鍵分享到各種寫(xiě)給剛?cè)腴T(mén)的前端工程師的前后端交互指南物聯(lián)網(wǎng)世界的 更多資源請(qǐng)Star：https://github.com/maidishike... 文章轉(zhuǎn)自：https://github.com/jsfr...
摘要：接口管理獨(dú)立于的版本號(hào)，使用特性嗅探實(shí)現(xiàn)新舊的兼容，簡(jiǎn)單直觀。其中在網(wǎng)易有錢(qián)上使用了年多，支持了網(wǎng)易有錢(qián)的不斷增長(zhǎng)的業(yè)務(wù)需求，期間解決了很多遇到的通有的問(wèn)題。目前還沒(méi)有在線(xiàn)上系統(tǒng)中使用，目前正逐步將整體接入網(wǎng)易嚴(yán)選和網(wǎng)易推手。 showImg(https://upload-images.jianshu.io/upload_images/277783-33c33da3e99a070d.p...
閱讀 1277·2023-04-25 19:10
閱讀 1153·2021-09-10 10:50
閱讀 3039·2021-09-02 15:21
閱讀 1396·2019-08-30 15:52
閱讀 1694·2019-08-30 13:56
閱讀 2097·2019-08-30 12:53
閱讀 1879·2019-08-28 18:22
閱讀 2133·2019-08-26 13:47
