神操作之远程调试 WebView 定位加载缓慢的坑。。。

甜的时候，甜到让人不敢相信。苦的时候，苦到让你日夜无眠。

前言

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

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

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

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

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

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

脑补分析来一波

这块的流程大概如下：

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

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

远程调试 WebView

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

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

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

// 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 设置中设置禁止加载图片以及直接阻塞图片的加载：

    // 取消自动加载图片
    webSetting.loadsImagesAutomatically = false
    // 阻塞加载图片
    webSetting.blockNetworkImage = true

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

    // 开启硬件加速
    webSetting.setRenderPriority(WebSettings.RenderPriority.HIGH)

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

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