Android:浅谈app加载H5

最新推荐文章于 2024-08-27 17:32:05 发布
最新推荐文章于 2024-08-27 17:32:05 发布
阅读量1.4k 收藏 4
点赞数
文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fjnu_se/article/details/106754814
版权
本文探讨了Android中H5加载速度慢的问题及其原因，包括页面资源下载、WebView初始化和js解析渲染的耗时。提出了解决方案，如实现资源本地化以减少网络请求，利用WebView缓存机制，以及采用VasSonic和预加载WebView等主流解决方案。通过这些方法，可以显著提高H5页面在Android app中的加载速度和用户体验。
摘要由CSDN通过智能技术生成

Android:浅谈app加载H5

在这里插入图片描述

引子

顾名思义，H5也就是HTML5。它的开发效率高，一套代码Android和IOS基本上都可以使用，同时呢只需要在每次更新时在服务端进行升级即可，大大的节约了成本和时间。那么这么方便的开发手段，在Android中表现如何呢？我们一起来探讨一下。

背景介绍

现如今的生活节奏越来越快，电子产品更是首当其冲。随着互联网时代的发展，特别是5g时代的到来，再加上各个品牌手机性能的提升，混合开发更加受到很多互联网公司的青睐，其中最原始，最便捷，最轻量级的采用WebView调用H5页面尤为夺目。但是这一技术并非没有弊端，许多app都嵌入了H5页面，但是WebView的加载速度实在不敢恭维，这也就了导致用户体验不好。

问题分析

在这里插入图片描述

为何WebView会一直遭人诟病呢？

首先我们应该先分析其为何这么慢，弄明白究竟是哪个环节出了问题。

Android是怎么将完整H5页面展示给用户的呢？

在这里插入图片描述

通过上图（精简版）我们可以看出，移动端加载H5需要很多个阶段：

  • WebView无响应阶段

    ​ WebView无响应阶段，可以大致认为是其是否被初始化，而个人认为，这一阶段也过于耗时了

  • 白屏阶段

    ​ 这一阶段也就是浏览器与服务器间开始建立连接申请html/css/js以及页面渲染相关的资源

  • 加载阶段

    ​ 加载阶段也就是便加载便渲染的过程

而导致加载速度慢，只要的原因有：

  • 页面资源（html/css/js）的下载耗时
  • WebView从首次创建到初始化这一过程耗时
  • js的解析以及对页面的渲染耗时

那我们可以对这些原因进行深入的分析。看看哪些环节是可以优化的。其实我们思考是否可以对页面资源本地化以及对WebView进行缓存，从而解决加载相关资源以及首次创建Webview十分缓慢造成的结果，那么我们就来看看如何解决。

解决方法

在这里插入图片描述

1.实现资源本地化

1.1实现原理

最低0.47元/天 解锁文章
fjnu_se
关注
android app内嵌h5页面,app内嵌h5页面：前端与原生语言的配合
weixin_42314846的博客
05-27 1660
判断操作系统：var u = navigator.userAgent,app = navigator.appVersion;var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //gvar isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //i...
android加载h5速度慢的解决方案,android H5本地缓存加载优化的实战
weixin_42522750的博客
05-27 1326
2020年最后一周，正准备摸摸鱼回家过年，须不知“惊天阴谋”已在领导层酝酿。竖日，组长带着诡异的微笑向我走来：组长： “快过年了，你回家路途遥远，要不要请两天假？”我： “组长，你真是我的知己，想我所想，思我所思，你这么一说我就不客气了，那我就请两天”组长：“行，请假肯定没问题，我一向很照顾兄弟们！！”(那一刻，一股暖流心中而过，早已将这一年他对我的“压榨”抛之脑后)“不过我还有个事跟你说下，回家...
Android 固定大小WebView加载的H5页面
xiaobaaidaba123的专栏
01-08 2490
1.背景：项目中经常有Android+H5混合开发的场景，大多数情况下显示H5页面的时候是全屏显示，有时候设计师却要求在界面上固定大小的位置显示H5。 2. 效果： 3. 核心代码实现： ...... <Button android:id="@+id/test_webview_btn" android:layout_width="wrap_content" android.
Android原生与H5混合开发经验总结
最新发布
程序员大爷
08-27 573
实现原生与H5的通信：原生和H5之间的通信是混合开发中的关键问题。原生与H5模块的划分：在混合开发中，可以根据需求将功能模块划分为原生和H5模块。H5模块负责展示内容和交互逻辑。选择合适的框架可以更好地整合原生和H5技术，并提供更好的开发体验和性能。混合开发可以在保持原生性能和体验的同时，利用H5技术实现快速开发和跨平台的优势。处理原生和H5的交互逻辑：原生和H5之间的交互逻辑可能比较复杂，需要在代码中进行适当的处理。在混合开发中，确保WebView的配置和处理机制安全，并对用户输入进行适当的验证和过滤。
android 加载h5页面代码,如何使用Android仿微信加载H5页面的进度条
weixin_39709178的博客
05-26 207
如何使用Android仿微信加载H5页面的进度条发布时间：2020-07-13 14:58:20来源：亿速云阅读：208作者：Leah本篇文章为大家展示了如何使用Android仿微信加载H5页面的进度条，代码简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。前言Android中WebView打卡前端页面时受到网路环境，页面内容大小的影响有时候会让用户等待很久。显示一...
android app与h5交互,APP与h5交互一【原创】
weixin_33783273的博客
05-27 554
交互必传参数App进入h5页面的时，需要告诉我们他们的身份(在我们的网址后面拼接参数)，也就是说我们需要知道是Android还是Ios访问的页面，现在定义此参数名为platform1，h5调用APP函数例如：h5写一个点击事件(跳链接)，app调用，形成的交互，我们在点击的时候，需要传递参数，android和IOS的方法不同不需要传递参数的时候传递空值，例如：if(platform==’Ios’)...
浅谈APP与H5对比！优势都有哪些呢？
ysy941104的博客
11-01 3039
很多人再开发一款APP的时候，H5开发相对来说比较便宜一点，原生APP开发则费用较高。那么到底H5跟原生开发有什么区别呢，我们来了解一下两种开发的区别在哪里！ H5,指的是HTML5，很多人都认为他是一种技术。在做网络开发时，都会问有没有做H5，但其实并不是一项技术，而是一项标准，其中所包含的技术主要有页面素材预加载技术，音乐加载播放技术，可以滑动的页面，可以涂抹擦除，有动态的文字和图片，可以填表...
原生APP开发公司浅谈原生开发、H5开发与混合开发的区别.pdf
12-19
"原生APP开发公司浅谈原生开发、H5开发与混合开发的区别.pdf" 在移动应用开发领域中，开发模式的选择对应用的性能、用户体验和开发效率都有着至关重要的影响。原生开发、H5开发和混合开发是当前市场上三种主流的...
android和js注入原理,彻底解决andorid h5交互!浅谈h5交互和js注入漏洞分析
weixin_42502255的博客
05-27 901
文章分两块,js调用andorid代码,android代码调用js前提 打开js交互 webview.getSetting().setJavaScriptEnable(true);一:android调用js代码说明:主要有两种方式,方式1: 4.4系统以前//需要另外开启线程mWebView.post(new Runnable() {// @Overridep...
Hybrid App 开发浅谈
Web分享
11-16 452
缘起 智能手机兴起，移动端开发火热起来。起初只有Android和IOS应用，随着H5的问世，以及手机性能的提升，Web App开始斩露头角。 一份代码，多端运行。这预示着开发成本的降低，同时也能减少因开发者实现的差异导致Android和IOS应用出现不同的表示。 发展 如果某一块的功能简单，仅仅是一些页面的展示，那么无用质疑，使用Web App技术现实更优，通过WebView嵌入到原生应用中。 ...
APP开发_使用H5开发安卓APP（引言）
突破编程
03-26 1845
使用H5开发安卓APP：引言
android加载本地asset文件夹下的h5界面
bruceyang的博客
04-28 1万+
建一个和res文件夹平级的文件夹assets 把html页面放在文件夹下,然后再webview中加载 String fileUrl = "file:///android_asset/index.html"; mWebview.getSettings().setDefaultTextEncodingName("utf-8"); mWebview.loadUrl
Android中使用WebView加载H5页面的方法
wpj1119245135的博客
04-14 5340
1、AndroidManifest.xml中必须加权限，否则会出Web page not available错误。 2、如果访问的页面中有Javascript，则webview必须设置支持Javascript。 webview.getSettings().setJavaScriptEnabled(true);  3、声明WebView控件，并设置URL WebView.loadUr
安卓APP webview加载H5 之间通信
liubangbo的专栏
08-20 1815
}}这样安卓端就写好了。接下来就是H5端调用了。H5端直接这么调用就可以了。//android app 会调用此方法},}},注意方法一定要挂载到window对象上。安卓端怎么调用呢？//调用html5 页面中的方法,带JSONObject类型参数@Override}});}这是带有参数的调用，安卓端是JSONObject类型的，H5端接收的是json字符串。//调用html5 页面中的方法}
项目笔记——安卓WebView加载H5页面问题处理
lht80s的博客
08-07 2072
记录Android项目开发中，使用WebView加载H5页面遇到的问题及解决方法。
Android开发——H5容器加载速度优化方案
热门推荐
关于Android开发的一些技术点总结 ╮(￣▽￣”)╭
02-14 2万+
1. 背景介绍 在偏重活动运营的电商App中，受制于App版本审核，具备开发周期短、可灵活发布等特点的H5页面受到青睐，承载了很多重要业务。但App Webview存在令人烦恼的性能问题，特别突出的是加载速度慢，和Native页面相比用户体验较差。因此本文将从H5加载速度优化方面，总结了XCache、Prefetch、容器预热三种优化方案，以及上线后的提速效果分享。 2. XCache离线缓存提速方案 2.1 方案背景 为了有效解决 Android H5的性能问题，除了使用Android WebView自身
安卓程序加载h5页面
小树学信奥
05-27 1万+
开发工具：Android Studio 2.2.0.0   一、 加载远程h5页面 1 新建一个Android工程MyWebViewDemo   2 在AndroidManifest.xml中添加互联网访问权限 添加完之后，AndroidManifest.xml的完整内容为： <manifest xmlns:android="http://schemas.android.com
android html 界面,android加载html5界面
weixin_28791139的博客
05-28 336
【实例简介】android通过WebView加载本地H5界面，实现android与H5交互【实例截图】【核心代码】protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);wv_modelMenu = (W...
原生app与H5进行交互
sketchlcy的博客
03-03 804
原生App与H5交互
Android滑动优化：新闻APP加载策略示例
本篇代码实例展示了如何优化Android模拟新闻APP的界面显示，实现滑动时图片的智能加载策略以及初次进入时的加载策略，以提高性能并减少资源消耗。 首先，我们关注的是滑动优化。滑动优化的核心在于避免在用户滑动...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值