[发明专利]网页组件渲染方法及系统

说明书

本发明实施例提供一种网页组件渲染方法及系统，属于网页优化技术领域。所述网页组件渲染方法包括：获取网页的渲染请求，其中该网页配置有父组件和子组件；基于所述渲染请求确定待渲染的父组件下的子组件中的业务子组件及该业务子组件所指示的业务数据；基于所确定的业务子组件及其所指示的业务数据，渲染网页。由此，应用业务子组件执行网页渲染的过程，是由所请求的父组件去主动调用相应的子组件的业务数据，而不需要子组件基于父子组件耦合关系感应去执行渲染，优化了不必要的子组件的渲染所带来的消耗，减少了网页的性能开销，同时还提升了网页浏览的用户体验。

技术领域

本发明涉及网页优化技术领域，具体地涉及网页组件渲染方法及系统。

背景技术

在前端网页的生成过程中，多数情况下页面需要的数据并不是一次性全部请求获得的，一些数据的请求通过异步加载分批获得，这些数据之间没有耦合关系，不需要考虑数据之间的时序问题，可通过一次并发多个请求完成。然而，网页中还有一类业务数据之间存在时序依赖，即必须按照某种业务逻辑而按次序分开请求，先请求项目(也叫父组件)需要的数据，再请求仪表盘(也叫子组件)的数据。

为了解决这种时序依赖的问题，目前提出了在子组件上耦合很多父组件的数据和状态，基于这些数据和状态，子组件可以是在父组件接收到用户操作(例如切换父组件时)感应到该操作而执行数据变更逻辑。但是，一个父组件会触发多个子组件发生数据变更逻辑而全部执行初始化渲染操作，包括与用户操作请求不相关的子组件的渲染操作，导致了不必要的网页开销，其表现在网页上就是加载遮罩层而表示正在加载中，严重影响了用户的网页浏览体验。

发明内容

本发明实施例的目的是提供一种网页组件渲染方法及系统，用以至少解决目前每次切换父组件都会导致所有的子组件全部渲染所导致的性能开销过大的问题。

为了实现上述目的，本发明实施例提供一种网页组件渲染方法，包括：获取网页的渲染请求，其中该网页配置有父组件和子组件；基于所述渲染请求确定待渲染的父组件下的子组件中的业务子组件及该业务子组件所指示的业务数据；基于所确定的业务子组件及其所指示的业务数据，渲染网页。

可选的，所述基于所述渲染请求确定待渲染的父组件下的子组件中的业务子组件及该业务子组件所指示的业务数据包括：基于预配置的关于父组件与业务子组件之间的对应接口，确定所述待渲染的父组件所对应的所述业务子组件；以及基于所述对应接口，调用所述业务子组件所对应的业务数据。

可选的，该方法还包括针对所述关于父组件与业务子组件之间的对应接口的构建流程，具体包括：统计网页渲染过程中所涉及的所有的业务子组件；确定与所统计的业务子组件分别耦合的父组件；以及基于所统计的业务子组件所耦合的父组件，构建关于父组件与业务子组件之间的对应接口。

可选的，所述查询所述业务子组件所对应的业务数据包括：查询预配置的业务数据列表，以确定与所述所请求切换至的父组件相对应的业务子组件所指示的业务数据，其中所述业务数据列表中记录有多组相关联的父组件与该父组件下的业务子组件所指示的业务数据。

可选的，所述父组件下的子组件还包括用于指示通用数据的通用子组件，其中在获取网页的渲染请求之前，该方法还包括：对网页中的通用子组件进行初始化渲染。

可选的，所述基于所确定的业务子组件及其所指示的业务数据渲染网页包括：基于经初始化渲染的通用子组件、所确定的业务子组件和业务数据，渲染网页。

可选的，所述通用子组件用于包括公共子组件和/或无状态子组件，以及所述通用子组件所指示的所述通用数据包括网页主题和/或网页颜色。

本发明实施例另一方面提供一种网页组件渲染系统，包括：渲染请求获取单元，用于获取网页的渲染请求，其中该网页配置有父组件和子组件；业务子组件确定单元，用于基于所述渲染请求确定待渲染的父组件下的子组件中的业务子组件及该业务子组件所指示的业务数据；网页渲染单元，用于基于所确定的业务子组件及其所指示的业务数据渲染网页。