移动端H5页面生成方法、装置、电子设备和存储介质

摘要

本发明实施例公开了一种移动端H5页面生成方法、装置、电子设备和存储介质。该移动端H5页面生成方法包括：获取移动端H5页面的响应请求消息，将所述响应请求消息分离成逻辑请求消息和渲染请求消息；将所述逻辑请求消息发送至原生端执行；将所述渲染请求消息发送至浏览器端执行，其中，所述原生端和所述浏览器端通过JsBridge通信进行数据交互。本发明涉及移动互联技术领域，以解决移动端H5页面加载生成时出现的白屏、操作卡顿、体验不流畅等问题。

说明书

技术领域

本发明实施例涉及移动互联技术领域，尤其涉及一种移动端H5页面生成方法、装置、电子设备和存储介质。

背景技术

如今移动客户端开发中，加载H5页面已十分普遍，虽然这样解决了客户端频繁发版、无法动态更新的问题；但由于Webview渲染H5本身的性能瓶颈，使得H5页面天生难以达到原生流畅的交互效果，页面卡顿、加载白屏、交互性能差是现有H5加载技术的通病。

发明内容

本发明实施例提供一种移动端H5页面生成方法、装置、电子设备和存储介质，以解决H5页面加载生成时出现的白屏、操作卡顿、体验不流畅等问题。

第一方面，本发明实施例提供了一种移动端H5页面生成方法，包括：

获取移动端H5页面的响应请求消息，将所述响应请求消息分离成逻辑请求消息和渲染请求消息；

将所述逻辑请求消息发送至原生端执行；

将所述渲染请求消息发送至浏览器端执行，其中，所述原生端和所述浏览器端通过JsBridge通信进行数据交互。

第二方面，本发明实施例还提供了一种移动端H5页面生成装置，包括：

消息分离模块，用于获取移动端H5页面的响应请求消息，将所述响应请求消息分离成逻辑请求消息和渲染请求消息；

逻辑消息执行模块，用于将所述逻辑请求消息发送至原生端执行；

渲染消息执行模块，用于将所述渲染请求消息发送至浏览器端执行，其中，所述原生端和所述浏览器端通过JsBridge通信进行数据交互。

第三方面，本发明实施例还提供了一种电子设备，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如本发明任一实施例所述的移动端H5页面生成方法。

第四方面，本发明实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如本发明任一实施例所述的移动端H5页面生成方法。

本发明实施例基于将移动端H5页面的逻辑层处理和渲染层处理拆分为双线程运行，在原生端执行H5页面运行时的逻辑请求消息，在浏览器端执行H5页面运行时的渲染请求消息。本发明实施例解决了H5页面加载生成时出现的白屏、操作卡顿、体验不流畅等问题。

附图说明

图1是本发明实施例一中的移动端H5页面生成方法的流程图；

图2是Vue3中响应式数据驱动的改造示意图；

图3是对响应式数据驱动事件进行响应改造的示意图；

图4是对H5资源包进行更新加载的机制；

图5是原生端JS引擎与浏览器端WebView通过JsBridge桥接通信的示意图；

图6是JsBridge通信逻辑原理示意图；

图7是H5页面的开发流程图；

图8是本发明实施例二中的移动端H5页面生成装置的结构示意图；

图9是本发明实施例三中的电子设备的结构示意图。

具体实施方式

下面结合附图和实施例对本发明作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本发明，而非对本发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本发明相关的部分而非全部结构。

实施例一

图1是本发明实施例一中的移动端H5页面生成方法的流程图，本实施例可适用于H5页面在移动端上开发的情况。该方法可以由移动端H5页面生成装置来执行，该装置可以采用软件和/或硬件的方式实现，并可配置在电子设备中，例如电子设备可以是后台服务器等具有通信和计算能力的设备。如图1所示，该方法具体包括：

步骤101、获取移动端H5页面的响应请求消息，将响应请求消息分离成逻辑请求消息和渲染请求消息。

其中，H5是HTM5的简称，HTML最新的修订版本，是一种超文本标记语言。现有的H5页面在生成时是先调用系统的浏览器内核，相当于是在网页中进行操作，较原生端页面生成稳定性稍差、速度较慢。优点在于可以跨平台，同时开发容易、效率高、方便调试。

具体的，现如今H5页面中JS应用越来越广泛，交互越来越复杂，将H5应用于移动端应用开发中，更是有非常多的JS脚本逻辑。而JS运行是单线程的，且垃圾回收机制处理尚不完善，因此在现有技术中当打开普通的H5页面，其JS脚本运行在Webview的内核浏览器中，由浏览器的JS引擎解析和执行的。浏览器在处理和显示H5网页时有两个重要的线程：1、GUI(Graphical User Interface，图形用户界面)渲染线程：主要负责解析样式文件(html/css)以及构建Dom(Document Object Model，文档对象模型)树，计算布局渲染界面等。2、JS引擎线程：处理JS脚本逻辑，如事件处理，网络请求，定时器触发等。

但是由于浏览器的GUI渲染线程和浏览器自身的JS引擎线程是冲突，不能同时执行，因此会造成JS引擎阻塞页面渲染，所以当在一个H5页面交互操作较长时间后，会出现卡顿甚至白屏的现象。

为了解决H5页面在生成时比原生端页面稳定性差的问题，在本发明实施例中，将H5页面生成的响应请求消息分为两个线程进行同时处理，即实现将H5页面的逻辑层和渲染层分开。具体的，将H5页面的响应请求消息划分为逻辑请求消息和渲染请求消息。其中，逻辑请求消息用于处理与渲染无关的数据响应类消息，渲染请求消息用于处理与页面渲染相关的消息。

步骤102、将逻辑请求消息发送至原生端执行。

其中，逻辑请求消息为JS脚本逻辑，将JS脚本逻辑放在H5页面所在的移动端应用原生端中独立的JS引擎来执行，Webview中的浏览器内核不用其来执行JS脚本逻辑。

步骤103、将渲染请求消息发送至浏览器端执行，其中，原生端和浏览器端通过JsBridge通信进行数据交互。

其中，渲染请求消息用于GUI渲染，Webview中的浏览器内核只用来根据渲染请求消息构建Dom树，计算布局渲染界面。从而将H5页面生成时的逻辑层与渲染层分开两个线程执行。

示例性的，iOS端采用iOS7后自带的JavaScriptCore引擎运行JS逻辑，采用同样自带WKWebView渲染界面，即将逻辑请求消息发送至JavaScriptCore引擎，将渲染请求消息发送至WKWebView。安卓端采用谷歌自家的V8引擎运行JS逻辑，采用安卓自带的WebView渲染界面，即将逻辑请求消息发送至V8引擎，将渲染请求消息发送至WebView。其中，JavaScriptCore引擎是独立的JavaScript运行引擎，可以高效执行JS脚本逻辑代码。WKWebview是加载H5的内置容器，调用浏览器内核来加载H5。

与此同时，创建适配三端的JsBridge通信，便于逻辑层与渲染层双线程通信，即用于原生端和浏览器端之间的数据交互。本发明实施例将运行时消耗较大的逻辑请求消息，如网络请求、数据驱动、事件响应由原生端的JS引擎中高效独立运行，完全不阻塞Webview渲染页面。其中，JsBridge是原生端和浏览器端之间通信的桥梁，是通过Webview暴露的方法，封装原生与H5相互调用方法、通信的接口合集。

本发明实施例基于将移动端H5页面的逻辑层处理和渲染层处理拆分为双线程运行，在原生端执行H5页面运行时的逻辑请求消息，在浏览器端执行H5页面运行时的渲染请求消息。本发明实施例解决了H5页面加载生成时出现的白屏、操作卡顿、体验不流畅等问题。

在一个可行的实施例中，移动端H5页面基于Vue3开发；

相应的，该方法还包括：

将Vue3中的响应式驱动业务和页面渲染业务拆分，在原生端运行Vue3的响应式驱动业务，并将渲染结果发送至浏览器端，由浏览器端执行Vue3的页面渲染业务。

其中，Vue3是前端响应式开源框架，在本发明实施例中，将Vue3技术应用于原生跨平台开发，使用Vue3的语法来快速实现移动端高性能H5页面的开发。同时为了解决H5页面生成卡顿的问题，采用将H5页面生成时的逻辑层和渲染层分离，因此需要将Vue3的响应式驱动和页面渲染进行拆分，以配合H5页面的双线程运行。响应式驱动即响应式数据驱动，页面数据的变化直接自动引起界面的变化。

将Vue3中的响应式驱动业务和页面渲染业务拆分，在Native端，即原生端运行Vue3，并将渲染结果传递给Webview，达到逻辑层与渲染层分离的目的。

在一个可行的实施例中，将Vue3中的响应式驱动业务和页面渲染业务拆分，包括：

调用Vue3中的createVNode方法创建VNode实例；

获取Vue3中的render函数与实例proxy对象，生成带有render函数的响应式实例；

将VNode实例的子对象转换为Dom描述字符串；

通过JsBridge通信获取Dom描述字符串，并根据Dom描述字符串生成实际渲染Dom，以根据实际渲染Dom渲染H5页面。

为了将Vue3中的响应式驱动业务和页面渲染业务拆分，需要重写改造Vue3的核心响应式数据驱动。Vue3中响应式数据驱动的改造示意图如图2所示，具体为：不调用createApp方法初始化Vue3应用实例；采用createVNode方法创建VNode实例vNodeInstance；获取render函数与实例proxy对象，生成带有render函数的响应式实例instance；将vNodeInstance实例的children对象通过patchJson转换为可以逻辑层与渲染层相互通信的Dom描述字符串jsonTree；通过JsBridge通信，获取到jsonTree,通过createDomTree方法生成实际的渲染Dom，渲染页面。

在一个可行的实施例中，将Vue3中的响应式驱动业务和页面渲染业务拆分，包括：

根据移动端H5页面的Vue单文件源码生成抽象语法树；

根据抽象语法树提取proxy方法；

将proxy方法合并至JsBridge通信中，以实现通过JsBridge通信在拆分后的响应式驱动业务和页面渲染业务间进行数据交互。

由于对Vue3响应式数据驱动的改造导致实例创建发生变化以及响应式数据驱动与页面渲染层的分离，使得渲染层对页面数据变更事件的触发及响应都失效了。因此为了保证H5页面在将渲染层和逻辑层进行双线程运行时，渲染层仍可以接收到事件处理消息，需要对响应式数据驱动事件进行响应改造，改造的示意图如图3所示，具体为：利用AST抽象语法树，获取移动端H5页面的Vue单文件源码，即App.vue文件中的proxy方法；并将该方法重新注入到JsBridge中。其中，proxy方法是Vue3中用于监控页面数据变动的方法。

在一个可行的实施例中，在将proxy方法合并至JsBridge通信中之后，方法还包括：

浏览器端通过JsBridge通信中的proxy方法获取数据变更信息；

根据数据变更信息响应式驱动虚拟Dom树变化；

基于Diff算法根据虚拟Dom树变化信息确定渲染Dom节点。

在对响应式数据区域事件进行响应改造后，数据变更响应式驱动虚拟Dom树变化，Diff算法能够精确判断变化点只渲染变化的Dom节点，避免了对Dom的频繁操作，有效提高渲染性能。Vue3的Diff算法通过对节点打标记patchFlag,分成了静态树和动态树，Diff算法只会去计算动态树，静态树本身不会变化，通过静态提升，避免的重复计算。其中，虚拟Dom就是把真实Dom转换为Javascript代码，是一种Dom节点的描述语言；真实Dom就是浏览器根据代码绘制界面，频繁修改会导致界面重绘，界面卡顿。

在一个可行的实施例中，在将Vue3中的响应式驱动业务和页面渲染业务拆分之前，还包括：

根据H5页面的Vue单文件源码生成抽象语法树；

根据抽象语法树获取template对象、script对象和css对象，以基于template对象、script对象和css对象将Vue3中的响应式驱动业务和页面渲染业务拆分。

在将Vue3中的响应式驱动业务和页面渲染业务拆分之前，需要将Vue单文件中与该业务相关的对象进行抽取。具体的，利用AST抽象语法树将Vue单文件源码转化为抽象语法树，以获取到Vue文件的template对象、script对象、css对象，便于后续逻辑层与渲染层分离。其中，template对象是指页面模板对象，script对象是指页面逻辑对象，css对象是指页面样式对象，将三部分从抽象语法树中进行分离，便于后续对H5页面执行渲染层和逻辑层分离时对template对象、script对象和css对象直接使用。

示例性的，生成渲染函数；提取script的AST，用于解析业务逻辑；编译提取css部分，使用样式编译模块生成css样式文件，用于后续开发服务器加载。

在一个可行的实施例中，该方法还包括：

移动端H5页面的资源包是预先下载在本地；其中，资源包至少包括逻辑文件和渲染文件，将逻辑文件放在原生端执行，渲染文件放在浏览器端执行。

本发明中，将H5页面的资源包预先下载到移动端应用本地沙盒，实现离线化，有效提高了页面加载和渲染效率；同时将资源本地化，把H5的本地JS文件放在Native原生端执行，Html渲染效果放置Webview浏览器端执行。也是拆分逻辑层与渲染层，双线程运行H5的实现基础。

可选的，对H5资源包进行更新加载的机制如图4所示，更新加载机制具体为：打开H5页面所在的移动端应用前，先判断移动端本地是否有H5页面的对应版本号，若没有则直接才能够线上下载最新版本并解压保存在本地；若有版本号，则发起网络请求线上最新版本号，将当前版本号与线上最新版本号进行比对，若是最新则直接加载本地资源包文件打开H5页面；若不是最新版本则下载最新版本的资源包，解压替换本地旧版本再加载打开。

在一个可行的实施例中，该方法还包括：

基于原生端和浏览器端的数据交互，将移动端H5页面中的目标功能生成目标原生模块；其中，目标功能包括如下至少一项：网络请求、本地存储、原生路由、原生导航栏、原生底部导航栏和下拉刷新。

由于在本发明实施例中，将H5页面的渲染层和逻辑层通过双线程进行运行，JS运行在了原生端的JS引擎，实现了原生端和浏览器端之间的数据交互通信，使得原本H5同原生相互交互通信、H5调用原生能力变得更加容易。因此在本发明实施例中为了提高H5页面的执行效率和扩展能力，将网络请求、本地存储、原生路由、原生导航栏、原生底部导航栏和下拉刷新功能实现了原生模块或组件，以进一步提高H5页面的生成效率。

在一个可行的实施例中，该方法还包括：

原生端根据逻辑请求消息生成数据响应，并根据数据响应生成虚拟Dom节点；

根据虚拟Dom节点生成Dom描述字符串；其中，Dom描述字符串为json字符串；

浏览器端通过JsBridge通信获取Dom描述字符串。

在本发明实施例中，由于原生端的JS引擎与浏览器端的WebView在两个线程运行，无法像都在浏览器内核中一样可以直接通信。但是原生的JS引擎与Webview间可以基于JsBridge通信传递字符串相互通信，这也就是本发明实施例中改造Vue3响应式数据区域的原因。原生端JS引擎与浏览器端WebView通过JsBridge桥接通信的示意图如图5所示。具体的，将数据响应生成的虚拟Dom转为Dom的json描述字符串，由JS引擎传递给Webview，从而达到在分离线程运行同时能触发渲染，响应事件。

在一个可行的实施例中，该方法还包括：

在原生端的JavaScriptCore中运行Vue3的Js逻辑，通过JsBridge通信调用原生端中方法，再通过原生端触发浏览器端调用Js方法，以实现原生端和浏览器端通过JsBridge通信进行数据交互。

JsBridge通信逻辑原理示意图如图6所示，具体为：在Native端的JavaScriptCore，即原生端的JS引擎中运行的Vue3的Js逻辑，通过JsBridge调用Native中方法，再通过Native触发Webview调用Js方法。示例性的，在iOS中的实现过程如下所示：1、在JavaScriptCore调用postPatch方法实现JavaScriptCore与Native通信；在Native中通过Webview的evaluateJavaScript方法调用H5中方法实现Webview与H5通信。2、相反在H5中通过调用Webview中定义的原生接口，Native通过JsContext的evaluateScript方法来调用原生JS引擎中定义的Js方法，从而实现原生端和浏览器端通过JsBridge通信进行数据交互。

在一个可行的实施例中，逻辑请求消息至少包括如下一项：网络请求消息、交互操作消息以及数据响应消息。

由于逻辑请求消息是由原生端进行执行，因此将在H5页面运行时消耗较大的消息由原生端执行，缓解浏览器端对页面渲染的压力。运行时消耗较大的消息包括但不限于网络请求消息、交互操作消息以及数据响应消息。

在一个可行的实施例中，该方法还包括在浏览器端进行资源池优化。

具体的，对Webview浏览器端进行资源池优化，有效缩短初始化时间，实现H5页面秒开。示例性的，在Webview预先打开预设数量个H5页面在资源池中等待响应，若接收到页面的响应消息时，直接从资源池中调用即可，不必从头打开；可选的，当资源池中预先加载的H5页面小于预设数量时，则执行资源池优化操作，即重新预加载H5页面放置在资源池中。

可选的，所述方法还包括将H5页面开发方案集成为SDK(Software DevelopmentKit，软件开发工具包)。具体的，将代码整合为易于多端集成的SDK方式开发和迭代。其中iOS采用framework静态库方式封装，安卓采用打包为aar方式封装。通过集成本发明SDK，可以快速让移动端应用开发H5页面时拥有快速迭代，且体验流畅，媲美原生的跨平台动态应用开发体验，提高开发完成的H5页面生成质量。SDK是将功能模块所有相关代码封装成易于集成的代码包，可以方便拥有和调用本模块的相关功能，与主应用业务相互独立。

示例性的，LoftAppSDK为集成的SDK名称，iOS集成SDK方法：1、将LoftAppSDK.framework加入工程；2、在AppDelegate中引用；通过[[LAWebViewHandler alloc]init]方法初始化Webview资源池；3、新建一个LAWebViewController；引入#import头文件LAWebViewController继承LAViewController；4、LAWebViewController已继承并拥有SDK相关功能，可以使用[self loadH5AppId:@”appid”]即可打开下载相应H5。

Android集成SDK方法：1、将loftappSDK.aar文件拷贝到安卓工程,放在app目录下新建libs文件夹；2、在app的build.gradle文件中新增依赖目录配置；3、dependencies中引入compile(name:'loftappSDK',ext:'aar')；4、新建LAWebViewActivity及layout文件，继承com.ccb.loftappsdk.loftapp.LAWebViewActivity；5、使用Intent设定打开的H5AppId，并跳转。

可选的，所述方法还包括在H5页面开发中利用浏览器ES Module加载模块。

具体的：在现代浏览器中(如Chrome，Safari)都已支持ES6规范的模块化方案ESModule，使得在浏览器中运行的Html文件，可直接import以type＝“module”标记的文件引入执行。同时，通过Koa启动web服务器，浏览器运行“http://localhost:3000/index.html”打开开发预览页面。在Koa服务器中，通过自定义中间件(middleware)，拦截.vue、.js、.css结尾的文件，获取文件内容，并做相应解析处理再返回给浏览器。其中，Koa是一个基于Node.js的web开发服务器，可以加载html、js、css文件运行在浏览器。H5页面的开发流程图如图7所示。

本发明实施例为了解决浏览器端Webview加载H5时白屏、操作卡顿、体验不流畅等问题，从实现离线H5开发框架及H5开发工具、重写Vue3响应式数据驱动与虚拟Dom的Diff算法，iOS端及安卓端实现离线H5资源包更新与加载、拆分逻辑层与渲染层双线程运行H5多方面提供了一套全流程多终端的H5开发模式优化解决方案；并将方案整合为iOS端集成SDK、安卓端集成SDK及H5开发套件，便于功能快速集成应用。进而实现原生客户端开发中，一套H5代码多终端、跨平台、高性能运行，即保持H5的动态更新能力，也拥有媲美原生的流程体验，极大地提升了客户端开发迭代效率与用户操作体验。

在本发明实施例中，以兼容Vue3的前端语法，在客户端实现Vue3的逻辑层在原生独立JS引擎运行，渲染层在Webview中运行，将Vue3技术应用于原生跨平台开发，开发模式面向未来，前端采用完全兼容Vue3的语法开发，无额外学习成本。资源包提前下载预置，并拆分基础包和业务包，有效解决加载带来白屏问题；其中，基础包用于实现通用功能，业务包用于实现页面专属业务功能。且可以实现iOS、安卓和Web三端跨平台复用，一套代码，多端运行，减少开发成本，开发效率高。在页面生成时分离逻辑层与渲染层，将网络请求，交互操作，数据响应等处理逻辑在原生自定义JS引擎执行，Webview只负责页面渲染，有效解决JS单线程带来的卡顿问题；重写Vue3框架，使其能在独立JS引擎运行，分离数据响应与渲染逻辑。提供H5开发套件，开发预览方便，可一键打包为移动端应用的资源包，可以打包为web工程。整体代码整合为SDK，方便iOS和安卓客户端快速集成，独立迭代升级。对Webview进行资源池优化，有效缩短初始化时间，实现H5页面秒开。采用rem适配布局，支持高清设备。前端支持TypeScript类型推断。支持原生组件。

实施例二

图8是本发明实施例二中的移动端H5页面生成装置的结构示意图，本实施例可适用于H5页面在移动端上开发的情况。如图8所示，该装置包括：

消息分离模块810，用于获取移动端H5页面的响应请求消息，将所述响应请求消息分离成逻辑请求消息和渲染请求消息；

逻辑消息执行模块820，用于将所述逻辑请求消息发送至原生端执行；

渲染消息执行模块830，用于将所述渲染请求消息发送至浏览器端执行，其中，所述原生端和所述浏览器端通过JsBridge通信进行数据交互。

本发明实施例基于将移动端H5页面的逻辑层处理和渲染层处理拆分为双线程运行，在原生端执行H5页面运行时的逻辑请求消息，在浏览器端执行H5页面运行时的渲染请求消息。本发明实施例解决了H5页面加载生成时出现的白屏、操作卡顿、体验不流畅等问题。

可选的，所述移动端H5页面基于Vue3开发；

相应的，所述装置还包括Vue3重写模块：

将Vue3中的响应式驱动业务和页面渲染业务拆分，在原生端运行Vue3的响应式驱动业务，并将渲染结果发送至浏览器端，由浏览器端执行Vue3的页面渲染业务。

可选的，Vue3重写模块，具体用于：

调用Vue3中的createVNode方法创建VNode实例；

获取Vue3中的render函数与实例proxy对象，生成带有render函数的响应式实例；

将所述VNode实例的子对象转换为Dom描述字符串；

通过JsBridge通信获取所述Dom描述字符串，并根据所述Dom描述字符串生成实际渲染Dom，以根据所述实际渲染Dom渲染H5页面。

可选的，Vue3重写模块，具体用于：

根据移动端H5页面的Vue单文件源码生成抽象语法树；

根据所述抽象语法树提取proxy方法；

将所述proxy方法合并至JsBridge通信中，以实现通过JsBridge通信在拆分后的响应式驱动业务和页面渲染业务间进行数据交互。

可选的，在Vue3重写模块中将所述proxy方法合并至JsBridge通信中之后，该模块之后还包括节点渲染模块：

浏览器端通过JsBridge通信中的proxy方法获取数据变更信息；

根据数据变更信息响应式驱动虚拟Dom树变化；

基于Diff算法根据虚拟Dom树变化信息确定渲染Dom节点。

可选的，在Vue3重写模块将Vue3中的响应式驱动业务和页面渲染业务拆分之前，所述装置还包括Vue单文件源码解析模块，具体用于：

根据H5页面的Vue单文件源码生成抽象语法树；

根据所述抽象语法树获取template对象、script对象和css对象，以基于所述template对象、script对象和css对象将Vue3中的响应式驱动业务和页面渲染业务拆分。

可选的，所述装置还包括资源包设置模块，用于：

所述移动端H5页面的资源包是预先下载在本地；其中，所述资源包至少包括逻辑文件和渲染文件，将所述逻辑文件放在原生端执行，所述渲染文件放在浏览器端执行。

可选的，所述装置还包括目标功能原生化模块，用于：

基于所述原生端和所述浏览器端的数据交互，将所述移动端H5页面中的目标功能生成目标原生模块；其中，所述目标功能包括如下至少一项：网络请求、本地存储、原生路由、原生导航栏、原生底部导航栏和下拉刷新。

可选的，所述装置还包括渲染数据传输模块，用于：

所述原生端根据所述逻辑请求消息生成数据响应，并根据所述数据响应生成虚拟Dom节点；

根据所述虚拟Dom节点生成Dom描述字符串；其中，所述Dom描述字符串为json字符串；

所述浏览器端通过JsBridge通信获取所述Dom描述字符串。

可选的，所述装置还包括JsBridge通信实现模块，用于：

在原生端的JavaScriptCore中运行Vue3的Js逻辑，通过JsBridge通信调用原生端中方法，再通过原生端触发浏览器端调用Js方法，以实现所述原生端和所述浏览器端通过JsBridge通信进行数据交互。

可选的，所述逻辑请求消息至少包括如下一项：网络请求消息、交互操作消息以及数据响应消息。

可选的，所述装置还包括资源池优化模块，用于在浏览器端进行资源池优化。

本发明实施例所提供的移动端H5页面生成装置可执行本发明任意实施例所提供的移动端H5页面生成方法，具备执行移动端H5页面生成方法相应的功能模块和有益效果。

实施例三

图9是本发明实施例三提供的一种电子设备的结构示意图。图9示出了适于用来实现本发明实施方式的示例性电子设备12的框图。图9显示的电子设备12仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图9所示，电子设备12以通用计算设备的形式表现。电子设备12的组件可以包括但不限于：一个或者多个处理器或者处理单元16，系统存储装置28，连接不同系统组件(包括系统存储装置28和处理单元16)的总线18。

总线18表示几类总线结构中的一种或多种，包括存储装置总线或者存储装置控制器，外围总线，图形加速端口，处理器或者使用多种总线结构中的任意总线结构的局域总线。举例来说，这些体系结构包括但不限于工业标准体系结构(ISA)总线，微通道体系结构(MAC)总线，增强型ISA总线、视频电子标准协会(VESA)局域总线以及外围组件互连(PCI)总线。

电子设备12典型地包括多种计算机系统可读介质。这些介质可以是任何能够被电子设备12访问的可用介质，包括易失性和非易失性介质，可移动的和不可移动的介质。

系统存储装置28可以包括易失性存储装置形式的计算机系统可读介质，例如随机存取存储装置(RAM)30和/或高速缓存存储装置32。电子设备12可以进一步包括其它可移动/不可移动的、易失性/非易失性计算机系统存储介质。仅作为举例，存储系统34可以用于读写不可移动的、非易失性磁介质(图9未显示，通常称为“硬盘驱动器”)。尽管图9中未示出，可以提供用于对可移动非易失性磁盘(例如“软盘”)读写的磁盘驱动器，以及对可移动非易失性光盘(例如CD-ROM,DVD-ROM或者其它光介质)读写的光盘驱动器。在这些情况下，每个驱动器可以通过一个或者多个数据介质接口与总线18相连。存储装置28可以包括至少一个程序产品，该程序产品具有一组(例如至少一个)程序模块，这些程序模块被配置以执行本发明各实施例的功能。

具有一组(至少一个)程序模块42的程序/实用工具40，可以存储在例如存储装置28中，这样的程序模块42包括但不限于操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。程序模块42通常执行本发明所描述的实施例中的功能和/或方法。

电子设备12也可以与一个或多个外部设备14(例如键盘、指向设备、显示器24等)通信，还可与一个或者多个使得用户能与该设备12交互的设备通信，和/或与使得该设备12能与一个或多个其它计算设备进行通信的任何设备(例如网卡，调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口22进行。并且，电子设备12还可以通过网络适配器20与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图9所示，网络适配器20通过总线18与电子设备12的其它模块通信。应当明白，尽管图9中未示出，可以结合电子设备12使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。

处理单元16通过运行存储在系统存储装置28中的程序，从而执行各种功能应用以及数据处理，例如实现本发明实施例所提供的移动端H5页面生成方法，包括：

获取移动端H5页面的响应请求消息，将所述响应请求消息分离成逻辑请求消息和渲染请求消息；

将所述逻辑请求消息发送至原生端执行；

将所述渲染请求消息发送至浏览器端执行，其中，所述原生端和所述浏览器端通过JsBridge通信进行数据交互。

实施例四

本发明实施例四还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如本发明实施例所提供的移动端H5页面生成方法，包括：

获取移动端H5页面的响应请求消息，将所述响应请求消息分离成逻辑请求消息和渲染请求消息；

将所述逻辑请求消息发送至原生端执行；

将所述渲染请求消息发送至浏览器端执行，其中，所述原生端和所述浏览器端通过JsBridge通信进行数据交互。

本发明实施例的计算机存储介质，可以采用一个或多个计算机可读的介质的任意组合。计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质。计算机可读存储介质例如可以是但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本文件中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。

计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、电线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言或其组合来编写用于执行本发明操作的计算机程序代码，所述程序设计语言包括面向对象的程序设计语言诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言诸如”C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络包括局域网(LAN)或广域网(WAN)连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

注意，上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解，本发明不限于这里所述的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此，虽然通过以上实施例对本发明进行了较为详细的说明，但是本发明不仅仅限于以上实施例，在不脱离本发明构思的情况下，还可以包括更多其他等效实施例，而本发明的范围由所附的权利要求范围决定。