CN113010170A

CN113010170A - 一种基于Vue3组件的页面渲染方法、装置、介质及电子设备

Info

Publication number: CN113010170A
Application number: CN202110352027.7A
Authority: CN
Inventors: 杨颖凡; 邹伟力; 黄日升
Original assignee: China Construction Bank Corp
Current assignee: China Construction Bank Corp
Priority date: 2021-03-31
Filing date: 2021-03-31
Publication date: 2021-06-22

Abstract

本申请实施例公开了一种基于Vue3组件的页面渲染方法、装置、介质及电子设备。本申请实施例涉及移动互联技术领域。其中，方法包括：创建虚拟标签对象；其中，所述虚拟标签包括标签类型、标签名称、标签属性、标签内容中的至少一种，且所述虚拟标签用于描述文档对象模型；实例化Webworker对象，确定运行Vue3组件的独立线程；实例化虚拟标签，并采用预先定义的信息传递函数，将所述实例化虚拟标签传递至浏览渲染线程，以进行页面渲染。执行本方案，可以实现采用多线程的方式进行页面渲染，从而可以提高移动端的运行性能的稳定性。

Description

一种基于Vue3组件的页面渲染方法、装置、介质及电子设备

技术领域

本申请实施例涉及移动互联技术领域，尤其涉及一种基于Vue3组件的页面渲染方法、装置、介质及电子设备。

背景技术

随着互联网信息技术的飞速发展，移动端设备的日益普及，为了提高移动端开发与迭代的高效性，以Html5为代表的移动端混合开发技术已应用十分广泛。但是随着产品设计升级，以及用户对体验要求越来越高，传统的Web开发技术在面对复杂、频繁的页面渲染需求时往往响应速度较慢，例如会出现操作卡顿、体验不流畅以及加载时间长等问题。以浏览器的前端页面渲染为例，其渲染过程包括解析文档对象模型(Document Object Model，简称Dom)，执行脚本，最后绘制界面，如果用户操作频繁，则需要频繁的执行渲染过程，造成操作卡顿等问题。因此，如何能够提高页面渲染的顺滑程度，降低资源消耗，提高响应速度成为影响前端页面开发的技术瓶颈。

发明内容

本申请实施例提供一种基于Vue3组件的页面渲染方法、装置、介质及电子设备，可以实现采用多线程的方式进行页面渲染，从而可以提高移动端的运行性能的稳定性。

第一方面，本申请实施例提供了一种基于Vue3组件的页面渲染方法，所述方法包括：

创建虚拟标签对象；其中，所述虚拟标签包括标签类型、标签名称、标签属性、标签内容中的至少一种，且所述虚拟标签用于描述文档对象模型；

实例化Webworker对象，确定运行Vue3组件的独立线程；

实例化虚拟标签，并采用预先定义的信息传递函数，将所述实例化虚拟标签传递至浏览渲染线程，以进行页面渲染。

进一步的，所述预先定义的信息传递函数的定义过程包括：

根据Vue3组件中的Custom Renderer API介绍，确定Custom Renderer API的目标覆盖方法；

对所述目标覆盖方法进行覆盖处理，得到Render函数，即信息传递函数。

进一步的，对所述目标覆盖方法进行覆盖处理，得到Render函数，包括：

对所述目标覆盖方法进行重新定义，得到目标覆盖方法的改写方法；其中，所述目标覆盖方法包括：insert，remove，createElement，createText，createComment，setText，setElementText，parentNode，nextSibling，querySelector以及setScopeId；

将所述改写方法替换掉所述目标覆盖方法，得到改写后的Render函数。

进一步的，采用预先定义的信息传递函数，将所述实例化虚拟标签传递至浏览渲染线程，包括：

采用Render函数将实例化虚拟标签按照JSON字符串的形式传递至浏览渲染线程，供所述浏览渲染线程根据所述实例化虚拟标签确定文档对象模型，并根据所述文档对象模型进行页面渲染。

进一步的，在将所述实例化虚拟标签传递至浏览渲染线程，以进行页面渲染之后，所述方法还包括：

采用所述独立线程的postMessage监听方法对页面渲染结果进行监听。

若检测到交互触发事件，则通过所述浏览渲染线程向所述独立线程发出触发事件JSON字符串；

通过读取触发事件JSON字符串的事件ID来确定事件内容；

根据所述事件内容确定响应数据，并将所述响应数据实例化为事件响应虚拟标签，并向所述浏览渲染线程发出事件响应虚拟标签，供所述页面进行交互触发事件的响应。

进一步的，所述Vue3组件，包括：

基础组件，并具体包括：布局Layout、按钮Button、导航NavBar以及容器Page；

交互组件，并具体包括：加载框Loading、弹出框Modal、消息提示Toast、通知Notification以及动作面板ActionSheet；

表单组件，并具体包括：输入框Input、单选框Radio、多选框CheckBox以及下拉选择Select；

展示组件，并具体包括：表格Table、列表List、下拉刷新Refresh、滑动Swiper以及选项卡Tab。

进一步的，所述Vue3组件，还包括服务组件，所述服务组件具体包括：

网络Network，用于在Vue3组件工作过程中访问后端接口；

缓存Storage，用于使用本地indexedDB缓存数据；

图片加载ImageLoad，用于将图片转换为ArrayBuffer格式，以在所述独立线程下载；

格式转换Format，用于提供时间日期或者正则校验工具函数。

进一步的，所述方法还包括：

封装indexedDB；

采用postMessage监听方法获取浏览渲染线程的indexedDB。

第二方面，本申请实施例提供了一种基于Vue3组件的页面渲染装置，所述装置包括：

虚拟标签对象创建模块，用于创建虚拟标签对象；其中，所述虚拟标签包括标签类型、标签名称、标签属性、标签内容中的至少一种，且所述虚拟标签用于描述文档对象模型；

独立线程构建模块，用于实例化Webworker对象，确定运行Vue3组件的独立线程；

页面渲染模块，用于实例化虚拟标签，并采用预先定义的信息传递函数，将所述实例化虚拟标签传递至浏览渲染线程，以进行页面渲染。

第三方面，本申请实施例提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如本申请实施例所述的基于Vue3组件的页面渲染方法。

第四方面，本申请实施例提供了一种电子设备，包括存储器，处理器及存储在存储器上并可在处理器运行的计算机程序，所述处理器执行所述计算机程序时实现如本申请实施例所述的基于Vue3组件的页面渲染方法。

本申请实施例所提供的技术方案，创建虚拟标签对象；其中，所述虚拟标签包括标签类型、标签名称、标签属性、标签内容中的至少一种，且所述虚拟标签用于描述文档对象模型；实例化Webworker对象，确定运行Vue3组件的独立线程；实例化虚拟标签，并采用预先定义的信息传递函数，将所述实例化虚拟标签传递至浏览渲染线程，以进行页面渲染。通过执行本技术方案，可以实现采用多线程的方式进行页面渲染，从而可以提高移动端的运行性能的稳定性。

附图说明

图1是本申请实施例一提供的基于Vue3组件的页面渲染方法的流程图；

图2是本申请实施例一提供的虚拟标签和真实标签的对比示意图；

图3是本申请实施例一提供的独立线程与浏览渲染线程交互的原理示意图；

图4是本申请实施例二提供的Vue3组件库的构成示意图；

图5是本申请实施例三提供的基于Vue3组件的页面渲染装置的结构示意图；

图6是本申请实施例五提供的一种电子设备的结构示意图。

具体实施方式

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

在更加详细地讨论示例性实施例之前应当提到的是，一些示例性实施例被描述成作为流程图描绘的处理或方法。虽然流程图将各步骤描述成顺序的处理，但是其中的许多步骤可以被并行地、并发地或者同时实施。此外，各步骤的顺序可以被重新安排。当其操作完成时所述处理可以被终止，但是还可以具有未包括在附图中的附加步骤。所述处理可以对应于方法、函数、规程、子例程、子程序等等。

针对浏览器的界面重绘，由于存在此最耗资源的环节，从而造成了操作卡顿、体验不流畅等问题，此类现象在弱网环境或低端机表现尤为明显。在传统的移动端H5开发中，以虚拟Dom替代对真实Dom的频繁操作，成为解决上述问题的有效方案。虚拟Dom成为真实Dom的一种”描述语言“，用户操作首先改变了虚拟Dom，再通过Diff算法，比对交互前后的虚拟Dom节点变更，将有效的变更再应用到真实Dom，减少了频繁的Dom操作，从而提高渲染效率。此类技术以Vue/React等为代表的前端框架逐渐成为Web开发主流方向；Vue等框架以优异、高效的性能使得开发者开发复杂、交互丰富的Webapp变得方便且大幅提升了用户体验。

但是移动App的Webview在执行渲染H5应用时，都是在浏览器内核中以单线程运行加载资源、执行脚本以及渲染Dom等过程，当资源过多、脚本复杂的情况下，往往会有加载白屏，操作卡顿的情况。

为解决以上问题，本申请实施例利用WebWorker技术，重写Vue3的render函数，将应用的脚本运行在独立的线程环境，与浏览器渲染线程隔离分开，使得脚本及复杂的Diff算法在独立线程更高效执行；同时本发明聚焦解决网络、加载、缓存等耗性能场景，开发了基于Vue3的组件库，便于提升开发质量、提高产品性能、提升用户体验。

实施例一

图1是本申请实施例一提供的基于Vue3组件的页面渲染方法的流程图，本实施例可适用于页面渲染的情况，该方法可以由本申请实施例所提供的基于Vue3组件的页面渲染装置执行，该装置可以由软件和/或硬件的方式来实现，并可集成于电子设备中。

如图1所示，所述基于Vue3组件的页面渲染方法包括：

S110、创建虚拟标签对象；其中，所述虚拟标签包括标签类型、标签名称、标签属性、标签内容中的至少一种，且所述虚拟标签用于描述文档对象模型。

其中，由于用户所浏览的页面网页、H5页面都是由在document环境下的，而在document环境对页面进行渲染就需要使用文档对象模型(Document Object Model，简称DOM)。而如果在另一个线程中进行页面中各个组件信息的采集，就需要创建虚拟标签对象，这个对象可以是JSON对象，可以用来进行将每个DOM标签都按规则描述出来，就可以实现真实DOM与虚拟DOM的相互转换。

因此，虚拟标签包括标签类型、标签名称、标签属性、标签内容中的至少一种。具体可以根据真实DOM的数据需求来确定，另外，所述虚拟标签用于描述文档对象模型。可以理解的，由于需要对页面进行准确的展示，因此虚拟标签应该能够对文档对象模型(即DOM)进行描述，以使实际使用的过程中，可以基于该描述能够确定真实DOM，并进行准确的渲染。

图2是本申请实施例一提供的虚拟标签和真实标签的对比示意图。如图2所示，真实的DOM结构如下：

</div>；

而虚拟的DOM结构基于JSON描述，如下所示：

所以虚拟标签可以包括有标签类型、标签名称、子标签、标签属性以及事件等等。

S120、实例化Webworker对象，确定运行Vue3组件的独立线程。

其中，实例化Webworker对象，即生成一个Webworker线程，具体的，只需要newWorker一个对象即可。

const worker＝new Worker('worker.js')；

此独立线程可以是与浏览渲染线程相互分离的，可以理解为并行的两个线程。每个线程只要负责自己内部的业务的处理，并且在线程之间完成数据的传递，就能够并行来共同实现对页面的渲染。

S130、实例化虚拟标签，并采用预先定义的信息传递函数，将所述实例化虚拟标签传递至浏览渲染线程，以进行页面渲染。

其中，实例化虚拟标签即为可以得到具体的虚拟标签，并且基于信息传递函数，将虚拟标签传递至浏览渲染线程，以供浏览渲染线程进行页面渲染。

本方案中，由于采用的是双线程进行前端页面的渲染，因此需要在两个线程之间设置传递函数。而如果采用Vue3的渲染函数，将无法实现在两个线程之间进行信息的传递，因此，需要对其进行改写。

本方案中，可选的，所述预先定义的信息传递函数的定义过程包括：

按照Vue3的Custom Renderer API介绍能够实现自定义渲染。要实现自定义渲染函数需要自定义实现并覆盖掉以下11个方法：

insert；

remove；

createElement；

createText；

createComment；

setText；

setElementText；

parentNode；

nextSibling；

querySelector；

setScopeId。

具体的，相关代码如下：

通过前面的自定义render函数，可以基于JSON的DOM描述能够转换为真实DOM，那将Vue3的运行渲染，自定义为运行渲染基于JSON的DOM Tree。

在自定义render函数之后，可以导出该render函数，具体的，通过如下代码实现：

到此为止，前面解决了传递内容的问题，以及解决了采用什么样的传递函数的问题，接下来需要确定的是以哪一种方式进行传递。

本方案中，具体的，采用预先定义的信息传递函数，将所述实例化虚拟标签传递至浏览渲染线程，包括：

本方案采用的是通过JSON字符串来进行通信，即独立线程可以将描述文档对象模型的信息通过JSON字符串的形式来传递给浏览渲染线程，浏览渲染线程也可以基于JSON字符串的解析规则对渲染需求进行解析，从而可以实现两个线程之间的数据传递。

本方案中，可以运行在非document环境下的虚拟标签。

在此基础上，可以实现两个线程之间的数据传递。另外，在具有前面的开发的基础之上，可以直接生成一个Webworker线程，进而达到针对浏览渲染线程，采用单独的独立线程进行需求解析，从而降低移动端在页面渲染时带来的资源消耗，确保了移动端的显示效果。

本实施例提供的技术方案，创建虚拟标签对象；其中，所述虚拟标签包括标签类型、标签名称、标签属性、标签内容中的至少一种，且所述虚拟标签用于描述文档对象模型；实例化Webworker对象，确定运行Vue3组件的独立线程；实例化虚拟标签，并采用预先定义的信息传递函数，将所述实例化虚拟标签传递至浏览渲染线程，以进行页面渲染。通过执行本技术方案，可以实现采用多线程的方式进行页面渲染，从而可以提高移动端的运行性能的稳定性。

在一个可行的实施例中，可选的，在将所述实例化虚拟标签传递至浏览渲染线程，以进行页面渲染之后，所述方法还包括：

通过上述开发，本方案实现了将Vue3运行在Worker中，并生成虚拟DOM的描述对象。接下来就是实现WebWorker线程与浏览器渲染线程的通信。将JSON Tree传递到window/document环境下，进行真实渲染。通过Worker的postMessage方法，即监听方法，即可实现，代码如下：

//worker.js

postMessage({type:'render',payload:root})

//index.js

worker.addEventListener('message',function(event){

document.querySelector('#app').innerHTML＝resolve(event.data.payload)

})；

图3是本申请实施例一提供的独立线程与浏览渲染线程交互的原理示意图，如图3所示，将虚拟的JOSN Tree渲染到浏览器线程

通过两个线程间通信，已经将虚拟的JOSN Tree传值到window环境下，这时我们需要将JSON解析为真实的DOM Tree并实现界面渲染，代码实现如下：

本方案通过这样的设置，在自定义Vue3渲染函数，使Vue3能运行在非Dom环境的独立JS线程中。

通过读取触发事件JSON字符串的事件ID来确定事件内容；

本方案可以实现事件传递，在绝大多数应用中，都会涉及到事件和用户交互(如点击按钮，网络请求等)。由于当前的渲染环境使用了双线程，彼此隔离；这样用户的交互操作就无法直接应用到WebWorker线程中，来触发Vue3响应变更。而WebWorker又无法直接传递函数事件，这里可以通过在JSON Tree上记录事件ID，通过事件ID来寻址执行事件。

通过在JSON Tree添加props事件属性，event.name获取到事件ID，triggerEvent方法执行事件。

本方案通过这样的设置，可以使用WebWorker独立线程运行Vue3组件，并实现与浏览器的渲染线程相互通信，完成事件交互。

实施例二

本实施例在上述实施例的基础上，提供了Vue3组件库的基本构成。

图4是本申请实施例二提供的Vue3组件库的构成示意图。如图4所示，本发明提供的Vue3组件库，共开发了18个组件及4个服务模块、涵盖基础组件4个、交互组件5个、表单组件4个、展示组件4个、功能服务4个。

组件库采用TypeScript语言开发，拥有友好的编辑器类型提示，18个组件基本满足了日常开发所需。组件库包括：

基础组件：布局Layout、按钮Button、导航NavBar、容器Page；

交互组件：加载框Loading、弹出框Modal、消息提示Toast、通知Notification、动作面板ActionSheet；

表单组件：输入框Input、单选框Radio、多选框CheckBox、下拉选择Select；

展示组件：表格Table、列表List、下拉刷新Refresh、滑动Swiper、选项卡Tab。

此处以按钮Button为示例，其实现的代码逻辑如下：

在上述技术方案的基础上，可选的，所述Vue3组件，还包括服务组件，所述服务组件具体包括：

网络Network，用于在Vue3组件工作过程中访问后端接口；

缓存Storage，用于使用本地indexedDB缓存数据；

格式转换Format，用于提供时间日期或者正则校验工具函数。

本方案中，可选的，所述方法还包括：

封装indexedDB；

采用postMessage监听方法获取浏览渲染线程的indexedDB。

以缓存Storage为示例进行说明，其可以涵盖如下功能：

在移动App开发中，有效的缓存，将数据保存到客户端能明显加快页面渲染时间、提高响应效率、更能减少对服务端的压力。但现有的浏览器数据储存方案，都不适合储存大量数据，原因是：

Cookie的大小不超过4KB，且每次请求都会发送回服务器；

LocalStorage在2.5MB到10MB之间(各家浏览器不同)，而且不提供搜索功能，不能建立自定义的索引。

所以，这里封装集成了indexedDB本地数据库，用来解决上述问题。使得本地存储基本不受大小限制，且能够快速查询。从而大大提高界面渲染效率。

但需要注意的是，本发明核心是在Worker线程中运行的主逻辑，但indexedDB对象又只是在window下的线程，也就是说Worker中是没办法直接操作indexDB的。所以这里同样要使用postMessage和对message的监听来实现通信，通过桥接来获取另外一个线程的本地数据。以下核心代码是对indexedDB操作的封装以及转换为Promise的双线程通信实现。

封装indexedDB的操作如下：

WebWorker线程获取另一线程的indexedDB实现封装，操作如下：

本方案基于Vue3的开发组件库及功能模块，并且工程统一将运行环境、底层基础框架、组件及模块源码、开发调试、示例代码、单元测试等都集成到一个工程里，开发迭代维护方便。

通过执行本方案，可以使用应用广泛最新的前端框架Vue3开发的丰富的组件，使得开发规范统一，提高效率。聚焦应用体验中耗时、耗系统资源的场景开发的功能服务，整合起来Vue3开发框架，高效运行，开箱即用，能极大提高开发效率和开发质量，优化产品体验。使用TypeScript编写，支持类型推导及编辑器友好提示。使用Parcel构建工程，支持WebWorker、Vue3，灵活开发，一键打包。

此处需要声明的是，目前虽然有采用Vue2实现页面渲染的方法，但是两者仍然存在很大差别。具体的，应用广泛的优秀组件库Element-UI，是基于Vue2框架开发的组件库，拥有丰富的基础组件及模块功能，大大地提高了开发效率和开发质量。但其与本发明从底层框架及实现方法都有本质的区别，本发明是利用WebWorker技术将业务执行与渲染分开两个线程执行，这个是Element-UI不具备的；同时本发明是基于Vue3的开发组件库，实现方法、使用方法、性能等都不相同。

Vue3是完全重写、实现原理完全不同的区别于Vue2的框架。Vue3利用JavaScript的新API：Proxy来实现监听响应式变化，Vue2采用Object.defineProperty实现数据响应式监听。但defineProperty无法检测到对象属性的增加或删除，同时defineProperty也无法监听到数组的变化；而Proxy能有效解决以上问题。

上面提到Vue等框架都是先得到虚拟Dom，通过Diff算法找到变更节点，再只渲染更新对应节点来实现性能的提升。但Vue2是对虚拟Dom的全遍历，Vue3提出了动静态节点的概念，静态节点会静态提升，每次更新只会遍历动态节点，从而提高效率。

目前对WebWorker技术的应用仅仅是功能模块上的使用优化，本发明是将WebWorker和Vue3框架组件库结合起来的、开箱即用的可快速实现应用工程化的解决方案。

实施例三

图5是本申请实施例三提供的基于Vue3组件的页面渲染装置的结构示意图。如图5所示，基于Vue3组件的页面渲染装置包括：

虚拟标签对象创建模块510，用于创建虚拟标签对象；其中，所述虚拟标签包括标签类型、标签名称、标签属性、标签内容中的至少一种，且所述虚拟标签用于描述文档对象模型；

独立线程构建模块520，用于实例化Webworker对象，确定运行Vue3组件的独立线程；

页面渲染模块530，用于实例化虚拟标签，并采用预先定义的信息传递函数，将所述实例化虚拟标签传递至浏览渲染线程，以进行页面渲染。

上述产品可执行本申请实施例所提供的方法，具备执行方法相应的功能模块和有益效果。

实施例四

本申请实施例四还提供一种包含计算机可执行指令的存储介质，所述计算机可执行指令在由计算机处理器执行时用于执行一种基于Vue3组件的页面渲染方法，该方法包括：

实例化Webworker对象，确定运行Vue3组件的独立线程；

存储介质是指任何的各种类型的存储器电子设备或存储电子设备。术语“存储介质”旨在包括：安装介质，例如CD-ROM、软盘或磁带装置；计算机系统存储器或随机存取存储器，诸如DRAM、DDR RAM、SRAM、EDO RAM，兰巴斯(Rambus)RAM等；非易失性存储器，诸如闪存、磁介质(例如硬盘或光存储)；寄存器或其它相似类型的存储器元件等。存储介质可以还包括其它类型的存储器或其组合。另外，存储介质可以位于程序在其中被执行的计算机系统中，或者可以位于不同的第二计算机系统中，第二计算机系统通过网络(诸如因特网)连接到计算机系统。第二计算机系统可以提供程序指令给计算机用于执行。术语“存储介质”可以包括可以驻留在不同未知中(例如在通过网络连接的不同计算机系统中)的两个或更多存储介质。存储介质可以存储可由一个或多个处理器执行的程序指令(例如具体实现为计算机程序)。

当然，本申请实施例所提供的一种包含计算机可执行指令的存储介质，其计算机可执行指令不限于如上所述的基于Vue3组件的页面渲染操作，还可以执行本申请任意实施例所提供的基于Vue3组件的页面渲染方法中的相关操作。

实施例五

本申请实施例五提供了一种电子设备，该电子设备中可集成本申请实施例提供的基于Vue3组件的页面渲染装置，该电子设备可以是配置于系统内的，也可以是执行系统内的部分或者全部功能的设备。图6是本申请实施例五提供的一种电子设备的结构示意图。如图6所示，本实施例提供了一种电子设备600，其包括：一个或多个处理器620；存储装置610，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器620执行，使得所述一个或多个处理器620实现本申请实施例所提供的基于Vue3组件的页面渲染方法，该方法包括：

实例化Webworker对象，确定运行Vue3组件的独立线程；

当然，本领域技术人员可以理解，处理器620还实现本申请任意实施例所提供的基于Vue3组件的页面渲染方法的技术方案。

图6显示的电子设备600仅仅是一个示例，不应对本申请实施例的功能和使用范围带来任何限制。

如图6所示，该电子设备600包括处理器620、存储装置610、输入装置630和输出装置640；电子设备中处理器620的数量可以是一个或多个，图6中以一个处理器620为例；电子设备中的处理器620、存储装置610、输入装置630和输出装置640可以通过总线或其他方式连接，图6中以通过总线650连接为例。

存储装置610作为一种计算机可读存储介质，可用于存储软件程序、计算机可执行程序以及模块单元，如本申请实施例中的基于Vue3组件的页面渲染方法对应的程序指令。

存储装置610可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序；存储数据区可存储根据终端的使用所创建的数据等。此外，存储装置610可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实例中，存储装置610可进一步包括相对于处理器620远程设置的存储器，这些远程存储器可以通过网络连接。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

输入装置630可用于接收输入的数字、字符信息或语音信息，以及产生与电子设备的用户设置以及功能控制有关的键信号输入。输出装置640可包括显示屏、扬声器等电子设备。

本申请实施例提供的电子设备，可以实现采用多线程的方式进行页面渲染，从而可以提高移动端的运行性能的稳定性。

上述实施例中提供的基于Vue3组件的页面渲染装置、介质及电子设备可执行本申请任意实施例所提供的基于Vue3组件的页面渲染方法，具备执行该方法相应的功能模块和有益效果。未在上述实施例中详尽描述的技术细节，可参见本申请任意实施例所提供的基于Vue3组件的页面渲染方法。

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

Claims

1.一种基于Vue3组件的页面渲染方法，其特征在于，包括：

实例化Webworker对象，确定运行Vue3组件的独立线程；

2.根据权利要求1所述的方法，其特征在于，所述预先定义的信息传递函数的定义过程包括：

3.根据权利要求2所述的方法，其特征在于，对所述目标覆盖方法进行覆盖处理，得到Render函数，包括：

4.根据权利要求2所述的方法，其特征在于，采用预先定义的信息传递函数，将所述实例化虚拟标签传递至浏览渲染线程，包括：

5.根据权利要求1所述的方法，其特征在于，在将所述实例化虚拟标签传递至浏览渲染线程，以进行页面渲染之后，所述方法还包括：

6.根据权利要求1所述的方法，其特征在于，在将所述实例化虚拟标签传递至浏览渲染线程，以进行页面渲染之后，所述方法还包括：

通过读取触发事件JSON字符串的事件ID来确定事件内容；

7.根据权利要求1所述的方法，其特征在于，所述Vue3组件，包括：

8.根据权利要求7所述的方法，其特征在于，所述Vue3组件，还包括服务组件，所述服务组件具体包括：

网络Network，用于在Vue3组件工作过程中访问后端接口；

缓存Storage，用于使用本地indexedDB缓存数据；

格式转换Format，用于提供时间日期或者正则校验工具函数。

9.根据权利要求8所述的方法，其特征在于，所述方法还包括：

封装indexedDB；

采用postMessage监听方法获取浏览渲染线程的indexedDB。

10.一种基于Vue3组件的页面渲染装置，其特征在于，包括：

11.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1-9中任一项所述的基于Vue3组件的页面渲染方法。

12.一种电子设备，包括存储器，处理器及存储在存储器上并可在处理器运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1-9中任一项所述的基于Vue3组件的页面渲染方法。