本发明专利技术提供的一种动态组件渲染方法、装置、设备及存储介质，通过针对待显示页面中的任一目标动态组件，调用目标动态组件中的初始化函数，以获取与目标动态组件对应的根节点dom元素的ref关键字；将ref关键字传入目标动态组件中的封装组件；封装组件用于调用交叉观察器接口，以判断目标动态组件是否在可视化区域内；当确定目标动态组件在可视化区域内时，对目标动态组件进行渲染，通过在动态组件中设置一封装组件，实现对交叉观察器的调用，从而直接判断目标动态组件的根节点dom元素是否在可视化区域内，以确定是否对目标动态组件进行渲染，无需进行大量计算，从而解决花费时间较长以及滚动速度较快时出现白屏的问题。
【技术实现步骤摘要】
本专利技术涉及页面渲染，尤其涉及一种动态组件渲染方法、装置、设备及存储介质。
技术介绍
1、前端开发在页面渲染时会存在加载时间长、数据资源量大等问题，这种问题存在的主要原因是页面请求的内容较多，大量列表数据的同时渲染容易造成页面白屏。针对该问题，目前常见的方法是通过虚拟列表的方式来缓解页面渲染的压力。
2、在页面中存在多个动态模块，当在通过虚拟列表的方式进行页面渲染时，虚拟列表需要计算所有动态模块的高度，当用户在滑动页面时，可以获取滚动条高度，根据滚动条高度和各个动态模块的高度确定处于可视化区域内的动态模块，从而将可视化区域内的动态模块进行渲染。
3、然而，上述方法在确定某一动态模块是否处于可视化区域时，需要花费一定时间去计算，且由于需要边滚动边计算，当滚动速度过快时，会出现白屏问题，用户体验不佳。
技术实现思路
1、本专利技术提供一种动态组件渲染方法、装置、设备及存储介质，用以解决现有技术中采用虚拟列表的方法对页面进行渲染时存在的花费时间较长以及滚动速度较快时出现白屏的问题。
2、第一方面，本专利技术提供一种动态组件渲染方法，所述方法包括：
3、针对待显示页面中的任一目标动态组件，调用所述目标动态组件中的初始化函数，以获取与所述目标动态组件对应的根节点dom元素的ref关键字；
4、将所述ref关键字传入所述目标动态组件中的封装组件；所述封装组件用于调用交叉观察器接口，以判断所述目标动态组件是否在可视化区域内；
<
p>5、当确定所述目标动态组件在可视化区域内时，对所述目标动态组件进行渲染。6、可选的，对所述目标动态组件进行渲染，包括：
7、调用所述目标动态组件中的初始化函数，以向服务器发送请求信息；所述请求信息用于获取目标数据；所述目标数据为与所述目标动态组件对应的数据；
8、当在获取到所述目标数据后，根据所述目标数据对所述目标动态组件进行渲染。
9、可选的，所述方法还包括：
10、当确定所述目标动态组件在可视化区域内时，则将所述目标动态组件的状态设置为数据加载状态；
11、相应的，当在获取到所述目标数据后，所述方法还包括：
12、调用所述目标动态组件中的回调函数，以控制所述目标动态组件的数据加载状态结束。
13、可选的，对所述目标动态组件进行渲染，还包括：
14、根据目标布局配置信息和目标骨架屏配置信息进行预加载，以在获取到所述目标数据之前初步渲染所述目标动态组件并显示；所述骨架屏配置信息用于使主体布局上呈现对应的骨架屏样式。
15、可选的，所述目标动态组件包括多种布局配置信息和多种骨架屏配置信息；所述方法还包括：
16、确定预先传入所述目标动态组件的第一参数信息和第二参数信息；
17、根据所述第一参数信息确定所述目标布局配置信息，根据所述第二参数信息确定所述目标骨架屏配置信息。
18、可选的，所述目标动态组件中的子组件包括：头部子组件、侧边栏子组件、尾部子组件和内容子组件；根据所述目标数据对所述目标动态组件进行渲染，包括：
19、针对所述目标动态组件中的任一目标子组件，确定所述目标子组件对应的字段名；
20、根据所述字段名从所述目标数据中确定与所述目标子组件对应的数据，根据所述对应的数据对所述目标子组件进行渲染。
21、可选的，所述方法还包括：
22、在生成动态组件后，将所述动态组件打包，生成预设类型文件，并将所述预设类型文件发布到应用托管平台。
23、第二方面，本专利技术提供一种动态组件渲染装置，所述装置包括：
24、第一调用模块，用于针对待显示页面中的任一目标动态组件，调用所述目标动态组件中的初始化函数，以获取与所述目标动态组件对应的根节点dom元素的ref关键字；
25、传入模块，用于将所述ref关键字传入所述目标动态组件中的封装组件；所述封装组件用于调用交叉观察器接口，以判断所述目标动态组件是否在可视化区域内；
26、渲染模块，用于当确定所述目标动态组件在可视化区域内时，对所述目标动态组件进行渲染。
27、第三方面，本专利技术提供一种电子设备，包括：至少一个处理器和存储器；
28、所述存储器存储计算机执行指令；
29、所述至少一个处理器执行存储器存储的计算机执行指令，使得至少一个处理器执行如第一方面任一项的方法。
30、第四方面，本专利技术提供一种计算机可读存储介质，计算机可读存储介质中存储有计算机执行指令，当处理器执行计算机执行指令时，实现如第一方面任一项的方法。
31、本专利技术提供的一种动态组件渲染方法、装置、设备及存储介质，通过针对待显示页面中的任一目标动态组件，调用所述目标动态组件中的初始化函数，以获取与所述目标动态组件对应的根节点dom元素的ref关键字；将所述ref关键字传入所述目标动态组件中的封装组件；所述封装组件用于调用交叉观察器接口，以判断所述目标动态组件是否在可视化区域内；当确定所述目标动态组件在可视化区域内时，对所述目标动态组件进行渲染，通过在动态组件中设置一封装组件，实现对交叉观察器的调用，从而直接判断目标动态组件的根节点dom元素是否在可视化区域内，以确定是否对目标动态组件进行渲染，无需进行大量计算，从而解决花费时间较长以及滚动速度较快时出现白屏的问题。
本文档来自技高网...
【技术保护点】
1.一种动态组件渲染方法，其特征在于，包括：
2.根据权利要求1所述的方法，其特征在于，对所述目标动态组件进行渲染，包括：
3.根据权利要求2所述的方法，其特征在于，所述方法还包括：
4.根据权利要求2所述的方法，其特征在于，对所述目标动态组件进行渲染，还包括：
5.根据权利要求4所述的方法，其特征在于，所述目标动态组件包括多种布局配置信息和多种骨架屏配置信息；所述方法还包括：
6.根据权利要求4所述的方法，其特征在于，所述目标动态组件中的子组件包括：头部子组件、侧边栏子组件、尾部子组件和内容子组件；根据所述目标数据对所述目标动态组件进行渲染，包括：
7.根据权利要求6所述的方法，其特征在于，所述方法还包括：
8.一种动态组件渲染装置，其特征在于，所述装置包括：
9.一种电子设备，其特征在于，包括：至少一个处理器和存储器；
10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有计算机执行指令，当处理器执行所述计算机执行指令时，实现如权利要求1至7任一项所述的方法。
...
【技术特征摘要】
1.一种动态组件渲染方法，其特征在于，包括：
2.根据权利要求1所述的方法，其特征在于，对所述目标动态组件进行渲染，包括：
3.根据权利要求2所述的方法，其特征在于，所述方法还包括：
4.根据权利要求2所述的方法，其特征在于，对所述目标动态组件进行渲染，还包括：
5.根据权利要求4所述的方法，其特征在于，所述目标动态组件包括多种布局配置信息和多种骨架屏配置信息；所述方法还包括：
6.根据权利要求4所述的方法，其特征在于，所述目标动态组件中...
【专利技术属性】
技术研发人员：陈海锋，冯婷婷，钟忻，柴鹏，
申请(专利权)人：中国联合网络通信集团有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。