首页 > 其他分享 >神操作 之 远程调试 WebView 定位加载缓慢的坑。。。

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

时间:2022-11-10 21:09:04浏览次数:80  
标签:ummm WebView 加载 Android 调试 图片


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


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


前言

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

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

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

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

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

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



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


脑补分析来一波

这块的流程大概如下:

  • 通过接口方式获取详情;
  • 拿到接口返回富文本进行本地拼接 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

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


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

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


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

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

分析并解决

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

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

阿韩说了,打死不改富文本。那么针对 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
}
}

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

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

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

Sleep~

点滴积累,加油~

参考资料

  1. ​Remote Debugging WebViews​


标签:ummm,WebView,加载,Android,调试,图片
From: https://blog.51cto.com/u_13346181/5842073

相关文章

  • antd table 树形数据动态加载
    antd的table组件支持树形结构的数据,不过前提是需要将整棵树的数据一次性全部返回,对于数据量比较大的情况下,可能会需要动态加载数据。exportdefaultfunctionDynamicT......
  • 一个页面从输入URL到页面加载完成,都做了什么?
    一个页面从输入URL到页面加载完成,都做了什么?1解析URL首先会对URL进行解析,获取所需要使用的传输协议和请求的资源路径如果输入的URL中的协议或主机名不合法,将会把地址......
  • Guava LoadingCache本地缓存的正确使用姿势——异步加载
    1.【背景】AB实验SDK耗时过高同事在使用我写的实验平台sdk之后,吐槽耗时太高,获取实验数据分流耗时达到700ms,严重影响了主业务流程的执行2.【分析】缓存为何不管用我记......
  • 【博学谷学习记录】超强总结,用心分享|Java基础分享-类加载
    目录 1.什么是类的加载过程2.类加载详解2.1加载2.2连接2.3初始化3.类的加载时机(包括加载、连接、初始化)4.总结   1.什么是类的加载过程......
  • nginx配置加载视频和图片
    注意:系统:Ubuntu18.04Nginx版本:1.14.0 1.进入到配置目录/etc/nginx/sites-enabled2.打开/etc/nginx/sites-enabled目录下default文件3.在default添加如下类容就可......
  • cesium 加载geoJson格式的图斑
    Cesium加载geoJson格式的图斑方法://首次进来判断是否存在图斑if(this.geoSource){this.Global.viewer.dataSources.remove(this.Global.viewer.dataSources.get......
  • ✍77 pycharm远程调试问题
    引入配置SSH和SFTP自行百度一.以前的理解:pycharm配置远程服务器python解释器配置sftp映射远程服务器文件想当然的以为直接打开某一个.py文件调用远程解......
  • 【转】音频功放调试
    转自https://blog.csdn.net/u010783226/article/details/109095075一个手机的音乐效果的好坏,取决于喇叭(包括喇叭单体、音腔结构、出音孔、防尘网等),音频功放,音效算法调试(......
  • 浅谈性能优化之图片压缩、加载和格式选择
    原文链接:浅谈性能优化之图片压缩、加载和格式选择在认识图片优化前,我们先了解下【二进制位数】与【色彩呈现】的关系。二进制位数与色彩在计算机中,一般用二进制数来......
  • 无法打开调试器端口(127.0.0.1:xxxx): java.net.BindException "Address already
    开启项目突然报错1099端口冲突和debug端口冲突,修改端口号没有用依旧冲突,查看端口进程为空,重新配置tomcat、重启电脑和关闭HyperV无效果。删除C:\Users\用户名\AppData\Lo......