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

说明书

本申请实施例公开了一种基于Vue3组件的页面渲染方法、装置、介质及电子设备。本申请实施例涉及移动互联技术领域。其中，方法包括：创建虚拟标签对象；其中，所述虚拟标签包括标签类型、标签名称、标签属性、标签内容中的至少一种，且所述虚拟标签用于描述文档对象模型；实例化Webworker对象，确定运行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监听方法对页面渲染结果进行监听。