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

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

Web頁面加載流程

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

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

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

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

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

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

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

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

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

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

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

圖1Web頁面加載流程

由于所有的關鍵點都是建立在預處理的思路上，因此如果用戶實際并未打開預處理的Web頁面，將會造成額外的資源消耗。各優(yōu)化方法具體的效果、代價和適用場景的對比如下表所示。

預啟動Web渲染進程

?原理介紹

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

圖2預啟動Web渲染流程

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

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

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

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

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

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

預下載優(yōu)化

原理介紹

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

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

預渲染優(yōu)化

原理介紹

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

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

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

綁定NodeContainer組件：將NodeContainer與NodeController進行綁定，實現(xiàn)動態(tài)組件頁面顯示。

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

預取POST請求優(yōu)化

原理介紹

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

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

原理介紹

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

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

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

原理介紹

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

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

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

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

離線資源免攔截注入

原理介紹

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

說明

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

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

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

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

資源的MIMEType通過提供的參數(shù)中的Content-Type響應頭配置，Content-Type需符合標準，否則無法正常使用，MODULE_JS必須提供有效的MIMEType，其他類型可不提供。

僅支持通過HTML中的標簽加載。

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

當調(diào)用webview.WebviewController.SetRenderProcessMode(web_webview.RenderProcessMode.MULTIPLE)接口后，應用會啟動多渲染進程模式，此方案在此場景下不會生效。

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

資源攔截替換加速

原理介紹

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

總結(jié)

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

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

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