拦截原理
开发步骤
- 先使用本地的资源 不走加载 , 大量阅读业界秒开方案 做笔记 核心点记录
- ios 和安卓出demo 实现秒开
- ios 和安卓对项目中某个页面进行改造 实现秒开
3.1) 需要解决劫持的问题 安全组评估
3.2) 对当前的h5 加载时间打点 , 方便后续评估效果 , 并且h5 console 里面出控制台
3.3) 离线包不对 或者下载不成功 就直接用线上资源
https://mp.weixin.qq.com/s/ye1CeIjlfs9VSUab3gQI5g
3.4) loadHTMLString 加载本地的html , js 请求json 数据 callJSMethod 注入到html
https://juejin.cn/post/6887161842406260744 (40%处有讲) 针对不同模板通过枚举区别，
注入不同模板数据
3.5) WKURLSchemeHandler 进行拦截
- 设计后台 .批量上线 方案 可以大面积被推广
4.1) 准备2套方案 备用容灾 快速切换
4.2) JS 框架和 CSS 全局样式 公共资源包 (活动类的html 和css 模板内置或者下载) - 关键步骤 增加log 方便排查 , 验收效果
- 方案 是否扩展到web 端 的网页加载 , 提高web 端的页面打开速度 (和web 一起共用管理后台,资源管理后台 )
主要优化点:
1.降低请求量：合并资源，减少 HTTP 请求数，minify / gzip 压缩，webP，lazyLoad。
2.加快请求速度：预解析DNS，减少域名数，并行加载，CDN 分发。
3.缓存：HTTP 协议缓存请求，离线缓存 manifest，离线数据缓存localStorage。
4.渲染：JS/CSS优化，加载顺序，服务端渲染，pipeline。
大体的优化思路
大体优化思路就是：缓存/预加载/并行，缓存一切网络请求，尽量在用户打开之前就加载好所有内容，能并行做的事不串行做。这里有些优化手段需要做好一整套工具和流程支持，需要跟开发效率权衡，视实际需求优化。
h5缓存 使用到的重要api总结
canInitWithRequest
+ (BOOL)canInitWithRequest:(NSURLRequest *)request{
BOOL intercept = YES;
NSLog(@"YXNSURLProtocol==%@",request.URL.absoluteString);
if (intercept) {
}
return intercept;
}
如果返回YES则进入该自定义加载器进行处理，如果返回NO则不进入该自定义选择器，使用系统默认行为进行处理。
如果这一步骤返回YES。则会进入2.3的方法中。
canonicalRequestForRequest
+ (NSURLRequest *)canonicalRequestForRequest:(NSURLRequest *)request {
return request;
}
在这个方法中，我们可以重新设置或者修改request的信息。比如请求重定向或者添加头部信息等等。如果没有特殊需求，直接返回request就可以了。但是因为这个方法在会在一次请求中被调用多次（暂时我也不知道什么原因为什么需要回调多洗），所以request重定向和添加头部信息也可以在开始加载中startLoading方法中重新设置。
registerClass
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
[NSURLProtocol registerClass:[YXNSURLProtocol class]];
}
加载完成后，当产生URL请求的同时，会依次进入NSURLProtocol的以下相关方法进行处理，下面我们依次来讲一下每一个方法的作用。
requestIsCacheEquivalent
+ (BOOL)requestIsCacheEquivalent:(NSURLRequest *)a toRequest:(NSURLRequest *)b{
return [super requestIsCacheEquivalent:a toRequest:b];
}
这个方法主要是用来判断两个request是否相同，如果相同的话可以使用缓存数据，通常调用父类的实现即可
人员准备
web人员沟通
Js还是比较关键的，图片异步加载，没问题，主要是js，首先得让页面展示出来
相关产品沟通
节省流量, 打开页面更快 , 产品层面确认有价值 后续实施的重要基础
服务端管理人员
上传包 , 分版本下载 (类似RN的包 或者jspatch包) , 分需求加载
离线宝步骤自动化
参考文献
iOS H5秒开技术实战（一）综述
http://www.cocoachina.com/articles/28999
介绍了多种拦截方式 ,
- 《cordova》框架便是基于此实>现。
- 基于NSURLProtocol进行请求拦 wkWebView 涉及私有函数 ,
- 百度解到百度App安>卓就是采用的请求拦截方式,>https://mp.weixin.qq.com/s/AqQgDB-0dUp2ScLkqxbLZg
iOS app秒开H5优化探索
https://juejin.cn/post/6844903809521549320
讲了NSURLProtocol
让wkwebView 支持https://blog.moecoder.com/2016/10/26/support-nsurlprotocol-in-wkwebview/
讲了WKURLSchemeHandler , 给了一个比较详细 的例子
iOS app秒开H5实战总结
https://juejin.cn/post/6844903860977287176
重点讲了如何拦截 ,好好研究下
iOS H5容器的一些探究（二）：iOS下的黑魔法NSURLProtocol 不使用
https://www.jianshu.com/p/03ddcfe5ebd7
网易新闻客户端H5秒开优化(值得借鉴 下载相关的) - 一般都是下载zip 包 比较好 , md5校验
https://www.163.com/dy/article/F0RO3P1005376OPS.html
WKWebView之oc调用js以及WKUserScript JS注入
WKUserScript 中注入js
https://www.jianshu.com/p/75a487c8e927
为什么你做的H5开屏那么慢？H5首屏秒开方案探讨
https://mp.weixin.qq.com/s/ye1CeIjlfs9VSUab3gQI5g
讲了很多细节 , 无具体的方案实施
今日头条品质优化：图文详情页秒开实践 -0.3秒 详解了拆分js 和css , 讲了容灾方案
https://juejin.cn/post/6876011410061852680
WKWebview秒开实践分享及问题解决方案 - 有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调相机相册、进度条加载等(干货满满)
可能这套和js 和oc 的交互方法 就可以实现传值
https://www.jianshu.com/p/0f825df61037
wkwebView scheme 写出本地html 缓存方案
http://cache.baiducontent.com/c?m=OPhPXw3Ba4-7m74tVfOcr9SbMzgZP45TeutyF4iRvTNJWSBg5mRGVdpbfbp36em1DQ0vvTMZwfEew8fDuZRiOU-GwUlGgjh4wy3M3V3cWnENtBWPs0A4NZjrQ3tdBOUW&p=8039cf16d9c104b434bd9b7e0e42&newp=8974c54ad6c00bf644acc7710f5c92695d0fc20e3ddcdb01298ffe0cc4241a1a1a3aecbf2c211402d3c3786605a44f5de8f634743d0034f1f689df08d2ecce7e65d13b75&s=072b030ba126b2f4&user=baidu&fm=sc&query=wkwebView+URLScheme&qid=836524d00004b130&p1=17
https://www.jianshu.com/p/9ac63625256f
提供urlSchem 拦截的样例和demo , 提供可运行的demo , schem 方案 网易的参考意义很大
WKWebView-WKURLSchemeHandler-master 参考意义大 详细描写如何去拦截有html 的实例
herald-ios-app-master 网络加载方案