ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
[TOC] ## Android与H5交互 ### Android调用JS代码的方法主要有2种: 1. WebView的loadUrl 2. WebView的evaluateJavascript ### JS调用Android代码的方法主要有3种:** 1. WebView的addJavascriptInterface进行对象映射(低版本Android4以下好像有一些安全问题,本人没有验证) 2. WebViewClient 的 shouldOverrideUrlLoading 方法回调拦截 url 3. WebChromeClient 的onJsAlert、onJsConfirm、onJsPrompt方法回调拦截JS对话框alert()、confirm()、prompt() 消息 ## WebView提速 H5页面的渲染速度其实主要取决于两个 1. js解析效率 如果js文件较多、解析比较复杂, 就会导致渲染速度较慢。或者手机的硬件性能比较差的话, 也会导致渲染速度比较慢。 2. 页面资源的下载 一般加载一个H5页面, 都会产生较多的网络请求, 如图片、js文件、css文件等, 需要将这些资源都下载完成之后才能完成渲染, 这样也会导致页面渲染速度变慢 ### 本地资源 一些资源文件放在本地的assets目录, 然后重写WebViewClient的shouldInterceptRequest(WebView view, String url)和shouldInterceptRequest(WebView view, WebResourceRequest request)这两个方法, 对访问地址进行拦截, 当url地址命中本地配置的url时, 使用本地资源替代, 否则就使用网络上的资源。 ### 离线包 既然很多问题都是文件分散管理困难引起,而我们这里的使用场景是使用 H5 开发功能模块,那很容易想到把一个个功能模块的所有相关页面和资源打包下发,这个压缩包可以称为功能模块的离线包。使用离线包的方案,可以相对较简单地解决上述几个问题: 1. 可以预先下载整个离线包,只需要按业务模块配置,不需要按文件配置,离线包包含业务模块相关的所有页面,可以一次性预加载。 2. 离线包核心文件和页面动态的图片资源文件缓存分离,可以更方便地管理缓存,离线包也可以整体提前加载进内存,减少磁盘 IO 耗时。 3. 离线包可以很方便地根据版本做增量更新。 4. 离线包以压缩包的方式下发,同时会经过加密和校验,运营商和第三方无法对其劫持篡改。 到这里,对于使用 H5 开发功能模块,离线包是一个挺不错的方案了,简单复述一下离线包的方案: 1. 后端使用构建工具把同一个业务模块相关的页面和资源打包成一个文件,同时对文件加密/签名。 2. 客户端根据配置表,在自定义时机去把离线包拉下来,做解压/解密/校验等工作。 3. 根据配置表,打开某个业务时转接到打开离线包的入口页面。 4. 拦截网络请求,对于离线包已经有的文件,直接读取离线包数据返回,否则走 HTTP 协议缓存逻辑。 5. 离线包更新时,根据版本号后台下发两个版本间的 diff 数据,客户端合并,增量更新。 ### WebView的初始化 本地Webview初始化都要不少时间, 首次初始化webview与第二次初始化不同,首次会比第二次慢很多。原因预计是webview首次初始化后,即使 webview 已经释放,但一些webview 共用的全局服务或资源对象仍没有释放,第二次初始化时不需要再生成这些对象从而变快。我们可以在Application预先初始化好WebView, 当第二次初始化WebView的时候速度就快多了, 或者直接将其拿来使用。 ## 参考资料 [Android Webview H5 秒开方案实现](https://juejin.cn/post/6844903673697402887) [https://juejin.cn/post/6844903586082766862]