页面渲染方法、装置、电子设备及存储介质与流程

本发明涉及信息，具体而言，涉及一种页面渲染方法、装置、电子设备及存储介质。

背景技术：

1、在前端的开发中，无效渲染是一个常见的问题。无效渲染会降低浏览器的渲染效率，大量无用地占用cpu资源，阻塞正常的页面渲染。而随着项目规模的扩大和页面内容越来越丰富，渲染页面所需要的cpu资源也会增加，无效渲染造成的阻塞影响也会越明显。

2、因此，亟需一种能够规避页面无效渲染的渲染方法。

技术实现思路

1、为了解决上述技术问题，本申请实施例提供了一种页面渲染方法、装置、电子设备及存储介质。

2、第一方面，本申请实施例提供了一种页面渲染方法，所述方法包括：

3、对前端页面执行若干次渲染测试，得到无效渲染区域及所述无效渲染区域对应的无效渲染组件；

4、判断所述无效渲染组件的工作状态是否发生变化，若所述无效渲染组件的工作状态发生变化，则输出所述无效渲染组件对应的影响因素；

5、获取所述影响因素中的有效数据和无效数据；

6、将所述有效数据确定为渲染依赖项，并使用react框架的原生缓存方法和/或第三方缓存库将所述渲染依赖项保存在缓存中；

7、根据所述缓存的状态对所述前端页面进行渲染。

8、在一实施方式中，所述对前端页面执行若干次渲染测试，得到无效渲染区域及所述无效渲染区域对应的无效渲染组件，包括：

9、当执行所述渲染测试时，生成多个渲染区域；

10、通过预设测试工具确定多个所述渲染区域中的所述无效渲染区域；

11、获取所述无效渲染区域调用的渲染函数的日志信息；

12、根据所述日志信息确定所述无效渲染组件。

13、在一实施方式中，所述判断所述无效渲染组件的工作状态是否发生变化，若所述无效渲染组件的工作状态发生变化，则输出所述无效渲染组件对应的影响因素，包括：

14、使用ahooks工具库中的监听工具监听所述无效渲染组件的工作状态，并自动输出工作状态发生变化的无效渲染组件对应的影响因素。

15、在一实施方式中，所述获取所述影响因素中的有效数据和无效数据，包括：

16、判断所述影响因素中的引用数据是否发生改变；

17、若是，则确定所述引用数据为所述有效数据；

18、若否，则确定所述引用数据为所述无效数据。

19、在一实施方式中，所述根据所述缓存的状态对所述前端页面进行渲染，包括：

20、获取所述缓存中的所述渲染依赖项是否发生变化；

21、若是，则根据预设渲染配置对所述前端页面进行渲染；

22、若否，则不对所述前端页面进行渲染。

23、在一实施方式中，所述方法还包括：

24、当所述前端页面渲染完成后，对所述前端页面的渲染结果进行验证。

25、在一实施方式中，所述对所述前端页面的渲染结果进行验证，包括：

26、获取所述渲染结果中的无效渲染区域，若所述无效渲染区域的占比小于预设阈值，则确定验证通过。

27、第二方面，本申请实施例提供了一种页面渲染装置，所述页面渲染装置包括：

28、测试模块，用于对前端页面执行若干次渲染测试，得到无效渲染区域及所述无效渲染区域对应的无效渲染组件；

29、判断模块，用于判断所述无效渲染组件的工作状态是否发生变化，若所述无效渲染组件的工作状态发生变化，则输出所述无效渲染组件对应的影响因素；

30、获取模块，用于获取所述影响因素中的有效数据和无效数据；

31、缓存模块，用于将所述有效数据确定为渲染依赖项，并使用react框架的原生缓存方法和/或第三方缓存库将所述渲染依赖项保存在缓存中；

32、渲染模块，用于根据所述缓存的状态对所述前端页面进行渲染。

33、第三方面，本申请实施例提供了一种电子设备，包括存储介质以及处理器，所述存储介质用于存储计算机程序，所述计算机程序在所述处理器运行时执行第一方面提供的页面渲染方法。

34、第四方面，本申请实施例提供了一种计算机可读存储介质，其存储有计算机程序，所述计算机程序在处理器上运行时执行第一方面提供的页面渲染方法。

35、上述本申请提供的页面渲染方法，减轻了无效渲染造成的阻塞，能够提高前端页面的渲染效率，减少对cpu资源的占用，使得系统使用更加流畅，提高了用户体验。

技术特征：

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

2.根据权利要求1所述的页面渲染方法，其特征在于，所述对前端页面执行若干次渲染测试，得到无效渲染区域及所述无效渲染区域对应的无效渲染组件，包括：

3.根据权利要求1所述的页面渲染方法，其特征在于，所述判断所述无效渲染组件的工作状态是否发生变化，若所述无效渲染组件的工作状态发生变化，则输出所述无效渲染组件对应的影响因素，包括：

4.根据权利要求1所述的页面渲染方法，其特征在于，所述获取所述影响因素中的有效数据和无效数据，包括：

5.根据权利要求1所述的页面渲染方法，其特征在于，所述根据所述缓存的状态对所述前端页面进行渲染，包括：

6.根据权利要求1所述的页面渲染方法，其特征在于，所述方法还包括：

7.根据权利要求6所述的页面渲染方法，其特征在于，所述对所述前端页面的渲染结果进行验证，包括：

8.一种页面渲染装置，其特征在于，所述装置包括：

9.一种电子设备，其特征在于，包括存储介质以及处理器，所述存储介质存储有计算机程序，所述计算机程序在所述处理器运行时执行权利要求1至7中任一项所述的页面渲染方法。

10.一种计算机可读存储介质，其特征在于，其存储有计算机程序，所述计算机程序在处理器上运行时执行权利要求1至7中任一项所述的页面渲染方法。

技术总结
本发明的实施例提供了一种页面渲染方法、装置、电子设备及存储介质，涉及信息技术领域。包括：对前端页面执行若干次渲染测试，得到无效渲染区域及无效渲染区域对应的无效渲染组件；判断无效渲染组件的工作状态是否发生变化，若无效渲染组件的工作状态发生变化，则输出无效渲染组件对应的影响因素；获取影响因素中的有效数据和无效数据；将有效数据确定为渲染依赖项，并使用react框架的原生缓存方法和/或第三方缓存库将渲染依赖项保存在缓存中；根据缓存的状态对前端页面进行渲染。本申请能够减轻无效渲染造成的阻塞，提高前端页面的渲染效率，减少对cpu资源的占用，使得系统使用更加流畅，提高了用户体验。

技术研发人员：孙帅,李雅堂,黎广鑫,林群贺,张玉成
受保护的技术使用者：深圳复临科技有限公司
技术研发日：
技术公布日：2024/1/13