在移動(dòng)互聯(lián)網(wǎng)時(shí)代，應(yīng)用的頁(yè)面渲染速度對(duì)于用戶體驗(yàn)至關(guān)重要。相對(duì)于原生頁(yè)面，Web頁(yè)面的性能存在多方面的技術(shù)挑戰(zhàn)。本文以HarmonyOS的ArkWeb組件為基礎(chǔ)，介紹了Web頁(yè)面加載中的影響因素以及對(duì)應(yīng)的優(yōu)化方案。

Web頁(yè)面加載性能優(yōu)化指導(dǎo)

Web頁(yè)面加載流程

Web頁(yè)面加載包含網(wǎng)絡(luò)連接、資源下載、DOM解析、JavaScript代碼編譯執(zhí)行和渲染等關(guān)鍵環(huán)節(jié)，本文主要針對(duì)網(wǎng)絡(luò)連接、資源下載和完整頁(yè)面渲染這些關(guān)鍵節(jié)點(diǎn)的耗時(shí)進(jìn)行優(yōu)化。

預(yù)啟動(dòng)Web渲染進(jìn)程：預(yù)啟動(dòng)Web渲染進(jìn)程指用戶可以在業(yè)務(wù)需要的Web頁(yè)面啟動(dòng)前，加載一個(gè)空白的Web組件，在至少一個(gè)Web組件存活時(shí)，Web渲染進(jìn)程進(jìn)程會(huì)一直存在，節(jié)省了用戶后續(xù)啟動(dòng)Web組件拉起渲染進(jìn)程的時(shí)間，加快頁(yè)面加載速度。

預(yù)解析：預(yù)解析指預(yù)先對(duì)DNS進(jìn)行解析，可以節(jié)省DNS解析的時(shí)間，從而優(yōu)化Web的加載耗時(shí)。

預(yù)連接：預(yù)連接包含預(yù)解析的步驟，可以在用戶請(qǐng)求頁(yè)面之前提前進(jìn)行DNS解析和socket連接建立，這樣當(dāng)用戶真正請(qǐng)求頁(yè)面時(shí)，服務(wù)器和瀏覽器之間已經(jīng)建立好了連接，可以直接傳輸數(shù)據(jù)，減少了網(wǎng)絡(luò)延遲，提升了頁(yè)面加載速度。

預(yù)下載：預(yù)下載指在頁(yè)面加載之前提前下載所需的資源，以避免在頁(yè)面加載過(guò)程中資源下載導(dǎo)致的阻塞和耗時(shí)。通過(guò)預(yù)下載，可以在瀏覽器加載頁(yè)面時(shí)，提前獲取到所需的資源如圖片、CSS文件、JavaScript文件等。通過(guò)提前下載這些資源，可以避免在頁(yè)面加載時(shí)因?yàn)橘Y源未加載完成而導(dǎo)致頁(yè)面渲染延遲的情況發(fā)生。通過(guò)合理地使用預(yù)下載技術(shù)，用戶在訪問(wèn)頁(yè)面時(shí)可以更快地看到頁(yè)面內(nèi)容，提高整體性能，提升用戶體驗(yàn)。

預(yù)渲染：預(yù)渲染指在后臺(tái)對(duì)需要加載的頁(yè)面進(jìn)行預(yù)先渲染，提前完成整個(gè)頁(yè)面加載的流程。當(dāng)用戶需要訪問(wèn)該頁(yè)面時(shí)，可以直接切換至前臺(tái)展示，實(shí)現(xiàn)頁(yè)面“秒開(kāi)”的效果。預(yù)渲染要求在進(jìn)行DOM解析、JavaScript執(zhí)行和頁(yè)面渲染之前，已經(jīng)完成了所需資源的下載工作，否則可能會(huì)導(dǎo)致頁(yè)面內(nèi)容不完整或者渲染錯(cuò)誤的情況。通過(guò)預(yù)渲染，可以顯著減少用戶等待頁(yè)面加載的時(shí)間，特別是對(duì)于一些需要加載大量資源或者有復(fù)雜交互的頁(yè)面。

預(yù)取POST：預(yù)取POST指當(dāng)即將加載的Web頁(yè)面中存在POST請(qǐng)求且POST請(qǐng)求耗時(shí)較長(zhǎng)時(shí)，可對(duì)POST請(qǐng)求進(jìn)行預(yù)獲取，消除等待POST請(qǐng)求數(shù)據(jù)下載完成的耗時(shí)，當(dāng)用戶真正發(fā)起POST請(qǐng)求時(shí)，進(jìn)行攔截替換，加快頁(yè)面加載速度，提高用戶體驗(yàn)。

預(yù)編譯JavaScript生成字節(jié)碼緩存（Code Cache）：該方案會(huì)將使用到的JavaScript文件編譯成字節(jié)碼并緩存到本地，在頁(yè)面首次加載時(shí)節(jié)省編譯時(shí)間。

資源攔截替換的JavaScript生成字節(jié)碼緩存（Code Cache）：該方案會(huì)將資源攔截替換場(chǎng)景下的JavaScript文件編譯成字節(jié)碼并緩存到本地，節(jié)省在頁(yè)面非首次加載時(shí)的編譯時(shí)間。

離線資源免攔截注入：在頁(yè)面加載之前，離線資源免攔截注入會(huì)將需要使用的圖片、樣式表和腳本資源注入到內(nèi)存緩存中，節(jié)省頁(yè)面首次加載時(shí)的網(wǎng)絡(luò)請(qǐng)求時(shí)間。

資源攔截替換加速：在原本的資源攔截替換接口基礎(chǔ)上，資源攔截替換加速支持了ArrayBuffer格式的入?yún)ⅲ?a target="_blank">開(kāi)發(fā)者無(wú)需在應(yīng)用側(cè)進(jìn)行ArrayBuffer到String格式的轉(zhuǎn)換，可直接使用ArrayBuffer格式的數(shù)據(jù)進(jìn)行攔截替換。?

圖1Web頁(yè)面加載流程

由于所有的關(guān)鍵點(diǎn)都是建立在預(yù)處理的思路上，因此如果用戶實(shí)際并未打開(kāi)預(yù)處理的Web頁(yè)面，將會(huì)造成額外的資源消耗。各優(yōu)化方法具體的效果、代價(jià)和適用場(chǎng)景的對(duì)比如下表所示。

預(yù)啟動(dòng)Web渲染進(jìn)程

?原理介紹

此方案適用于Web頁(yè)面啟動(dòng)場(chǎng)景。開(kāi)發(fā)者需額外創(chuàng)建一個(gè)空白的ArkWeb組件，它雖不顯示給用戶，但會(huì)提前拉起渲染進(jìn)程，且該進(jìn)程在Web組件全部銷毀前與應(yīng)用側(cè)全局共用，可節(jié)省后續(xù)組件加載時(shí)啟動(dòng)渲染進(jìn)程的時(shí)間。不過(guò)，創(chuàng)建此組件會(huì)消耗約200Mb內(nèi)存和算力。 建議在Web頁(yè)面啟動(dòng)前（如應(yīng)用冷啟動(dòng)或廣告階段）執(zhí)行該方案，若冷啟動(dòng)無(wú)法進(jìn)行，可在空閑時(shí)間啟動(dòng)。

圖2預(yù)啟動(dòng)Web渲染流程

預(yù)解析和預(yù)連接優(yōu)化

原理介紹 如下圖所示，在應(yīng)用啟動(dòng)和UIAbility的onCreate生命周期后，Web組件才能進(jìn)行初始化和運(yùn)行。在ArkWeb組件運(yùn)行階段，會(huì)經(jīng)過(guò)onAppear、load、onPageBegin、onPageEnd步驟。預(yù)解析、預(yù)連接優(yōu)化適用于Web頁(yè)面啟動(dòng)和跳轉(zhuǎn)場(chǎng)景，例如，應(yīng)用啟動(dòng)時(shí)需要加載Web首頁(yè)。當(dāng)開(kāi)發(fā)者已經(jīng)創(chuàng)建一個(gè)ArkWeb組件的實(shí)例后，可以選擇不同時(shí)機(jī)對(duì)當(dāng)前ArkWeb組件設(shè)置URL并進(jìn)行預(yù)解析、預(yù)連接：

如下圖中a節(jié)點(diǎn)所示，如果是應(yīng)用首頁(yè)，推薦在ArkWeb組件初始化創(chuàng)建后設(shè)置首頁(yè)的URL，進(jìn)行預(yù)解析、預(yù)連接；

如下圖中b節(jié)點(diǎn)所示，如果是應(yīng)用內(nèi)頁(yè)面，推薦ArkWeb組件onAppear階段設(shè)置當(dāng)前頁(yè)面的URL，進(jìn)行預(yù)解析、預(yù)連接；

如下圖中c節(jié)點(diǎn)所示，當(dāng)前頁(yè)面完成加載后，可以設(shè)置用戶下一步可能點(diǎn)擊頁(yè)面的URL，進(jìn)行預(yù)解析、預(yù)連接，推薦在onPageEnd及后續(xù)時(shí)機(jī)進(jìn)行。

圖3預(yù)連接優(yōu)化原理圖

預(yù)下載優(yōu)化

原理介紹

適用于Web頁(yè)面啟動(dòng)和跳轉(zhuǎn)場(chǎng)景。在ArkWeb組件運(yùn)行的onPageEnd階段，可設(shè)置URL提前下載頁(yè)面所需資源，能消除資源下載耗時(shí)及對(duì)DOM解析和JS代碼編譯執(zhí)行的阻塞耗時(shí)，但會(huì)消耗額外流量和內(nèi)存，適合高頻頁(yè)面。預(yù)下載行為包括連接和資源下載，耗時(shí)可能達(dá)700ms以上，預(yù)下載完成后當(dāng)前組件連接關(guān)閉，如需下一個(gè)頁(yè)面預(yù)連接需顯式調(diào)用接口。

圖4預(yù)下載優(yōu)化原理圖

預(yù)渲染優(yōu)化

原理介紹

預(yù)渲染優(yōu)化適用于Web頁(yè)面啟動(dòng)和跳轉(zhuǎn)場(chǎng)景，例如，進(jìn)入首頁(yè)后，跳轉(zhuǎn)到其他子頁(yè)。與預(yù)連接、預(yù)下載不同的是，預(yù)渲染需要開(kāi)發(fā)者額外創(chuàng)建一個(gè)新的ArkWeb組件，并在后臺(tái)對(duì)其進(jìn)行預(yù)渲染，此時(shí)該組件并不會(huì)立刻掛載到組件樹(shù)上，即不會(huì)對(duì)用戶呈現(xiàn)(組件狀態(tài)為Hidden和InActive)，開(kāi)發(fā)者可以在后續(xù)使用中按需動(dòng)態(tài)掛載。 具體原理如下圖所示，首先需要定義一個(gè)自定義組件封裝ArkWeb組件，該ArkWeb組件被離線創(chuàng)建，被包含在一個(gè)無(wú)狀態(tài)的節(jié)點(diǎn)NodeContainer中，并與相應(yīng)的NodeController綁定。該ArkWeb組件在后臺(tái)完成預(yù)渲染后，在需要展示該ArkWeb組件時(shí)，再通過(guò)NodeController將其掛載到ViewTree的NodeContainer中，即通過(guò)NodeController綁定到對(duì)應(yīng)的NodeContainer組件。預(yù)渲染通用實(shí)現(xiàn)的步驟如下：

創(chuàng)建自定義ArkWeb組件：開(kāi)發(fā)者需要根據(jù)實(shí)際場(chǎng)景創(chuàng)建封裝一個(gè)自定義的ArkWeb組件，該ArkWeb組件被離線創(chuàng)建。

創(chuàng)建并綁定NodeController：實(shí)現(xiàn)NodeController接口，用于自定義節(jié)點(diǎn)的創(chuàng)建、顯示、更新等操作的管理。并將對(duì)應(yīng)的NodeController對(duì)象放入到容器中，等待調(diào)用。

綁定NodeContainer組件：將NodeContainer與NodeController進(jìn)行綁定，實(shí)現(xiàn)動(dòng)態(tài)組件頁(yè)面顯示。

圖5預(yù)渲染優(yōu)化原理圖

預(yù)取POST請(qǐng)求優(yōu)化

原理介紹

預(yù)取POST請(qǐng)求適用于Web頁(yè)面啟動(dòng)和跳轉(zhuǎn)場(chǎng)景，當(dāng)即將加載的Web頁(yè)面中存在POST請(qǐng)求且POST請(qǐng)求耗時(shí)較長(zhǎng)時(shí)，會(huì)導(dǎo)致頁(yè)面加載時(shí)間增加，可以選擇不同時(shí)機(jī)對(duì)POST請(qǐng)求進(jìn)行預(yù)獲取，消除等待POST請(qǐng)求數(shù)據(jù)下載完成的耗時(shí)，具體有以下兩種場(chǎng)景可供參考： 1、如果是應(yīng)用首頁(yè)，推薦在ArkWeb組件創(chuàng)建后或者提前初始化Web內(nèi)核后，對(duì)首頁(yè)的POST請(qǐng)求進(jìn)行預(yù)取，如XComponent.onCreate()、自定義組件的生命周期函數(shù)aboutToAppear()。 2、當(dāng)前頁(yè)面完成加載后，可以對(duì)用戶下一步可能點(diǎn)擊頁(yè)面的POST請(qǐng)求進(jìn)行預(yù)取，推薦在Web組件的生命周期函數(shù)onPageEnd()及后續(xù)時(shí)機(jī)進(jìn)行。

預(yù)編譯JavaScript生成字節(jié)碼緩存（Code Cache）

原理介紹

預(yù)編譯JavaScript生成字節(jié)碼緩存適用于在頁(yè)面加載之前提前將即將使用到的JavaScript文件編譯成字節(jié)碼并緩存到本地，在頁(yè)面首次加載時(shí)節(jié)省編譯時(shí)間。

開(kāi)發(fā)者需要?jiǎng)?chuàng)建一個(gè)無(wú)需渲染的離線Web組件，用于進(jìn)行預(yù)編譯，在預(yù)編譯結(jié)束后使用其他Web組件加載對(duì)應(yīng)的業(yè)務(wù)網(wǎng)頁(yè)。

資源攔截替換的JavaScript生成字節(jié)碼緩存（Code Cache）

原理介紹

對(duì)資源攔截替換場(chǎng)景下的JavaScript文件進(jìn)行編譯和緩存，節(jié)省非首次加載時(shí)的編譯時(shí)間。

圖6 JS資源編譯執(zhí)行流程 圖7 資源攔截替換后JS資源編譯執(zhí)行流程 Web組件默認(rèn)支持HTTP協(xié)議的JavaScript生成字節(jié)碼緩存，也支持自定義協(xié)議的JavaScript生成字節(jié)碼緩存，具體步驟如下：

開(kāi)發(fā)者首先需要在Web組件運(yùn)行前，向Web組件注冊(cè)自定義協(xié)議。

其次需要攔截自定義協(xié)議的JavaScript，設(shè)置ResponseData和ResponseDataID。

離線資源免攔截注入

原理介紹

在頁(yè)面加載前，將圖片、樣式表和腳本資源注入內(nèi)存緩存，節(jié)省首次加載的網(wǎng)絡(luò)請(qǐng)求時(shí)間。

說(shuō)明

開(kāi)發(fā)者需創(chuàng)建一個(gè)無(wú)需渲染的離線Web組件，用于將資源注入到內(nèi)存緩存中，使用其他Web組件加載對(duì)應(yīng)的業(yè)務(wù)網(wǎng)頁(yè)。

僅使用HTTP或HTTPS協(xié)議請(qǐng)求的資源可被注入進(jìn)內(nèi)存緩存。

內(nèi)存緩存中的資源由內(nèi)核自動(dòng)管理，當(dāng)注入的資源過(guò)多導(dǎo)致內(nèi)存壓力過(guò)大，內(nèi)核自動(dòng)釋放未使用的資源，應(yīng)避免注入大量資源到內(nèi)存緩存中。

正常情況下，資源的有效期由提供的Cache-Control或Expires響應(yīng)頭控制其有效期，默認(rèn)的有效期為86400秒，即1天。

資源的MIMEType通過(guò)提供的參數(shù)中的Content-Type響應(yīng)頭配置，Content-Type需符合標(biāo)準(zhǔn)，否則無(wú)法正常使用，MODULE_JS必須提供有效的MIMEType，其他類型可不提供。

僅支持通過(guò)HTML中的標(biāo)簽加載。

如果業(yè)務(wù)網(wǎng)頁(yè)中的script標(biāo)簽使用了crossorigin屬性，則必須在接口的responseHeaders參數(shù)中設(shè)置Cross-Origin響應(yīng)頭的值為anoymous或use-credentials。

當(dāng)調(diào)用webview.WebviewController.SetRenderProcessMode(web_webview.RenderProcessMode.MULTIPLE)接口后，應(yīng)用會(huì)啟動(dòng)多渲染進(jìn)程模式，此方案在此場(chǎng)景下不會(huì)生效。

單次調(diào)用最大支持注入30個(gè)資源，單個(gè)資源最大支持10Mb。

資源攔截替換加速

原理介紹

資源攔截替換加速在原本的資源攔截替換接口基礎(chǔ)上新增支持了ArrayBuffer格式的入?yún)ⅲ_(kāi)發(fā)者無(wú)需在應(yīng)用側(cè)進(jìn)行ArrayBuffer到String格式的轉(zhuǎn)換，可直接使用ArrayBuffer格式的數(shù)據(jù)進(jìn)行攔截替換。

總結(jié)

本文深入探討了Web頁(yè)面加載的原理和優(yōu)化方法，為開(kāi)發(fā)者提供了重要的指導(dǎo)和思路。在當(dāng)今互聯(lián)網(wǎng)時(shí)代，用戶對(duì)網(wǎng)頁(yè)加載速度和體驗(yàn)要求越來(lái)越高，因此頁(yè)面加載優(yōu)化成為開(kāi)發(fā)者必須重視的一環(huán)。通過(guò)理解Web頁(yè)面加載的原理，開(kāi)發(fā)者可以更好地處理頁(yè)面加載與優(yōu)化的相關(guān)問(wèn)題，提升應(yīng)用的整體質(zhì)量。

文中提供了預(yù)連接、預(yù)下載、預(yù)渲染、預(yù)取POST、預(yù)編譯等多種常見(jiàn)的優(yōu)化方法，指導(dǎo)開(kāi)發(fā)者優(yōu)化Web頁(yè)面的加載速度。這些方法可以有效提高應(yīng)用流暢度、提升用戶體驗(yàn)。

綜上所述，Web頁(yè)面加載優(yōu)化對(duì)于提升用戶體驗(yàn)、提高網(wǎng)站性能、增加頁(yè)面瀏覽量和提高轉(zhuǎn)化率具有重要意義。開(kāi)發(fā)者應(yīng)該重視頁(yè)面加載優(yōu)化，不斷探索和實(shí)踐各種優(yōu)化方法，以提升用戶體驗(yàn)，實(shí)現(xiàn)商業(yè)目標(biāo)。通過(guò)文章介紹的幾種優(yōu)化方法，開(kāi)發(fā)者可以改善頁(yè)面加載速度，提升用戶體驗(yàn)，增加頁(yè)面瀏覽量，提高應(yīng)用的活躍度和用戶粘性。只有不斷優(yōu)化頁(yè)面加載速度，才能更好地滿足用戶需求，提升應(yīng)用價(jià)值。