页面渲染优化方法、装置、设备及计算机可读存储介质与流程

本申请涉及页面渲染，具体涉及一种页面渲染优化方法、装置、设备及计算机可读存储介质。

背景技术：

1、目前，当使用react开发浏览器页面时，react会生成一份虚拟dom(virtual dom)，然后再根据虚拟dom的信息生成真实的浏览器dom，从而渲染页面。当使用react更新页面时，react首先会生成一份新的虚拟dom，然后新的虚拟dom和旧的虚拟dom进行比较，计算出需要更新哪些的真实浏览器dom。虽然这个比较的过程react做了一些优化手段，但是还是需要针对每一个dom进行比较。

2、对于体量不大的项目react的新旧虚拟dom比较过程的时间复杂度不会造成什么问题，但是随着现代应用中的页面内容越来越复杂和丰富，实际渲染过程中的dom数量可能会非常巨大，能达到上万个。此时执行一次dom的比较将会非常耗时，导致用户页面的更新过慢，用户进而感受到卡顿，从而降低用户体验。

技术实现思路

1、鉴于上述问题，本申请提供了一种页面渲染优化方法、装置、设备及计算机可读存储介质，用于解决现有技术中存在的页面渲染速度低的问题。

2、根据本申请实施例的一个方面，提供了一种页面渲染优化方法，所述方法包括：

3、分别判断用于生成渲染页面的每个虚拟dom为动态虚拟dom或静态虚拟dom；

4、针对每个静态虚拟dom，分别对未渲染的每个静态虚拟dom进行初次渲染；针对每个动态虚拟dom，对每个动态虚拟dom进行实时渲染，以实现对渲染页面的实时渲染优化。

5、在一种可选的方式中，还包括：

6、利用react技术，获取用于生成渲染页面的每个虚拟dom。

7、在一种可选的方式中，分别判断用于生成渲染页面的每个虚拟dom为动态虚拟dom或静态虚拟dom的步骤，包括：

8、获取用于表征所有虚拟dom的结构语法树，并根据所述结构语法树，分别判断用于生成渲染页面的每个虚拟dom为动态虚拟dom或静态虚拟dom。

9、在一种可选的方式中，根据所述结构语法树，判断用于任一虚拟dom为动态虚拟dom或静态虚拟dom的步骤，包括：

10、从所述结构语法树中，获取所述任一虚拟dom的属性值和子节点；

11、当所述任一虚拟dom的属性值和子节点中的至少一个包含动态表达式类型，则判定所述任一虚拟dom为动态虚拟dom，否则判定所述任一虚拟dom为静态虚拟dom。

12、在一种可选的方式中，还包括：

13、若所有的虚拟dom中不存在动态虚拟dom，则停止渲染优化。

14、根据本申请实施例的另一方面，提供了一种页面渲染优化装置，包括：

15、判断模块，用于分别判断用于生成渲染页面的每个虚拟dom为动态虚拟dom或静态虚拟dom；

16、渲染模块，用于针对每个静态虚拟dom，分别对未渲染的每个静态虚拟dom进行初次渲染；针对每个动态虚拟dom，对每个动态虚拟dom进行实时渲染，以实现对渲染页面的实时渲染优化。

17、在一种可选的方式中，还包括：

18、获取模块，用于利用react技术，获取用于生成渲染页面的每个虚拟dom。

19、在一种可选的方式中，所述判断模块具体用于：

20、获取用于表征所有虚拟dom的结构语法树，并根据所述结构语法树，分别判断用于生成渲染页面的每个虚拟dom为动态虚拟dom或静态虚拟dom。

21、根据本申请实施例的另一方面，提供了一种页面渲染优化设备，包括：

22、控制器；

23、存储器，用于存储一个或多个程序，当一个或多个程序被控制器执行时，使得控制器实现如本发明的页面渲染优化方法。

24、根据本发明实施例的又一方面，提供了一种计算机可读存储介质，所述存储介质中存储有至少一可执行指令，所述可执行指令在页面渲染优化装置/设备上运行时，使得页面渲染优化装置/设备执行如本发明的页面渲染优化方法的操作。

25、本申请实施例通过分别判断用于生成渲染页面的每个虚拟dom为动态虚拟dom或静态虚拟dom；针对每个静态虚拟dom，分别对未渲染的每个静态虚拟dom进行初次渲染；针对每个动态虚拟dom，对每个动态虚拟dom进行实时渲染，以实现对渲染页面的实时渲染优化，能够在代码编译阶段对虚拟dom进行动静态区分，在实现提高页面渲染速度，减少渲染过程中的资源消耗的同时，保留了页面渲染的灵活性与可扩展性，且不影响已有的开发工具链，提升了用户体验。

26、上述说明仅是本申请实施例技术方案的概述，为了能够更清楚了解本申请实施例的技术手段，而可依照说明书的内容予以实施，并且为了让本申请实施例的上述和其它目的、特征和优点能够更明显易懂，以下特举本申请的具体实施方式。

技术特征：

1.一种页面渲染优化方法，其特征在于，包括：

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

3.根据权利要求1所述的方法，其特征在于，分别判断用于生成渲染页面的每个虚拟dom为动态虚拟dom或静态虚拟dom的步骤，包括：

4.根据权利要求3所述的方法，其特征在于，根据所述结构语法树，判断用于任一虚拟dom为动态虚拟dom或静态虚拟dom的步骤，包括：

5.根据权利要求1至4任一项所述的方法，其特征在于，还包括：

6.一种页面渲染优化装置，其特征在于，包括：

7.根据权利要求6所述的装置，其特征在于，还包括：

8.根据权利要求6所述的装置，其特征在于，所述判断模块具体用于：

9.一种页面渲染优化设备，其特征在于，包括：

10.一种计算机可读存储介质，其特征在于，所述存储介质中存储有至少一可执行指令，所述可执行指令在页面渲染优化装置/设备上运行时，使得页面渲染优化装置/设备执行如权利要求1-5任意一项所述的页面渲染优化方法的操作。

技术总结本申请涉及页面渲染技术领域，公开了一种页面渲染优化方法、装置、设备及存储介质，该方法包括：分别判断用于生成渲染页面的每个虚拟DOM为动态虚拟DOM或静态虚拟DOM；针对每个静态虚拟DOM，分别对未渲染的每个静态虚拟DOM进行初次渲染；针对每个动态虚拟DOM，对每个动态虚拟DOM进行实时渲染，以实现对渲染页面的实时渲染优化。应用本申请的技术方案，能够在代码编译阶段对虚拟DOM进行动静态区分，在实现提高页面渲染速度，减少渲染过程中的资源消耗的同时，保留了页面渲染的灵活性与可扩展性，且不影响已有的开发工具链，提升了用户体验。技术研发人员：张俊,熊勇,孙浩受保护的技术使用者：重庆赛力斯凤凰智创科技有限公司技术研发日：技术公布日：2024/7/29