H5秒开技术选型
原创
目录
- 1. 通过获取沙盒H5路径直接加载
- 2. 基于NSURLProtocol进行请求拦截，实现预加载
- 3. 基于WKURLSchemeHandler进行自定义scheme注册拦截，实现预加载
- 4. 起本地服务器加载本地资源
- 5.sonic技术方案：
- 6.支付宝方案：
- 7.爱奇艺方案：
- 8.今日头条方案：
1. 通过获取沙盒H5路径直接加载
描述：通过获取沙盒H5路径直接加载 将h5文件存入沙盒，webview加载本地文件URL 。
优点：实现简单 缺点：有些html样式并不支持file协议，在样式和功能上会有缺失。还会有一些api上的差异,无法实现跨域资源请求
2. 基于NSURLProtocol进行请求拦截，实现预加载
描述：在UIWebView上,创建个子类，在子类里面实现protocol的代理方法即可实现对所有请求的拦截。 拦截对css、js、img等资源加载的请求。 优点：UIWebView原生支持 缺点：WKWebView网络请求独立于主进程，NSURLProtocol无法拦截。 可以通过私有api可以解决问题，但是会有上架风险。
3. 基于WKURLSchemeHandler进行自定义scheme注册拦截，实现预加载
描述：将scheme设置为我们自定义的customScheme WKURLSchemeHandler拦截对customScheme的请求。 优点：WKWebView原生支持 缺点：需要改造前端页面，替换为customScheme。 安卓不需要自定义，而且只能支持iOS11。
4. 起本地服务器加载本地资源
描述：如果本地有资源可以满足该请求的话，H5 容器会使用本地资源。 如果没有可以满足请求的本地资源，H5 容器会使用线上资源。 优点：不入侵前端，没有兼容性问题 缺点：有本地服务器搭建维护成本，另外需关注能耗，cpu占有率等
5.sonic技术方案：
WebView池：预先初始化WebView 静态直出：服务端拉取数据渲染完毕后，通过CDN加速访问 离线预推：离线包方案 并行加速：WebView的打开和资源的请求并行 动态缓存：动态页面缓存在客户端，用户下次打开的时候先打开缓存页面，然后再刷新 动静分离：为了提升体验，将页面分为静态模板和动态数据，实现局部刷新 预加载：在打开页面之前将资源数据都准备好，提升页面打开的速度
6.支付宝方案：
仅仅采用方案4，维护管理本地离线包。 app启动的时候，从服务端加载H5资源包的版本和地址。
{"version":"4320573858a8fa3567a1",-
"files":["https://xxx/index.html", -
"https://xxx/logo.add928b525.png", -
"https://xxx/main.c609e010f4.js", -
"https://xxx/vender.821f3aa0d2e606967ad3.css", -
"https://xxx/manifest.json"] -
}
7.爱奇艺方案：
采用预加载方案，另外APP启动时下载的公共JS/CSS资源 广告曝光时，APP主线程会派发preload事件，传入具体曝光的落地页H5 URL 广告落地页H5拉起时，ad-sw.js 的fetch事件监听函数被回调，以FetchEvent的request.url为Key 查找cache。
8.今日头条方案：
内置文章详情页所需的css、js等文件，并可以控制版本，预创建WebView预创建 预加载包含文章详情页所需的css、js的空html 在列表页预加载文章详情所需的内容使用LRU内存缓存并保存到本地数据库 在文章详情页获取预创建的WebView（预加载了html），直接调用js设置页面内容 通过js控制图片的显示，图片懒加载（当图片在可见区域或即将可见才会加载图片），点击加载图片等 Html中的图片通过ContentProvider获取使用Fresco下载的图片
部分参考代码实现：
private static String getHtml() {
StringBuilder builder = new StringBuilder();
builder.append("<!DOCTYPE html>\n");
builder.append("<html>\n");
builder.append("<head>\n");
builder.append("<meta charset=\"utf-8\">\n");
builder.append("<meta name=\"viewport\" content=\"initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no\">\n");
builder.append("<link rel=\"stylesheet\" type=\"text/css\" href=\"");
builder.append("file:///android_asset/article/css/android.css");
builder.append("\">\n</head>\n");
builder.append("<body class=\"font_m\"><header></header><article></article><footer></footer>");
builder.append("<script type=\"text/javascript\" src=\"");
builder.append("file:///android_asset/article/js/lib.js");
builder.append("\"></script>");
builder.append("<script type=\"text/javascript\" src=\"");
builder.append("file:///android_asset/article/js/android.js");
builder.append("\" ></script>\n");
builder.append("</body>\n");
builder.append("</html>\n");
return builder.toString();
}参考
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
