title

--- theme: juejin highlight: androidstudio --- ## WebView与原生对比差在哪里？这里引用百度APP图片来说明。 ![图片来自网上.webp](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8250b9e8b14c4dcabe45c394855f4162~tplv-k3u1fbpfcp-watermark.image#?w=1080\&h=322\&s=32094\&e=webp\&b=fdf8fd) 百度的开发人员将这一整个过程划分为了四个阶段，并统计出了各个阶段的平均耗时。可以看到，在初始化组件阶段就花费了 260 ms，首次创建耗时均值为 500 ms，毫无疑问这是我们要优化的第一点。而最耗时的当属正文加载&渲染和图片加载两个阶段。为什么会这么耗时呢，因为这两个阶段需要进行多次网络请求、**JS** 调用、**IO** 读写。所以这里也是我们需要优化的地方。可以得出优化方向： * WebView预创建和复用 * 渲染优化（JS、CSS、图片） * 模板优化（拆分、预热、复用） ## WebView预创建和复用 `WebView` 的创建是比较耗时的，首次创建耗时几百毫秒，因此预创建和复用尤为重要。\ 大致逻辑是先创建WebView并缓存起来，等到需要的时候直接取出来，代码如下： ```js class WebViewManager private constructor() { // 为了阅读体验，省略部分代码 private val webViewCache: MutableList = ArrayList(1) private val lruCache: LRUCache = LRUCache(500) private fun create(context: Context): WebView { val webView = WebView(context) // ...... return webView } fun prepare(context: Context) { if (webViewCache.isEmpty()) { Looper.myQueue().addIdleHandler { webViewCache.add(create(MutableContextWrapper(context))) //读取缓存文件 val cachePath = CacheUtils.getDirPath(context, "web_cache") File(cachePath).takeIf { it.isDirectory }?.listFiles()?.sortedWith(compareByDescending { //文件创建时间越久说明使用频率越高 //通过时间倒序排序防止高频文件初始化时位于队首易被淘汰 val attrs = Files.readAttributes(it.toPath(), BasicFileAttributes::class.java) attrs.creationTime().toMillis() })?.forEach { val absolutePath = it.absolutePath //put会返回被被淘汰的元素 lruCache.put(absolutePath, absolutePath)?.let { path -> //删除被淘汰的文件 File(path).delete() } } false } } } fun obtain(context: Context): WebView { if (webViewCache.isEmpty()) { webViewCache.add(create(MutableContextWrapper(context))) } val webView = webViewCache.removeFirst() val contextWrapper = webView.context as MutableContextWrapper contextWrapper.baseContext = context webView.clearHistory() webView.resumeTimers() return webView } fun recycle(webView: WebView) { try { webView.stopLoading() webView.loadDataWithBaseURL(null, "", "text/html", "utf-8", null) webView.clearHistory() webView.pauseTimers() webView.webChromeClient = null webView.webViewClient = null val parent = webView.parent if (parent != null) { (parent as ViewGroup).removeView(webView) } val contextWrapper = webView.context as MutableContextWrapper contextWrapper.baseContext = webView.context.applicationContext } catch (e: Exception) { e.printStackTrace() } finally { if (!webViewCache.contains(webView)) { webViewCache.add(webView) } } } fun destroy() { try { webViewCache.forEach { it.removeAllViews() it.destroy() webViewCache.remove(it) } } catch (e: Exception) { e.printStackTrace() } } } ``` 这里需要注意以下几点： * 预加载时机的选择 `WebView` 的创建是比较耗时的，为了使预加载不会影响到当前主线程任务，我们选择 `IdleHandler` 来执行预创建，以保证不会影响到当前主线程任务。详细请看 `prepare(context: Context)` 方法。 * Context的选择每个 `WebView` 需要和对应的` Activity Context` 实例进行绑定，为了保证预加载的 `WebView Context` 和最终的 `Context` 之间的一致性，我们通过 `MutableContextWrapper` 来解决这个问题。 `MutableContextWrapper` 允许外部替换它的 `baseContext` ，因此 `prepare(context: Context)`方法可以传 `applicationContext` 进行预创建，等到实际调用时再进行替换，详细请看 `obtain(context: Context)` 方法。 * 复用和销毁在页面关闭前调用 `recycle(webView: WebView)` 进行回收，在应用退出前调用 `destroy()` 进行销毁。 * 复用WebView返回空白在调用 `recycle(webView: WebView)` 进行回收时，我们会调用 `loadDataWithBaseURL(null, "", "text/html", "utf-8", null)` 清除页面内容，导致复用时的加载栈底就是这个空白页面，所以我们需要在返回时对栈底进行判断，如果为空则直接返回，代码如下： ```js fun canGoBack(): Boolean { val canBack = webView.canGoBack() if (canBack) webView.goBack() val backForwardList = webView.copyBackForwardList() val currentIndex = backForwardList.currentIndex if (currentIndex == 0) { val currentUrl = backForwardList.currentItem.url val currentHost = Uri.parse(currentUrl).host //栈底不是链接则直接返回 if (currentHost.isNullOrBlank()) return false } return canBack } ``` ## 渲染优化（JS、CSS、图片） `WebView` 在加载内容的时候会进行多次网络请求、**JS** 调用、**IO** 读写。我们可以借由内核的 `shouldInterceptRequest` 回调，拦截资源请求由客户端进行下载，并以管道方式填充到内核的 `WebResourceResponse`中，这里引用百度APP图片来说明。 ![图片来自网上.webp](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e154b6ecc1eb4dceb084f6cef744621f~tplv-k3u1fbpfcp-watermark.image#?w=1080\&h=261\&s=14802\&e=webp\&b=fefcfe) * 预置离线包精简并抽取公共的 JS 和 CSS 文件作为通用资源，将抽取的资源存放在 **assets** 下，再通过约定的规则去匹配，代码如下： ```js webView.webViewClient = object : WebViewClient() { // 为了阅读体验，省略部分代码 override fun shouldInterceptRequest( view: WebView?, request: WebResourceRequest? ): WebResourceResponse? { if (view != null && request != null) { if(canAssetsResource(request)){ return assetsResourceRequest(view.context, request) } } return super.shouldInterceptRequest(view, request) } } ``` ```js private fun assetsResourceRequest( context: Context, webRequest: WebResourceRequest ): WebResourceResponse? { // 为了阅读体验，省略部分代码 try { val url = webRequest.url.toString() val filenameIndex = url.lastIndexOf("/") + 1 val filename = url.substring(filenameIndex) val suffixIndex = url.lastIndexOf(".") val suffix = url.substring(suffixIndex + 1) val webResourceResponse = WebResourceResponse() webResourceResponse.mimeType = getMimeTypeFromUrl(url) webResourceResponse.encoding = "UTF-8" webResourceResponse.data = context.assets.open("$suffix/$filename") return webResourceResponse } catch (e: Exception) { e.printStackTrace() } return null } ``` * 接口更新缓存资源除了预置离线包外，我们还可以通过接口请求，获取最新的缓存资源，以及通过请求资源的类型自行缓存，代码如下： ```js webView.webViewClient = object : WebViewClient() { // 为了阅读体验，省略部分代码 override fun shouldInterceptRequest( view: WebView?, request: WebResourceRequest? ): WebResourceResponse? { if (view != null && request != null) { if(canCacheResource(request)){ return cacheResourceRequest(view.context, request) } } return super.shouldInterceptRequest(view, request) } } ``` ```js private fun canCacheResource(webRequest: WebResourceRequest): Boolean { // 为了阅读体验，省略部分代码 val url = request.url.toString() val extension = url.getExtensionFromUrl() if (extension.isBlank()) { val method = request.method val accept = request.requestHeaders["Accept"] ?: return false if (method.contains( "GET", true ) && (accept.contains( "image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8", true )) ) { return true } } return extension == "ico" || extension == "bmp" || extension == "gif" || extension == "jpeg" || extension == "jpg" || extension == "png" || extension == "svg" || extension == "webp" || extension == "css" || extension == "js" || extension == "json" || extension == "eot" || extension == "otf" || extension == "ttf" || extension == "woff" } ``` ```js private fun cacheResourceRequest( context: Context, webRequest: WebResourceRequest ): WebResourceResponse? { // 为了阅读体验，省略部分代码 try { val url = webRequest.url.toString() val cachePath = CacheUtils.getCacheDirPath(context, "web_cache") val filePathName = cachePath + File.separator + url.encodeUtf8().md5().hex() val key = cachePath + File.separator + filePathName file = File(key) if (!file.exists() || !file.isFile) { runBlocking { // 开启网络请求下载资源 download(HttpRequest(url).apply { webRequest.requestHeaders.forEach { putHeader(it.key, it.value) } }, filePathName) } //put会返回被淘汰的元素 lruCache.put(key, key)?.let { path -> //删除被淘汰的文件 File(path).delete() } } if (file.exists() && file.isFile) { val webResourceResponse = WebResourceResponse() webResourceResponse.mimeType = getMimeTypeFromUrl(url) webResourceResponse.encoding = "UTF-8" webResourceResponse.data = file.inputStream() webResourceResponse.responseHeaders = mapOf("access-control-allow-origin" to "*") return webResourceResponse } } catch (e: Exception) { e.printStackTrace() } return null } ``` 我们通过`canCacheResource(webRequest: WebResourceRequest)`来判断是否是需要缓存的资源。\ 再根据URL去获取缓存中文件，否则开启网络请求下载资源，详细请看 `cacheResourceRequest(context: Context, webRequest: WebResourceRequest)` 。\ 这边仅对图片、字体、CSS、JS、JSON进行缓存，可根据项目实际情况缓存更多类型资源。 ```kotlin class LRUCache(private val capacity: Int) { private val cache = LinkedHashMap() // 将访问的元素移动到队尾 private fun moveToTail(key: K): V? { val value = cache.remove(key) cache[key] = value return value } // 移除队首元素 private fun removeHead(): V? { return cache.remove(cache.keys.first()) } fun get(key: K): V? { if (!cache.containsKey(key)) { return null } return moveToTail(key) } fun put(key: K, value: V): V? { var head: V? = null if (cache.size >= capacity) { head = removeHead() } cache[key] = value return head } fun remove(key: K) { cache.remove(key) } fun clear() { cache.clear() } } ``` ## 模板优化（拆分、预热、复用）关于模板，代码如下： ```js title

``` 客户端加载模板代码（温馨提示：上面只是例子，实际模板根据情况拆分），加载完成后再调用 **JS** 方法注入数据。 ```js webView.evaluateJavascript("javascript:changeContent('

我是HTML

')") {} ``` 数据哪里来呢？这里以列表页跳转详情页举个例子，仅供参考： * 列表页接口返回列表数据的时候带上详情内容，跳转详情页的时候带上内容数据。优点简单粗暴，缺点耗费流量。\ 当然还有其他方法这里不再多说，可根据自己的实际需求进行选择。 ## CDN 加速、DNS 等其他优化网上资料很多这里就不搬运了。😏 ## Thanks 以上就是本篇文章的全部内容，如有问题欢迎指出，我们一起进步。如果喜欢的话希望点个赞吧，您的鼓励是我前进的动力。谢谢\~\~ ## 示例代码 * github： [fragmject](https://github.com/miaowmiaow/fragmject.git) ## 推荐阅读 > * [Jetpack Compose : 优雅的使用WebView - 掘金 (juejin.cn)](https://juejin.cn/post/7194360493866221628) ### 参考本文内容参考或引用以下文章，推荐大家阅读会有更多的收获。 [Android WebView H5 秒开方案总结](https://juejin.cn/post/7016883220025180191)\ [百度APP-Android H5首屏优化实践](https://mp.weixin.qq.com/s/AqQgDB-0dUp2ScLkqxbLZg)\ [今日头条品质优化 - 图文详情页秒开实践](https://juejin.cn/post/6876011410061852680)