基於 prefetch 的 H5 離線包方案

来源:https://www.cnblogs.com/Jcloud/archive/2023/06/06/17459986.html
-Advertisement-
Play Games

本文主要是介紹團隊在離線包技術方案上的探索，以及基於prefetch的離線包實現方案如何減少維護成本和開發成本。 ...


前言

對於電商APP來講，使用H5技術開發的頁面占比很高。由於H5載入速度非常依賴網路環境，所以為了提高用戶體驗，針對H5載入速度的優化非常重要。離線包是最常用的優化技術，通過提前下載H5渲染需要的HTML/JS/CSS資源，載入時直接使用本地緩存資源避免額外的網路請求提高載入速度。本文主要是介紹團隊在離線包技術方案上的探索，以及基於prefetch的離線包實現方案如何減少維護成本和開發成本。

現有方案

離線包技術發展到現在已經比較成熟。離線包技術主要是分為兩部分，一部分是客戶端離線包容器，另一部分是線上離線包平臺。

離線包容器

• 資源請求攔截 - 攔截H5資源請求，當存在本地緩存資源時直接返回使用

• 資源緩存 - 資源下載、資源緩存策略、增量更新策略

離線包平臺

• 資源管理 - 配置H5頁面對應的離線資源、公共離線資源、CDN存放離線資源包

• 發佈系統 - 實時發佈、灰度能力、版本控制

下麵先介紹一下常見的技術實現方式：

資源請求攔截方式

Android

Android實現相對比較統一，主要是通過WebView自帶的shouldInterceptRequestAPI 攔截資源請求，返回對應的離線資源即可實現離線包功能。

iOS

iOS由於蘋果的限制，實現方式相對複雜很多。

NSURLProtocol 方案

使用NSURLProtocol攔截所有WebView內發出的請求。

方案存在的問題

Body丟失

因為WKWebView本身是使用多進程模式，WebView資源網路請求並不在APP進程中。iOS系統目前的實現，當攔截HTTP網路請求時會丟失Body，所以需要處理Body丟失的問題。一種方式是替換掉WebView內部的網路 API，例如Fetch/XMLHttpRequest，但是並不能覆蓋所有場景。另一種方式是網路請求走原生API橋接的方式，但是這需要H5進行適配有一定的侵入性。

使用私有API

WKWebView本身並不支持網路請求攔截，當我們需要攔截網路請求時，需要使用系統私有API通過ObjC Runtime的方式動態調用。存在一定的審核風險，例如Apple審核時不允許使用被拒。另外因為並不是系統暴露出的 API，內部實現未來可能會改變。

WKURLSchemeHandler 方案

WKURLSchemeHandler是iOS11引入的新特性，可以通過此 API 來攔截H5的網路請求。

方案存在的問題

不支持HTTP/HTTPS協議

• 不支持HTTP/HTTPS協議 - 因為WKURLSchemeHandlerAPI 本身的設計，只能攔截自定義協議並不支持HTTP/HTTPS協議。一種方式是原生載入H5時使用自定義協議或H5內資源使用自定義協議。另一種方式是hook系統方法支持HTTP/HTTPS協議，但是這會帶來一定的風險和不確定性。

Cookie 問題

WKURLSchemeHandler不會處理響應里的Set-Cookie，所以需要自行處理。

Body丟失問題

此方案同樣存在Body丟失問題。

Local Server 方案

Local Server方式是通過在APP運行時啟動一個本地伺服器，請求H5時訪問本地伺服器，本地伺服器檢查是否可以使用本地離線資源。

方案存在的問題

虛擬鏈接

• 虛擬鏈接 - 因為需要使用虛擬鏈接訪問本地伺服器，所以會帶來cookie同步等問題需要解決

資源消耗

• 本地伺服器有額外的記憶體、CPU消耗

PWA 方案

PWA提供了一整套Service Worker API來實現離線H5能力，包括資源的下載、更新、緩存策略等。只不過iOS系統本身沒有提供預設的實現，需要自實現一整套相關的 Service Worker API，複雜度和工作量比較高。

離線包管理平臺

增量更新策略

因為一個H5頁面的離線包資源通常是聚合到一個ZIP壓縮包中進行下載，為了避免只更新了部分資源導致全量下載，所以需要提供差異化更新能力，只需要下載變更的資源。

prefetch方案介紹

設計目標

分析了目前業界常用的離線包方案後，我們針對離線包的設計目標做了一輪梳理。一部分是前端團隊的訴求，一部分也是我們期望實現的目標：

低侵入性

• H5低侵入 - 接入離線包無需做額外適配，儘可能對於前端做到無感知。一方面可以減少前端適配成本和代碼複雜度，另一方面也有利於我們更好去推動覆蓋更多的 H5 網頁

• 原生無侵入 - 不需要使用特定的WebView容器

低維護成本

因為離線包涉及到資源的提前下載，所以需要提前配置好需要使用的資源URL用於下載。現有方案通常需要一個平臺去管理這些資源，針對每一個需要使用離線包能力的H5頁面，配置相關的靜態資源文件URL列表。但是會帶來一個問題就是每次更新都需要人工去維護整個靜態資源URL列表，我們希望儘可能避免人工去維護

個人看法：這裡更好的方式是離線包系統和前端發佈系統打通，發佈時自動更新靜態資源列表到離線包資源管理系統。

低運行時消耗

• 低網路消耗 - 只下載必要的資源，避免無用資源下載，重覆資源下載。

• 低CPU/記憶體 - 儘可能少的記憶體和CPU消耗，當不使用時做到零負荷

實現複雜度低

• 後臺管理系統 - 由於人力的問題暫時沒辦法支持開發一個完整的離線包後臺管理系統

• 客戶端容器 - 客戶端的實現儘可能簡單，可以更快速的上線同時避免帶來額外的問題

具體實現

實現思路是利用H5瀏覽器自帶的prefetch能力。通過將離線包資源聚合到單個HTML中，APP啟動後使用WebView提前載入HTML，WebView會下載資源到設備中。同時可以直接復用WebView自帶的離線緩存能力和差異化資源更新能力。

prefetch.html

<html>
  <head>
    <!--公共資源-->
    <link rel="prefetch" href="https://wq.360buyimg.com/js/common/dfd0ab35.js">
    <link rel="prefetch" href="https://wq.360buyimg.com/data/fontRegular.ttf">
    <!--A頁面資源-->
    <link rel="prefetch" href="https://wq.360buyimg.com/jxpp/app.css">
    <link rel="prefetch" href="https://wq.360buyimg.com/data/min.js">
  </head>
  <body></body>
</html>
複製代碼

H5 離線包資源聚合

前面有提到不希望讓H5業務開發同學手動管理維護離線包資源，所以我們希望提供一種自動聚合資源的能力。減少後續維護成本的同時儘可能減少資源的下載。

判定是否開啟離線包

和線上H5性能監控系統打通，根據訪問次數和TOP排名來自動判定是否開啟離線包預載入

部分 H5 如果需要預熱可以額外添加

聚合資源

• 根據實際載入情況統計出需要預下載的資源比人工維護更加準確

• 被多個H5引用的資源自動判定為公共資源

提示：通常資源管理，特別是公共資源長期維護之後更難管理，很多時候添加之後不知道是否有被使用不會刪除。

資源聚合流程

通過運行自動化腳本的方式，基於Puppeteer和Performance TimingAPI，自動計算出需要下載的離線包資源及時更新。

如何判定首屏資源

Performance Timing

使用瀏覽器自帶的PerformanceTiming API判定。domInteractive是瀏覽器完成對所有HTML的解析並且DOM構建完成的時間點。在domInteractive之前載入的資源既為阻塞首屏渲染的資源。同時需要過濾掉一些不需要緩存的資源，目前我們只收集JS/CSS會阻塞渲染的資源。

客戶端

客戶端實現相對簡單，APP 啟動後初始化一個新的WebView容器後臺靜默載入，Android端載入prefetch.html，iOS端載入preload.html。載入完成後釋放WebView容器，之後不會造成其他性能損耗。雖然每次啟動都會重新觸發下載邏輯，但是只會進行差異化下載本地緩存中不存在的資源文件。

其他優化

提前載入 WebView

因為 APP 啟動後首次初始化WebView會包含Web引擎的初始化，初始化耗時會更高。所以我們預下載資源時也提前初始化了WebView，之後打開H5時可以減少100-200ms初始化耗時。

提前打通登錄態

因為大部分業務H5都需要登錄態，所以APP在首次打開H5時，需要將原生登錄態信息同步到 H5cookie中，會有1次額外的302跳轉耗時。我們在預載入資源時提前打通登錄態，之後打開H5時可以減少100-200ms302跳轉耗時。

介面預拉取

同時也提供了介面預拉取的能力，可以H5載入前提前拉取首屏介面數據，提高載入速度。

實現過程中遇到的問題

iOS系統

不支持prefetch

iOS系統web內核並不支持prefetch特性，所以針對iOS我們採用preload來代替。Android平臺下發link-prefetch，iOS平臺下發link-preload進行差異化處理。

提示： prefetch 相比 preload 性能更好。 prefetch 下載的優先順序沒有 preload 高，避免影響其他網路請求速度。 preload 會將 JS / CSS 進行解析添加到記憶體，造成一定的額外消耗。

preload 不支持 HTML

iOS系統preload特性並不支持HTML Document的提前載入。不過這一點對於我們影響不大，因為目前我們業務H5的HTML通常會做一定的服務端渲染邏輯，並不支持緩存策略。(例如聚合一部分的公共 JS)

多功能變數名稱資源不共用

iOS系統中WebView針對不同功能變數名稱H5使用的其他資源並不能共用。例如https://www.jd.com/index.html和https://www.jingxi.com/index.html雖然是同一個網頁，內部都有使用同樣的JS/CSS/圖片資源，但是基於iOS 系統中WebView緩存策略實現，每一個功能變數名稱的資源使用獨立的空間管理，並不能共用使用需要重覆下載。因為我們自身H5支持jd.com和jingxi.com雙功能變數名稱訪問，所以我們在APP端添加了功能變數名稱替換的邏輯，儘可能將我們自身的業務收斂到jingxi.com功能變數名稱，提高緩存資源利用率。

提示：即使不使用離線包，這也是一個不錯的優化策略。

Android 系統

磁碟空間不足觸發Crash

部分設備在使用prefetch下載資源時，因為設備本身磁碟空間不足導致Crash。所以我們在資源下載前加了一個額外的磁碟空間檢查策略，當磁碟空間太低時不進行下載。

總結

prefetch 方案

我們通過利用系統瀏覽器自身提供的prefetch預載入資源能力和HTTP離線緩存能力，實現了一套相對輕量的離線包解決方案，H5首屏性能提升基本上和其他方案一樣(除了iOS系統上不支持HTML離線資源)。同時通過離線資源自動統計/自動更新的方式，不需要額外的離線包資源管理系統，減少後續的維護成本。

這套方案雖然在實現成本和維護成本上相對比較低，但是因為實現方式的選擇也存在一些不足需要後續完善。例如無法攔截網路請求擴展更多能力，同時依賴瀏覽器自身的緩存策略也存在一些不可控，例如Android端瀏覽器內核過多，資源需要完全遵守HTTP緩存策略。同時離線資源自動統計/自動更新能力並不容易抽象出一套標準化的方案適用於不同公司的業務。但是技術實現方案通常都是在做各種權衡和取捨，這是我們認為目前相對低成本的一套實現方案。

離線包的價值

個人認為提前下載資源的離線包方式帶來的首屏載入收益並沒有那麼高。原因如下：1.提前下載過多離線資源也會帶來更多的網路消耗。2.大部分頁面本身不具備離線使用的能力（需要網路訪問介面）。3.離線包也只是優化第一次載入的速度，因為資源本身就可以設置HTTP的緩存策略避免重覆下載。H5頁面首屏載入應該更多關註頁面本身的渲染性能，例如JS/CSS解析耗時，直出還是非直出，首屏介面速度等。

更有價值的在我們如何通過攔截網路請求增強更多的能力，例如提供HTTPDNS，原生/H5復用圖片緩存等能力。

擴展鏈接

• WKWebView 請求攔截探索與實踐

• 評估關鍵渲染路徑

• 離線Hybrid容器如何做到接近100%秒開？

• prefetch特性支持

• preload特性支持

• WKWebView離線化方案——實現Service Worker API


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 近3千中國各地區特產大全ACCESS資料庫
    那些眾多的旅游網站里，什麼景點、什麼攻略、什麼路線、什麼酒店啊幾乎都是一模一樣，這得益以現在採集工具的“魔高一丈”，但是似乎很少見到各個旅游景點所在地區的特產介紹。而今天在互聯網上提取出了一份： 這個ACCESS資料庫包含省份、城市、地方特產三個表，其中城市表可關聯到省份表、地方特產表可以關聯到城市 ...
  • 1千多鳥類百科圖譜大全ACCESS\EXCEL資料庫
    我很喜歡這種圖譜、名冊、字典類的資料庫，像這種資料庫還有《史前古生物資料圖譜ACCESS資料庫》、《中國魚類資料圖譜大全ACCESS資料庫》、《植物結構部件資料圖譜ACCESS資料庫》、《全球家畜資料圖譜大全ACCESS資料庫》等。 幾乎每一個鳥類都會對應一張圖，只有28條記錄圖片丟失；包含目表、科 ...
  • 1千6個性測試文章大全ACCESS\EXCEL資料庫
    之前發過幾個關於趣味心理測試的數據，而今天的這個內容與他們是一類的只不過結構方面很不同，前者是結構完美的測試題，今天這個只是個文章型的數據、文章型的測試，看截圖： 比如下麵這個就是其中一條記錄的詳細內容，標題是“你現在最重視誰？”，以下是內容： 每個人都或多或少有掉東西的經驗。假設有一天，你騎機車經 ...
  • H5頁面秒開優化與實踐
    1. 背景 3月份針對線上重點H5項目秒開進行治理,本文將逐步介紹如何通過H5頁面的優化手段來提高 1.5 秒開率。 2. 為什麼要優化 從用戶角度看，優化能夠讓頁面載入得更快、對用戶操作響應更及時，用戶體驗更良好，提升用戶體驗和降低用戶流失率非常重要。其中 Global Web Performan ...
  • 大型 3D 互動開發和優化實踐
    我們團隊接到了食品頻道的一個互動項目的開發需求，希望通過 3D 場景的展示和互動方式，作為對未來購物的一種嘗試與探索，滿足用戶對未來美好新奇的一個需求。將購物場景化、娛樂化，給用戶帶來美好的購物感受。 ...
  • From Java To Kotlin 2：Kotlin 類型系統與泛型
    上期主要分享了 From Java To Kotlin 1 ：空安全、擴展、函數、Lambda。 這是 From Java to Kotlin 第二期。 From Java to Kotlin 關鍵在於 **思維的轉變**。 ...
  • 記錄--你真的能區分JavaScript的各種導入導出方式嗎？
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 前言 🛰🛰 我們在無論是在查閱別人的代碼，還是在實際項目開發的過程中，肯定都會使用導入導出的功能，有時候我們會搞混這幾種方式到底有什麼區別，今天我們就來細緻的區分一下： 導入導出方式⚔️⚔️ 我們都知道最常見的幾種導出方式無非是exp ...
  • Vue2知識點簡要
    一、雙向綁定原理 Vue2採用的是觀察者-發佈訂閱模式，利用Object.defineProperty實現對數據已定義屬性的監控(定義觀察者模式)， 編譯DOM時解析v-model等屬性以及對input框等註冊事件實現UI和JS的交互(也就是註冊發佈訂閱這模式)； 詳細的是主要是定義一個Observ ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類