开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

为什么在Android 9.0中，网页视图中的进度条会延迟显示？

在Android 9.0中，网页视图中的进度条会延迟显示的原因是由于WebView组件的更新机制改变所导致的。

在Android 9.0之前的版本中，WebView使用的是WebKit引擎，而在Android 9.0中，WebView切换到了基于Chromium的新引擎。这个新引擎的更新机制发生了变化，它采用了多进程架构，将WebView的渲染过程放在了独立的渲染进程中。

由于进程间通信的开销以及渲染进程的独立性，导致了进度条的延迟显示。具体来说，当网页加载时，渲染进程会将加载进度信息发送给主进程，主进程再将进度信息传递给WebView组件进行显示。这个过程中存在一定的延迟，导致进度条的显示不及时。

为了解决这个问题，可以通过以下方式进行优化：

使用WebView的setWebChromeClient方法设置WebChromeClient对象，并重写onProgressChanged方法。在该方法中，可以实时获取到加载进度信息，并及时更新进度条的显示。
在加载网页时，可以先显示一个默认的进度条，然后通过JavaScript与Java代码进行交互，实时获取到网页加载进度，并更新进度条的显示。
对于特定的应用场景，可以考虑使用自定义的进度条组件，通过与WebView进行交互，实现更加精确和及时的进度显示。

腾讯云相关产品中，可以使用腾讯云移动浏览器（Tencent X5）来替代系统默认的WebView组件，它基于Chromium内核进行了优化，提供了更好的性能和稳定性。您可以通过以下链接了解更多关于腾讯云移动浏览器的信息：https://cloud.tencent.com/product/x5

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Flutter SingleChildScrollView 滚动控件

Flutter中的SingleChildScrollView类似于Android中的ScrollView，它只能接收一个子组件。...需要注意的是，通常SingleChildScrollView只应在期望的内容不会超过屏幕太多时使用，这是因为SingleChildScrollView不支持基于Sliver的延迟实例化模型，所以如果预计视口可能包含超出屏幕尺寸太多的内容时...2、基本概念：基于Sliver的延迟构建通常可滚动组件的子组件可能会非常多、占用的总高度也会非常大；如果要一次性将子组件全部构建出将会非常昂贵！...，这种模型也称为”基于Sliver的延迟构建模型“。...水平滚动下面是一个将大写字母A-Z沿水平方向显示的例子。

5.1K0 0

项目需求讨论-WebView进度加载条

这次是因为做的项目是原生内嵌WebView，所以当我们的WebView在加载网页的时候，需要有个加载进度条，当然这时候有很多种选择，但是因为普通的对话框类型的加载框太丑，我们就舍弃掉了，而是模仿微信里面的进度加载条...，也就是在WebView 的顶部会有一条线来显示加载进度。...（也就是下方GIF图中的那个紫红色的进度条，别问我为啥用紫红色。我就觉得用这个颜色更加明显点。O(∩_∩)O~） ? 声明大家不要喷哈，有问题可以评论反馈。...大家可以看看 Android之WebView快速上手 ---- OK ,进入我们的正题，我们先要知道怎么监听到网页加载的进度。...监听网页加载进度：我们按照上面的Android之WebView快速上手所说的： ?

1K3 0

Notification与Widget（其实没怎么讲）Android应用界面开发

Android应用界面开发第三章学习第四部分#### ---- Notification与Widget#### Notification与Widget，他们为什么要一起讲呢？...，而再次下拉后，会变为下方这样子的大型界面，方便显示更多内容，也许都不用进主应用啦。...这里用来选择在通知来的时候，设备最上方显示的图案 ?...() setSmallIcon(int)：设置右下角的小图标，在接收到通知的时候顶部也会显示这个小图标 setLargeIcon(Bitmap)：设置左边的大图标 setAutoCancel(boolean...如果为不确定（持续活动）的进度条，这是在处理进度无法准确获知时显示活动正在持续，所以调用setProgress(0, 0, true) ，操作结束时，调用setProgress(0, 0, false

1.4K4 0

InstantClick,让你的网站快到起飞，PJAX技术

instantclick不总是“即插即用”（不是通过两行代码就可以在你的网页上运行），你可能需要自定义一些设置来适应你的网站，这也是为什么阅读上述文章是强制性的。...’s events]()来替代) 依赖上面两个函数的第三方脚本（比如js代码）需要调整（参阅[事件和脚本的重新加载]()）在加载页面的时候，浏览器不会在显示原本加载进度条了，instantclick...如果您的网站没有针对手机进行优化，延迟时间则取决于操作系统。 Android给出300 ms，iOS给出450 ms。在同一站点上的3G请求的延迟时间通常需要大约200ms。如何选择？...自定义加载条 进度条是一个假的进度条，只是在那里给你的用户的感觉页面的加载进度。在未来，应该可以使进度条显示真正的进度（通过查看服务器的Content-Length头）。...即使页面已经立即加载，也会显示进度条，在将来这将更改。你可以在github讨论。当访问者缩放页面或旋转其设备时，该栏的大小和位置会自动调整，因此即使您的网站未针对移动设备进行优化，也会正常工作。

3.7K2 0

Android在项目中接入腾讯TBS浏览器WebView的教程与注意的地方

特殊功能: 速度快：相比系统webview的网页打开速度有30+%的提升；省流量：使用云端优化技术使流量节省20+%；更安全：安全问题可以在24小时内修复；更稳定：经过亿级用户的使用考验，CRASH...点击了网页的控件就可以回调上面的方法在回调方法里面我们利用Intent打开文件选择器然后选择完文件后在onActivityResult回调里面进行获取，然后利用ValueCallback<Uri 或者...如果都没有，在Application初始化调用initX5Environment方法的时候，会进行离线安装，失败就会自动切换自用自带内核。...显示网页文字时，可通过长按选择文字的标识判断，如下水滴状选择效果是x5webview的标志： ?...这里给一个简单加进度条的封装，在项目中使用的话，你在布局文件里面使用路径+ProgressWebview即可 public class ProgressWebview extends WebView {

4.2K2 0

【移动端网页布局】移动端网页布局基础概念 ② ( 视口 | 布局视口 | 视觉视口 | 理想视口 )

它是指网页中可见部分的大小，即浏览器窗口中显示的内容大小。在移动设备上，由于屏幕较小，需要对网页进行缩放以适应屏幕大小，因此布局视口也需要进行调整。...为了使网页在不同设备上都能够正确地显示和布局，开发者可以使用响应式设计来根据设备的不同调整布局视口。...布局视口机械地将 PC 端网页在手机端呈现 ; Android / iOS 将布局视口分辨率设置为了 980 像素宽度 , PC 端的网页可以显示在布局视口中 ; 如下图所示 , 强行将浏览器的宽屏界面...下图中 , 在下面的视觉视口中 , 网页只能被看到一部分区域 ; 3、理想视口 ( 网页大小 = 设备大小 ) 理想视口 - Ideal Viewport 指的是指在浏览器中，使网页布局和显示最佳的视口大小...理想视口的大小取决于网页的内容和布局，通常应该与布局视口的大小相同。通过设置理想视口，可以使网页在不同设备上具有相同的布局和显示效果，无需进行缩放和滚动。

1.3K3 0

WKWebView

在iOS中，加载网页目前有两种控件：UIWebView和WKWebView。...你还可以使用 setMagnification：centeredAtPoint：以编程方式设置Web内容第一次在Web视图中显示的缩放比例。此后，用户可以使用手势来改变比例。...按指定的因子缩放页面内容，并将结果居中在指定的点上。导航 allowsBackForwardNavigationGestures。布尔值，指示水平滑动手势是否会触发后退列表导航，默认为NO。...枚举类型，需要用户手势开始播放的媒体类型。设置选择粒度 selectionGranularity。用户可以在网页视图中交互地选择内容的粒度级别。 WKSelectionGranularity。...显示加载进度条 我们可以通过监听WKWebView的estimatedProgress属性值来实现一个加载进度条，而UIWebView只能是通过timer事件做一个假的加载进度条。

6K2 0

Android自定义带进度条WebView仿微信加载过程

在正常开发中，我们客户端需要用webView加载网页，再遇到网络慢或者访问的服务器响应时，页面是空白的，所以为了用户更好的体验，我们可以提供一个正在加载的进度条，提示用户正在加载。...本文结构： 1、自定义webView 2、在应用中的使用 3、效果展示一、自定义webView 1、首先定义一个类，继承webView，并首先构造方法 public class ProgressBarWebView...，所以我们需要在第二中构造方法中进行操作，如下： //首选创建一个进度条，我们这里创建的是一个横向的进度条 progressBar = new ProgressBar(context, null, android.R.attr.progressBarStyleHorizontal...); //设置背景样式 progressBar.setProgressDrawable(drawable); //调用本身的addView（其实是调用ViewManager里的方法，看源码）方法讲进度条添加到当前布局视图中...addView(progressBar); //正常想获取或这进行交互一般要实现一下两个方法，Myweblient()可以限制不用手机本身的浏览器，MyChromeClient（）可以获得网页加载的进度

9261 0

如何处理手势冲突 | 手势导航连载 (三)

不幸的是， 进度条太靠近主屏手势区域 (Home Screen Gesture Area)，所以当用户在该区域滑动时，系统把它错误地判断为用户是要执行快速切换应用的操作，这也会让用户感到困惑。...您也许已经注意到，在流程图中多图显示控件 (ViewPager) 在此处回答 "否"。这是因为与整个视图的宽度相比，屏幕左右侧的手势交互区域宽度相对较小 (默认为每边 20dp)。...这时屏幕底部的系统手势交互冲突已经解决了，但屏幕左右两侧的 "后退" 操作依然和进度条有冲突: 在上图中，由于进度条的播放头正好位于右侧手势区内，因此系统认为用户正在用手势执行 "返回" 操作，因此显示了...由于这个 API 会一定程度上破坏用户习惯的操作，因此系统做出了限制: 屏幕的每个边缘最多只能被应用切除 200dp。开发者听到这个限制时，常会提出以下问题: 为什么要有限制？...不会，系统仅计算屏幕范围内的切出矩形。同样，如果视图只有一部分显示在屏幕内，则仅计算所请求矩形的屏幕内可见部分。请关注下一篇连载读完本文您可能会问: 为什么我们还没有讲流程图的右半部分？

4.9K3 0

WebView 的一切都在这儿

en-US/docs/Mozilla/Mobile/Viewport_meta_tag https://developer.mozilla.org/zh-CN/docs/Web/CSS/@viewport 视口是一个为网页提供绘图区域的矩形...你可以指定数个视口属性，比如尺寸和初始缩放系数(initial scale)。其中最重要的是视口宽度，它定义了网页水平方向的可用像素总数(可用的CSS像素数)。...多数 Android 上的网页浏览器(包括 Chrome)设置默认视口为一个大尺寸(被称为"wide viewport mode"，宽约 980px)。...也有许多浏览器默认会尽可能缩小以显示完整的视口宽度(被称为"overview mode")。...API 全屏显示网页 http://calefy.org/2012/06/03/fullscreen-web-page-width-fullscreen-api.html WebView实现全屏播放的一种方法

2.1K6 0

从零开始学 Web 之 CSS3（八）CSS3三个案例

通过以往CSS的知识，我们都能理解的大小是会影响到我们的网页布局的，而viewport又决定了的大小，所以viewport间接的决定并影响了我们网页的布局。...在移动设备上viewport不再受限于浏览器的窗口，而是允许开发人员自由设置viewport的大小，通常浏览器会设置一个默认大小的 viewport，为了能够正常显示那些专为PC设计的网页，一般这个值的大小会大于屏幕的尺寸...从图中统计我们得知不同的移动厂商分别设置了一个默认的viewport的值，这个值保证大部分网页可以正常在移动设备下浏览。...; document.documentElement.clientHeight; 通过前面介绍我们知道，如果要保证为PC设计的网页在移动设备上布局不发生错乱，移动设备会默认设置一个较大的viewport...是我们布局网页的区域，那么最终layout viewport是要显示在ideal viewport里的，而layout viewport大于ideal viewport时，于是就出现滚动条了，那么为什么有的移动设备网页内容被缩放了呢

1.3K1 0

从零开始学 Web 之移动Web（一）屏幕相关基本知识，调试，视口，屏幕适配

通过以往CSS的知识，我们都能理解的大小是会影响到我们的网页布局的，而viewport又决定了的大小，所以viewport间接的决定并影响了我们网页的布局。...在移动设备上viewport不再受限于浏览器的窗口，而是允许开发人员自由设置viewport的大小，通常浏览器会设置一个默认大小的 viewport，为了能够正常显示那些专为PC设计的网页，一般这个值的大小会大于屏幕的尺寸...从图中统计我们得知不同的移动厂商分别设置了一个默认的viewport的值，这个值保证大部分网页可以正常在移动设备下浏览。...; document.documentElement.clientHeight; 通过前面介绍我们知道，如果要保证为PC设计的网页在移动设备上布局不发生错乱，移动设备会默认设置一个较大的viewport...是我们布局网页的区域，那么最终layout viewport是要显示在ideal viewport里的，而layout viewport大于ideal viewport时，于是就出现滚动条了，那么为什么有的移动设备网页内容被缩放了呢

7902 1

WebView开源库终极方案

接口，web的接口回调，包括常见状态页面切换【状态页面切换】，进度条变化【显示和进度监听】等 Message 自定义消息Message实体类 ProgressWebView...显示一个加载进度条可以说很大程度上提升用户的体验。...private WebProgress pb; //显示进度条 pb.show(); //设置进度条过度颜色 pb.setColor(Color.BLUE,Color.RED); //设置单色进度条 pb.setColor...在WebViewClient.onPageStarted()中注入还有一个致命的问题——这个方法可能会回调多次，会造成js代码的多次注入。...在这个方法中，可以给WebView自定义进度条，类似微信加载网页时的那种进度条 如果在此方法中注入js代码，则需要避免重复注入，需要增强逻辑。

3.1K3 0

Android 关于WebView全方面的使用（项目应用篇）

1、关于WebView的使用： ****与JS交互**** 拨打电话、发送短信、发送邮件上传图片(版本兼容) 进度条设置字体大小设置返回网页上一层、显示网页标题全屏播放网络视频 ?...: * - 优酷视频直接跳到自带浏览器 * - 根据标识:打电话、发短信、发邮件 * - 进度条的显示 * - 加载完成后，添加javascript监听 */ public class MyWebViewClient...，遍历所有的img节点， // 并添加onclick函数，函数的功能是在图片点击的时候调用本地java接口并传递对应src和has_link里的值过去 webView.loadUrl...这里用的是先加载到90%再加载到100%, 具体为什么相信大家都懂吧... // 进度条 假装加载到90% public void startProgress90() { for (int...http://www.apkfuns.com/android-webview%E4%B8%8Ejavascript%E4%BA%A4%E4%BA%92.html 6、所遇问题 WebView加载网页不显示图片解决办法

1.5K4 0

Android webView打开网页

，可以正常执行网页的响应。...onPageStarted()：页面开始加载时调用，这时候可以显示加载进度条，让用户耐心等待页面的加载。...onProgressChanged()：页面加载进度发生变化时调用，可以通过该方法实时向用户反馈加载情况，如显示进度条等。...布局规则，ProgressBar会覆盖在WebView之上，默认是隐藏不显示。...就是你从首页跳转到了一个新页面,点击返回的时候会返回首页。如果本来就在首页点击返回的时候会退出app。

1.9K2 0

Android自定义webView头部进度加载效果

看图说话：上图是不是加载网页的时候会有一个进度条在横向加载，比以前网速不好的时候是一片空白给人的感觉友好多了是不，然后效果还不错。...实现思路就是自己画一条进度线（大家应该都会吧）然后加载到WebView的上面，开始进度条是隐藏的，进度线初始值为1，然后为了效果好一点，初始少于10的进度都让它加载到10的位置，等进度到100的时候0.2...,如果没有这个，在低分辨率的手机上显示可能会异常 mSettings.setRenderPriority(WebSettings.RenderPriority.HIGH); //提高网页加载速度，暂时阻塞图片加载...，然后网页加载好了，在进行加载图片 mSettings.setBlockNetworkImage(true); mSettings.setAppCacheEnabled(true);//开启缓存机制 setWebViewClient...自定义webView头部进度加载效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。

1.3K1 0

Android仿微信公众号文章页面加载进度条

前言：微信公众号文章详情页面加载的时候，WebView会在头部显示一个进度条，这样做的好处就是用户可以一边加载网页内容的同时也可浏览网页内容，不需要等完全加载完之后才全部显示出来。如何实现呢？...-- 进度条的四个棱角大小 0 为都是直角随着值的增大角越圆滑 -- <corners android:radius="0dip" / <gradient android:endColor...="fill_parent" android:layout_height="fill_parent"/ </RelativeLayout 4、在Activity中是如何使用和显示网页内容的：...view, int errorCode, String description, String failingUrl) { } }; } 通过这几个步骤，就是实现跟微信公众号文章详情页显示的进度条一致了...源码下载：Android微信页面加载进度条 以上就是本文的全部内容，希望对大家的学习有所帮助。

7933 0

使用相交观察器和SQIP进行渐进式图像加载

这种技术背后的想法是，在连接速度较慢的情况下，你可以尽快向用户展示完全可用的网页，为他们提供更好的体验。即使在更好的网络连接上，这仍然为用户提供了更快的可用页面，并且体验得到了改善。...延迟加载图像背后的想法是，你需要等到用户进一步向下滚动页面，并在发出网络请求之前将图像放入视图中。...使用延迟加载技术将意味着用户只加载他们在视口中看到的内容，而与低质量图像相结合则意味着双重网页性能会带来麻烦在这篇文章中，我将通过我所经历的步骤和您如何开始使用这种技术来谈谈您自己开始入门在我们继续之前...，然后再确定它是否在视图中。...为了让你更全面地了解整个网页的外观，让我们来想象下面的页面你会注意到，因为中间图像位于用户的视口中，所以它被延迟加载，并且低质量图像被替换为全质量图像。视口下方的所有东西（红线）仍然模糊不清。

1.8K2 0

WebView深度学习（二）之全面总结WebView遇到的坑及优化

当涉及到混合式内容时，WebView会尝试去兼容最新Web浏览器的风格；另外：在认证证书不被Android所接受的情况下，我们可以通过设置重写WebViewClient的onReceivedSslError...解决方案：在EditText中加入一句： android:layerType=”software” 图片无法显示：做的程序里有的时候会需要加载大图，但是硬件加速中 OpenGL对于内存是有限制的...---- ⇒ 五、关于WebView的一点小优化：（1）给WebView加一个加载进度条 用Webview加载一个网页时，如果加载时间长，界面会一直空白，体验不太好，所以加个进度条更好看一下...（2）加快HTML网页加载完成的速度，等页面finish再加载图片默认情况html代码下载到WebView后，webkit开始解析网页各个节点，发现有外部样式文件或者外部脚本文件时，会异步发起网络请求下载文件...setLoadsImagesAutomatically(true); } } （3）自定义WebView页面加载出错界面当WebView加载页面出错时（一般为404 NOT FOUND），安卓WebView会默认显示一个卖萌的出错界面

5.9K3 0

Android -- 真正的高仿微信打开网页的进度条效果

二，为什么要搞缓慢效果？　　三，我的实现思路　　四，代码，内含注释　　五，使用方法与截图　　六，完整项目一，为什么说是真正的高仿？　　...阐述这个问题前，先说下之前网上的，各位可以复制这段字，去百度一下 "仿微信打开网页的进度条效果" ,你会看到有很多类似的文章，不过他们有个共同点，就是实现方法都是一样的，而且，都忽略了微信加载网页时，...好了，上面说到，之前网上的方法都是都忽略了微信加载网页时，进度条的缓慢动画效果，实现代码也是千篇一律，如下： /** 先实例化个进度条 */ ProgressBar mProgressBar = (ProgressBar...对，为什么要这么麻烦，你如果要搞个网页加载进度条，上面的代码不过 10 行，妥妥地实现了。...* * 真正的仿微信网页打开的进度条 * * 下面的所有属性都可以自己采用 get set 来自定义 * */ public class SlowlyProgressBar {

1.2K6 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭