Android 远程调试 WebView 加载缓慢

2019-12-04 13:01:16 浏览数 (1)

前言

事情的缘由,因为老韩某天贱嗖嗖的说,来,你搜下那个课程,现在免费,原价好几百,请你看。

ummm,原谅我的年少无知太单纯,信了糟老头子的前半段话。嗯,的确是前半段话。

后半段话是,加载这么慢,你是不是也看的很不爽?很不快乐?

ummm,老韩好心机。疑惑之下点击看了下,ummm,神奇的咧,慢的一批。

这时候,老韩放大招了。忒慢了,你瞅瞅,反正我打死不改富文本。

ummm,懵逼.gif、无奈.gif、蛋凉凉.gif

分析一波

这块的流程大概如下:

  • 通过接口方式获取详情;
  • 拿到接口返回富文本进行本地拼接 Html 代码段;
  • 加载拼接好的 Html 代码段。

三个环节,接口暂未做优化,这个爱莫能及,本地拼接,倒也不会出现特别耗时的情况,那么导致加载缓慢的缘故,就应该是这个返回的富文本导致。

远程调试 WebView

通过 Chrome 开发者工具在 Android 应用中调试 WebView。这里需要注意:

  • 此工具只支持在 Android 4.4 (KitKat) 或更高版本中,才能使用 DevTools 在原生 Android 应用中调试 WebView 内容

Step 1:设置在 Debug 模式下启用 WebView 调试

代码语言:javascript复制
// Debug 模式下开启远程调试if (BuildConfig.DEBUG) {    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {        WebView.setWebContentsDebuggingEnabled(true)    }}

Step 2:Chrome 地址栏输入 chrome://inspect

Step 3:手机打开要调试的页面,查看 Chrome 调试器

Step 4:点击 inspect 开始调试页面

分析并解决

从输入的日志来看,明显当前这个网页图片占了很大一部分比例,而且每个图片都还不小。

可爱的老韩啊,图片都木有压缩处理哦。

阿韩说了,打死不改富文本。那么针对 Android 端,这块又该如何处理呢?

可不可以优先加载文字,随后加载图片呢?

这样一来,至少保证了网页的快速加载。

首先在 WebView 设置中设置禁止加载图片以及直接阻塞图片的加载:

代码语言:javascript复制
// 取消自动加载图片webSetting.loadsImagesAutomatically = false// 阻塞加载图片webSetting.blockNetworkImage = true

捎带脚的开启硬件加速吧,现在机子应该毫无压力。

代码语言:javascript复制
// 开启硬件加速webSetting.setRenderPriority(WebSettings.RenderPriority.HIGH)

最后,在我们实际加载 WebView 的 Finish 回调中再次开启图片加载即可。

代码语言:javascript复制
 override fun onPageFinished(view: WebView, url: String?) {     // 解除阻塞     setting.blockNetworkImage = false     // 是否需要加载图片     if (!setting.loadsImagesAutomatically) {         setting.loadsImagesAutomatically = true     } }

运行 App,加载速度明显有所提升。

但是有一点不太好的是,因为上来就阻塞了图片的加载,导致在网速差的时候,图片的位置是一个小叉,这个有点恶心了。

改天等鸡大大空闲请教吧~

Sleep~

点滴积累,加油~

0 人点赞