主頁 > 前端設計 > 基于 prefetch 的 H5 離線包方案

基于 prefetch 的 H5 離線包方案

2023-06-06 18:51:39 前端設計

前言

對于電商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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/554466.html

標籤：HTML5

上一篇：記錄--Vue3自定義一個Hooks，實作一鍵換膚

下一篇：返回列表

標籤雲
其他(160468) Python(38206) JavaScript(25478) Java(18205) C(15237) 區塊鏈(8270) C＃(7972) AI(7469) 爪哇(7425) MySQL(7234) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5873) 数组(5741) R(5409) Linux(5347) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4585) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2434) ASP.NET(2403) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) .NET技术(1983) 功能(1967) HtmlCss(1952) Web開發(1951) C++(1932) python-3.x(1918) 弹簧靴(1913) xml(1889) PostgreSQL(1879) .NETCore(1863) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • vue移動端上拉加載

    可能做得過于簡單或者比較low，請各位大佬留情，一起探討技術 ......

    uj5u.com 2020-09-10 04:38:07 more
  • 優美網站首頁，頂部多層導航

    一個個人用的瀏覽器首頁，可以把一下常用的網站放在這里，平常打開會比較方便。 第一步，HTML代碼 <script src=https://www.cnblogs.com/szharf/p/"js/jquery-3.4.1.min.js"></script> <div id="navigate"> <ul> <li class="labels labels_1"> ......

    uj5u.com 2020-09-10 04:38:47 more
  • 頁面為要加<!DOCTYPE html>

    最近因為寫一個js函式，需要用到$(window).height(); 由于手寫demo的時候，過于自信，其實對前端方面的認識也不夠體系，用文本檔案直接敲出來的html代碼，第一行沒有加上<!DOCTYPE html> 導致了$(window).height();的結果直接是整個document的高 ......

    uj5u.com 2020-09-10 04:38:52 more
  • WordPress網站程式手動升級要做好資料備份

    WordPress博客網站程式在進行升級前，必須要做好網站資料的備份，這個問題良家佐言是遇見過的；在剛開始接觸WordPress博客程式的時候，因為升級問題和博客網站的修改的一些嘗試，良家佐言是吃盡了苦頭。因為購買的是西部數碼的空間和域名，每當佐言把自己的WordPress博客網站搞到一塌糊涂的時候 ......

    uj5u.com 2020-09-10 04:39:30 more
  • WordPress程式不能升級為5.4.2版本的原因

    WordPress是一款個人博客系統，受到英文博客愛好者和中文博客愛好者的追捧，并逐步演化成一款內容管理系統軟體；它是使用PHP語言和MySQL資料庫開發的,用戶可以在支持PHP和MySQL資料庫的服務器上使用自己的博客。每一次WordPress程式的更新，就會牽動無數WordPress愛好者的心， ......

    uj5u.com 2020-09-10 04:39:49 more
  • 使用CSS3的偽元素進行首字母下沉和首行改變樣式

    網頁中常見的一種效果，首字改變樣式或者首行改變樣式，效果如下圖。 代碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ......

    uj5u.com 2020-09-10 04:40:09 more
  • 關于a標簽的講解

    什么是a標簽？ <a> 標簽定義超鏈接，用于從一個頁面鏈接到另一個頁面。 <a> 元素最重要的屬性是 href 屬性，它指定鏈接的目標。 a標簽的語法格式：<a href=https://www.cnblogs.com/summerxbc/p/"指定要跳轉的目標界面的鏈接">需要展示給用戶看見的內容</a> a標簽 在所有瀏覽器中，鏈接的默認外觀如下： 未被訪問的鏈接帶 ......

    uj5u.com 2020-09-10 04:40:11 more
  • 前端輪播圖

    在需要輪播的頁面是引入swiper.min.js和swiper.min.css swiper.min.js地址： 鏈接：https://pan.baidu.com/s/15Uh516YHa4CV3X-RyjEIWw 提取碼：4aks swiper.min.css地址 鏈接：https://pan.b ......

    uj5u.com 2020-09-10 04:40:13 more
  • 如何設定html中的背景圖片（全屏顯示，且不拉伸）

    1 <style>2 body{background-image:url(https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture); 3 background-size:cover;background ......

    uj5u.com 2020-09-10 04:40:16 more
  • Java學習——HTML詳解（上）

    HTML詳解 初識HTML Hyper Text Markup Language（超文本標記語言） 1 <!--DOCTYPE:告訴瀏覽器我們要使用什么規范--> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <!--meta 描述性的標簽，描述一些 ......

    uj5u.com 2020-09-10 04:40:33 more
最新发布
  • 基于 prefetch 的 H5 離線包方案

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

    uj5u.com 2023-06-06 18:51:39 more
  • 記錄--Vue3自定義一個Hooks，實作一鍵換膚

    這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 核心 使用CSS變數, 準備兩套CSS顏色, 一套是在 light模式下的顏色,一套是在dark模式下的顏色 dark模式下的 CSS 權重要比 light 模式下的權重高, 不然當我們給html添加自定義屬性[data-theme='d ......

    uj5u.com 2023-05-31 08:41:19 more
  • HTML5

    1. HTML5的新特性 HTML5的新增特性主要是針對以前的不足，添加了一些新標簽、新的表單和新的表單屬性等。 1.1 HTML5新增的語意化標簽 <header>：頭部標簽。 <nav>：導航標簽。 <article>：內容標簽。 <section>：定義檔案某個區域。 <aside>：側邊欄標 ......

    uj5u.com 2023-05-24 09:44:26 more
  • HTML中meta標簽的那些屬性

    <meta> 標簽是 HTML 中用于描述網頁元資訊的元素。它位于 <head> 部分，不會顯示在頁面內容中，但對于瀏覽器、搜索引擎等具有重要作用。主要作用有：定義檔案的字符編碼、提供網頁的描述資訊、關鍵詞、作者、視口設定等，這些資訊有助于搜索引擎理解和索引網頁內容。 <meta> 標簽的主要屬性有 ......

    uj5u.com 2023-05-10 11:08:20 more
  • 我的第一個NPM包:panghu-planebattle-esm(胖虎飛機大戰)使用說明

    好家伙,我的包終于開發完啦 歡迎使用胖虎的飛機大戰包!! 為你的主頁添加色彩 這是一個有趣的網頁小游戲包,使用canvas和js開發 使用ES6模塊化開發 效果圖如下: (覺得圖片太sb的可以自己改) 代碼已開源!! Git: https://gitee.com/tang-and-han-dynas ......

    uj5u.com 2023-04-20 07:59:23 more
  • 生產事故-走近科學之消失的JWT

    入職多年，面對生產環境，盡管都是小心翼翼，慎之又慎，還是難免捅出簍子。輕則滿頭大汗，面紅耳赤。重則系統停擺，損失資金。每一個生產事故的背后，都是寶貴的經驗和教訓，都是專案成員的血淚史。為了更好地防范和遏制今后的各類事故，特開此專題，長期更新和記錄大大小小的各類事故。有些是親身經歷，有些是經人耳傳口授 ......

    uj5u.com 2023-04-18 07:55:04 more
  • 記錄--Canvas實作打飛字游戲

    這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 打開游戲界面，看到一個畫面簡潔、卻又富有挑戰性的游戲。螢屏上，有一個白色的矩形框，里面不斷下落著各種單詞，而我需要迅速地輸入這些單詞。如果我輸入的單詞與螢屏上的單詞匹配，那么我就可以獲得得分；如果我輸入的單詞錯誤或者時間過長，那么我就會輸 ......

    uj5u.com 2023-04-04 08:35:30 more
  • 了解 HTTP 看這一篇就夠

    在學習網路之前，了解它的歷史能夠幫助我們明白為何它會發展為如今這個樣子，引發探究網路的興趣。下面的這張圖片就展示了“互聯網”誕生至今的發展歷程。 ......

    uj5u.com 2023-03-16 11:00:15 more
  • 藍牙-低功耗中心設備

    //11.開啟藍牙配接器 openBluetoothAdapter //21.開始搜索藍牙設備 startBluetoothDevicesDiscovery //31.開啟監聽搜索藍牙設備 onBluetoothDeviceFound //30.停止監聽搜索藍牙設備 offBluetoothDevi ......

    uj5u.com 2023-03-15 09:06:45 more
  • canvas畫板（滑鼠和觸摸）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canves</title> <style> #canvas { cursor:url(../images/pen.png),crosshair; } #canvasdiv{ bo ......

    uj5u.com 2023-02-15 08:56:31 more

Copyright © 2010-2020 有解無憂