攔截原理
開發(fā)步驟
- 先使用本地的資源 不走加載 , 大量閱讀業(yè)界秒開方案 做筆記 核心點(diǎn)記錄
- ios 和安卓出demo 實(shí)現(xiàn)秒開
- ios 和安卓對項目中某個頁面進(jìn)行改造 實(shí)現(xiàn)秒開
3.1) 需要解決劫持的問題 安全組評估
3.2) 對當(dāng)前的h5 加載時間打點(diǎn) , 方便后續(xù)評估效果 , 并且h5 console 里面出控制臺
3.3) 離線包不對 或者下載不成功 就直接用線上資源
https://mp.weixin.qq.com/s/ye1CeIjlfs9VSUab3gQI5g
3.4) loadHTMLString 加載本地的html , js 請求json 數(shù)據(jù) callJSMethod 注入到html
https://juejin.cn/post/6887161842406260744 (40%處有講) 針對不同模板通過枚舉區(qū)別，
注入不同模板數(shù)據(jù)
3.5) WKURLSchemeHandler 進(jìn)行攔截
- 設(shè)計后臺 .批量上線 方案 可以大面積被推廣
4.1) 準(zhǔn)備2套方案 備用容災(zāi) 快速切換
4.2) JS 框架和 CSS 全局樣式 公共資源包 (活動類的html 和css 模板內(nèi)置或者下載) - 關(guān)鍵步驟 增加log 方便排查 , 驗(yàn)收效果
- 方案 是否擴(kuò)展到web 端 的網(wǎng)頁加載 , 提高web 端的頁面打開速度 (和web 一起共用管理后臺,資源管理后臺 )
主要優(yōu)化點(diǎn):
1.降低請求量：合并資源炼幔，減少 HTTP 請求數(shù)史简，minify / gzip 壓縮圆兵，webP，lazyLoad殉农。
2.加快請求速度：預(yù)解析DNS超凳，減少域名數(shù)耀态，并行加載暂雹，CDN 分發(fā)。
3.緩存：HTTP 協(xié)議緩存請求仙逻，離線緩存 manifest涧尿，離線數(shù)據(jù)緩存localStorage。
4.渲染：JS/CSS優(yōu)化喜最，加載順序庄蹋，服務(wù)端渲染，pipeline虫蝶。
大體的優(yōu)化思路
大體優(yōu)化思路就是：緩存/預(yù)加載/并行倦西，緩存一切網(wǎng)絡(luò)請求，盡量在用戶打開之前就加載好所有內(nèi)容粉铐，能并行做的事不串行做卤档。這里有些優(yōu)化手段需要做好一整套工具和流程支持劝枣，需要跟開發(fā)效率權(quán)衡，視實(shí)際需求優(yōu)化溪胶。
h5緩存 使用到的重要api總結(jié)
canInitWithRequest
+ (BOOL)canInitWithRequest:(NSURLRequest *)request{
BOOL intercept = YES;
NSLog(@"YXNSURLProtocol==%@",request.URL.absoluteString);
if (intercept) {
}
return intercept;
}
如果返回YES則進(jìn)入該自定義加載器進(jìn)行處理稳诚，如果返回NO則不進(jìn)入該自定義選擇器，使用系統(tǒng)默認(rèn)行為進(jìn)行處理懒熙。
如果這一步驟返回YES。則會進(jìn)入2.3的方法中徘钥。
canonicalRequestForRequest
+ (NSURLRequest *)canonicalRequestForRequest:(NSURLRequest *)request {
return request;
}
在這個方法中肢娘，我們可以重新設(shè)置或者修改request的信息。比如請求重定向或者添加頭部信息等等而钞。如果沒有特殊需求拘荡，直接返回request就可以了珊皿。但是因?yàn)檫@個方法在會在一次請求中被調(diào)用多次（暫時我也不知道什么原因?yàn)槭裁葱枰卣{(diào)多洗），所以request重定向和添加頭部信息也可以在開始加載中startLoading方法中重新設(shè)置粉臊。
registerClass
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
[NSURLProtocol registerClass:[YXNSURLProtocol class]];
}
加載完成后驶兜，當(dāng)產(chǎn)生URL請求的同時，會依次進(jìn)入NSURLProtocol的以下相關(guān)方法進(jìn)行處理屠凶，下面我們依次來講一下每一個方法的作用肆资。
requestIsCacheEquivalent
+ (BOOL)requestIsCacheEquivalent:(NSURLRequest *)a toRequest:(NSURLRequest *)b{
return [super requestIsCacheEquivalent:a toRequest:b];
}
這個方法主要是用來判斷兩個request是否相同迅耘，如果相同的話可以使用緩存數(shù)據(jù)监署，通常調(diào)用父類的實(shí)現(xiàn)即可
人員準(zhǔn)備
web人員溝通
Js還是比較關(guān)鍵的，圖片異步加載栖秕，沒問題晓避，主要是js只壳，首先得讓頁面展示出來
相關(guān)產(chǎn)品溝通
節(jié)省流量, 打開頁面更快 , 產(chǎn)品層面確認(rèn)有價值 后續(xù)實(shí)施的重要基礎(chǔ)
服務(wù)端管理人員
上傳包 , 分版本下載 (類似RN的包 或者jspatch包) , 分需求加載
離線寶步驟自動化
參考文獻(xiàn)
iOS H5秒開技術(shù)實(shí)戰(zhàn)（一）綜述
http://www.cocoachina.com/articles/28999
介紹了多種攔截方式 ,
- 《cordova》框架便是基于此實(shí)>現(xiàn)吼句。
- 基于NSURLProtocol進(jìn)行請求攔 wkWebView 涉及私有函數(shù) ,
- 百度解到百度App安>卓就是采用的請求攔截方式,>https://mp.weixin.qq.com/s/AqQgDB-0dUp2ScLkqxbLZg
iOS app秒開H5優(yōu)化探索
https://juejin.cn/post/6844903809521549320
講了NSURLProtocol
讓wkwebView 支持https://blog.moecoder.com/2016/10/26/support-nsurlprotocol-in-wkwebview/
講了WKURLSchemeHandler , 給了一個比較詳細(xì) 的例子
iOS app秒開H5實(shí)戰(zhàn)總結(jié)
https://juejin.cn/post/6844903860977287176
重點(diǎn)講了如何攔截 ,好好研究下
iOS H5容器的一些探究（二）：iOS下的黑魔法NSURLProtocol 不使用
http://www.reibang.com/p/03ddcfe5ebd7
網(wǎng)易新聞客戶端H5秒開優(yōu)化(值得借鑒 下載相關(guān)的) - 一般都是下載zip 包 比較好 , md5校驗(yàn)
https://www.163.com/dy/article/F0RO3P1005376OPS.html
WKWebView之oc調(diào)用js以及WKUserScript JS注入
WKUserScript 中注入js
http://www.reibang.com/p/75a487c8e927
為什么你做的H5開屏那么慢惕艳？H5首屏秒開方案探討
https://mp.weixin.qq.com/s/ye1CeIjlfs9VSUab3gQI5g
講了很多細(xì)節(jié) , 無具體的方案實(shí)施
今日頭條品質(zhì)優(yōu)化：圖文詳情頁秒開實(shí)踐 -0.3秒 詳解了拆分js 和css , 講了容災(zāi)方案
https://juejin.cn/post/6876011410061852680
WKWebview秒開實(shí)踐分享及問題解決方案 - 有swift 代碼和demo 還有拆分的代碼
https://juejin.cn/post/6887161842406260744
有講如何通過HTML 加載方法 本地html+請求json 的方法 類似lbmeng
h5秒開github 搜索
https://github.com/search?q=h5+%E7%A7%92%E5%BC%80
https://github.com/yuweiguocn/TouTiaoH5 安卓
h5秒開demo
https://github.com/PhoenixLeeSin/wkwebviewAndJS (ios 和js 傳值的過程 )
iOS WKWebView與JS交互远搪、傳值逢捺，H5調(diào)相機(jī)相冊劫瞳、進(jìn)度條加載等(干貨滿滿)
可能這套和js 和oc 的交互方法 就可以實(shí)現(xiàn)傳值
http://www.reibang.com/p/0f825df61037
http://www.reibang.com/p/9ac63625256f
提供urlSchem 攔截的樣例和demo , 提供可運(yùn)行的demo , schem 方案 網(wǎng)易的參考意義很大
WKWebView-WKURLSchemeHandler-master 參考意義大 詳細(xì)描寫如何去攔截有html 的實(shí)例
herald-ios-app-master 網(wǎng)絡(luò)加載方案
