页面渲染方法、装置、电子设备及存储介质制造方法及图纸

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

【技术实现步骤摘要】
页面渲染方法、装置、电子设备及存储介质


[0001]本专利技术涉及信息
，具体而言，涉及一种页面渲染方法、装置、电子设备及存储介质。

技术介绍

[0002]在前端的开发中，无效渲染是一个常见的问题。无效渲染会降低浏览器的渲染效率，大量无用地占用CPU资源，阻塞正常的页面渲染。而随着项目规模的扩大和页面内容越来越丰富，渲染页面所需要的CPU资源也会增加，无效渲染造成的阻塞影响也会越明显。
[0003]因此，亟需一种能够规避页面无效渲染的渲染方法。

技术实现思路

[0004]为了解决上述技术问题，本申请实施例提供了一种页面渲染方法、装置、电子设备及存储介质。
[0005]第一方面，本申请实施例提供了一种页面渲染方法，所述方法包括：
[0006]对前端页面执行若干次渲染测试，得到无效渲染区域及所述无效渲染区域对应的无效渲染组件；
[0007]判断所述无效渲染组件的工作状态是否发生变化，若所述无效渲染组件的工作状态发生变化，则输出所述无效渲染组件对应的影响因素；
[0008]获取所述影响因素本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种页面渲染方法，其特征在于，所述方法包括：对前端页面执行若干次渲染测试，得到无效渲染区域及所述无效渲染区域对应的无效渲染组件；判断所述无效渲染组件的工作状态是否发生变化，若所述无效渲染组件的工作状态发生变化，则输出所述无效渲染组件对应的影响因素；获取所述影响因素中的有效数据和无效数据；将所述有效数据确定为渲染依赖项，并使用react框架的原生缓存方法和/或第三方缓存库将所述渲染依赖项保存在缓存中；根据所述缓存的状态对所述前端页面进行渲染。2.根据权利要求1所述的页面渲染方法，其特征在于，所述对前端页面执行若干次渲染测试，得到无效渲染区域及所述无效渲染区域对应的无效渲染组件，包括：当执行所述渲染测试时，生成多个渲染区域；通过预设测试工具确定多个所述渲染区域中的所述无效渲染区域；获取所述无效渲染区域调用的渲染函数的日志信息；根据所述日志信息确定所述无效渲染组件。3.根据权利要求1所述的页面渲染方法，其特征在于，所述判断所述无效渲染组件的工作状态是否发生变化，若所述无效渲染组件的工作状态发生变化，则输出所述无效渲染组件对应的影响因素，包括：使用ahooks工具库中的监听工具监听所述无效渲染组件的工作状态，并自动输出工作状态发生变化的无效渲染组件对应的影响因素。4.根据权利要求1所述的页面渲染方法，其特征在于，所述获取所述影响因素中的有效数据和无效数据，包括：判断所述影响因素中的引用数据是否发生改变；若是，则确定所述引用数据为所述有效数据；若否，则确定所述引用数据为所述无效数据。5.根据权利要求1所述的页面渲染方法，其特...

【专利技术属性】
技术研发人员：孙帅，李雅堂，黎广鑫，林群贺，张玉成，
申请(专利权)人：深圳复临科技有限公司，
类型：发明
国别省市：