移动端本地 H5 秒开方案探索与实现 (2)

在 IOS webView 中默认会自动检测 HTML 中手机号、email、地址格式并标记。 解决方法：通过添加 meta 头来禁止默认行为

<meta content="telephone=no,email=no,adress=no">

点击延迟

在WebView中，click通常会有大约300ms的延迟（同时包括链接的点击，表单的提交，控件的交互等任何用户点击行为）。

解决方法：使用fastclick/touchend一般可以解决这个问题。

国际化

客户端内的 H5 也需要国际化，前端国际化方案有很多，通常情况下都是根据项目框架选择相应的国际化插件，然而在本地 H5 的页面中，再引入额外插件会增加客户端打包大小，略显冗余。适合自己的才是最好的，这里采用了一种适合轻量级的国际化方案。

1.提取语言文案
2.页面和 js 中引用提取的文案
3.根据配置切换语言方案

$('.i18n').each(function() { var key = $(this).attr('name'); $(this).html(language[key]); }); var language = getQueryVariable('en') ? i18n.en : i18n.zh

WKWebView 兼容

WKWebView 性能比 UIViewView 性能好很多，所以客户端开发一般都推荐使用 WKWebView。

但是使用 WKWebView 加载本地的 HTML 时也有一些兼容问题，在 iOS8 不能在 HTML 文件中引用本地的 css 或者 js 或者图片文件，IOS8 以上的是正常的，可以引用远程资源。为了兼顾兼容性和秒开体验，所以做降级方案，通过系统版本动态加载JS, IOS8 使用网络资源，IOS8 以上使用本地资源。

还有在iOS8中，使用一些远程的 cdn 的 css 或者 js 文件，必须注意在引用标签上加上 charset属性，不然 css 和 js 库将会乱码

五、最后

从前端优化，到客户端缓存，到离线包，到更多的细节优化，做到上述这些点，H5 页面在启动上差不多可以媲美原生的体验了。

总结起来，大体优化思路就是：减少一切网络请求，做好预加载和缓存，尽量在用户打开之前就加载好所有内容。这里有些优化手段也要根据项目和实际需求来评估，需要跟开发成本和效率权衡。上述讨论的仅针对功能模块类的单页面 H5 页面秒开的优化方案，其他一些交互较复杂的 H5 页面可能并不适用，还需要视实际情况和需求而定。

参考文献

WebView性能、体验分析与优化
70%以上业务由H5开发，手机QQ Hybrid 的架构如何优化演进？

问答
从小程序webview内嵌的h5页面跳回小程序怎么实现？
相关阅读
iOS 和 H5 交互那些事 （UIWebView、WKWebView 总结篇）
H5调用底层接口的一些知识
快速开发基于 HTML5 网络拓扑图应用