System.ArgumentOutOfRangeException: 索引和长度必须引用该字符串内的位置。 参数名: length 在 System.String.Substring(Int32 startIndex, Int32 length) 在 zhuanliShow.Bind() 页面渲染方法、服务端、客户端、设备及存储介质技术_技高网

页面渲染方法、服务端、客户端、设备及存储介质技术

技术编号:44490350 阅读:2 留言:0更新日期:2025-03-04 17:55
本申请实施例提供了一种页面渲染方法、服务端、客户端、设备及存储介质。该方法包括:从客户端接收针对目标页面的渲染请求,所述渲染请求用于获取所述目标页面的基础数据和业务数据;响应于所述渲染请求,向所述客户端返回第一数据块,以使所述客户端基于所述第一数据块渲染出所述目标页面的基础内容的至少一部分;响应于所述渲染请求,向业务服务器请求所述目标页面的业务数据;在所述业务服务器向所述服务端返回所述业务数据后,向所述客户端返回第二数据块,以使所述客户端基于所述第二数据块渲染出所述目标页面的业务内容的至少一部分。本申请实施例有利于提高用户体验。

【技术实现步骤摘要】

本申请涉及页面渲染,具体涉及一种页面渲染方法、服务端、客户端、设备及存储介质


技术介绍

1、随着网页技术的发展,越来越多的应用开发了网页功能。网页的渲染时长越低,用户看见内容的时长就会越短,用户浏览内容的概率就会越大,内容的曝光量和点击量也会随之提高,因此网页的渲染时长是应用的网页版的关键性能指标。

2、目前,为了极致的用户体验和更高的功能上限,一般采用服务端渲染(serverside render,ssr)架构渲染网页。然而,采用ssr架构渲染网页,渲染出完整的网页的时长仍然较长,用户体验低。


技术实现思路

1、本申请实施例提供了一种页面渲染方法、服务端、客户端、设备及存储介质。

2、第一方面,本申请实施例提供一种页面渲染方法,应用于服务端,所述方法包括:

3、从客户端接收针对目标页面的渲染请求,所述渲染请求用于获取所述目标页面的基础数据和业务数据;

4、响应于所述渲染请求,向所述客户端返回第一数据块,以使所述客户端基于所述第一数据块渲染出所述目标页面的基础内容的至少一部分,所述第一数据块是对所述基础数据的一个片段进行编码得到的;

5、响应于所述渲染请求,向业务服务器请求所述目标页面的业务数据;

6、在所述业务服务器向所述服务端返回所述业务数据后,向所述客户端返回第二数据块,以使所述客户端基于所述第二数据块渲染出所述目标页面的业务内容的至少一部分,所述第二数据块是对所述业务数据的一个片段进行编码得到的。p>

7、第二方面,本申请实施例提供一种页面渲染方法,应用于客户端,所述方法包括:

8、向服务端发送针对目标页面的渲染请求,所述渲染请求用于获取所述目标页面的基础数据和业务数据;

9、从所述服务端接收第一数据块,所述第一数据块是所述服务端对所述基础数据的一个片段进行编码得到的,所述基础数据是所述服务端响应于所述渲染请求获取的;

10、基于所述第一数据块渲染出所述目标页面的基础内容的至少一部分,并在获取到所述基础数据后,渲染出所述目标页面的基础内容;

11、从所述服务端接收第二数据块,所述第二数据块是所述服务端对所述业务数据的一个片段进行编码得到的,所述业务数据是所述服务端响应于所述渲染请求从业务服务器获取的;

12、基于所述第二数据块渲染出所述业务内容的至少一部分,并在获取到所述业务数据后,渲染出所述目标页面的业务内容。

13、第三方面,本申请实施例提供一种服务端,包括:收发单元和处理单元;

14、所述收发单元,用于从客户端接收针对目标页面的渲染请求,所述渲染请求用于获取所述目标页面的基础数据和业务数据;

15、所述处理单元,用于响应于所述渲染请求,向所述客户端返回第一数据块,以使所述客户端基于所述第一数据块渲染出所述目标页面的基础内容的至少一部分,所述第一数据块是对所述基础数据的一个片段进行编码得到的;响应于所述渲染请求,向业务服务器请求所述目标页面的业务数据;

16、所述收发单元,还用于在所述业务服务器向所述服务端返回所述业务数据后,向所述客户端返回第二数据块,以使所述客户端基于所述第二数据块渲染出所述目标页面的业务内容的至少一部分,所述第二数据块是对所述业务数据的一个片段进行编码得到的。

17、第四方面,本申请实施例提供一种客户端,包括:收发单元和处理单元;

18、所述收发单元,用于向服务端发送针对目标页面的渲染请求,所述渲染请求用于获取所述目标页面的基础数据和业务数据;从所述服务端接收第一数据块,所述第一数据块是所述服务端对所述基础数据的一个片段进行编码得到的,所述基础数据是所述服务端响应于所述渲染请求获取的;

19、所述处理单元,用于基于所述第一数据块渲染出所述目标页面的基础内容的至少一部分,并在获取到所述基础数据后,渲染出所述目标页面的基础内容;

20、所述收发单元,还用于从所述服务端接收第二数据块,所述第二数据块是所述服务端对所述业务数据的一个片段进行编码得到的,所述业务数据是所述服务端响应于所述渲染请求从业务服务器获取的;

21、所述处理单元,用于基于所述第二数据块渲染出所述业务内容的至少一部分,并在获取到所述业务数据后,渲染出所述目标页面的业务内容。

22、第五方面,本申请实施例提供一种电子设备,包括:处理器和存储器,所述处理器与存储器相连,所述存储器用于存储计算机程序,所述处理器用于执行所述存储器中存储的计算机程序,以使得所述电子设备执行如第一方面或第二方面所述的方法。

23、第六方面,本申请实施例提供一种计算机可读存储介质,所述计算机可读存储介质存储有计算机程序,所述计算机程序被处理器执行时实现如第一方面或第二方面所述的方法。

24、第七方面,本申请实施例提供一种计算机程序产品,所述计算机程序产品包括计算机程序,所述计算机程序被处理器执行时实现如如第一方面或第二方面所述的方法。

25、实施本申请实施例,具有如下有益效果:

26、可以看出,在本申请实施例中,服务端在接收到客户端的页面渲染请求后,会将目标页面的基础数据分片段编码和传输给客户端,这样客户端就可以先获取到基础数据的第一数据块,然后客户端就可以先对第一数据块进行渲染,显示目标页面的基础内容,由于基础数据很容易获取到,服务端可以快速返回给客户端,这样客户端就能够快速显示一个基础内容,避免长时间的空白屏等待。然后,在返回第一数据块的过程中,服务端就可以向业务服务器请求目标页面的业务数据,这样在客户端渲染基础内容的同时,服务端就可以并行去获取业务数据,并且在获取到业务数据的一个片段后,就会立即将该片段返回给客户端进行业务内容的渲染,从而可以让用户尽快看到业务内容,提高页面的渲染效率。

本文档来自技高网...

【技术保护点】

1.一种页面渲染方法,其特征在于,应用于服务端,所述方法包括:

2.根据权利要求1所述的方法,其特征在于,向所述客户端返回第一数据块之前,所述方法还包括:

3.根据权利要求2所述的方法,其特征在于,所述对所述基础数据的一个片段进行渲染,得到第一字符串,包括:

4.根据权利要求3所述的方法,其特征在于,所述方法还包括:

5.根据权利要求1-4任一项所述的方法,其特征在于,向所述客户端返回第二数据块之前,所述方法还包括:

6.一种页面渲染方法,其特征在于,应用于客户端,所述方法包括:

7.根据权利要求6所述的方法,其特征在于,所述业务内容包括多项内容;在获取到所述业务数据后;所述方法还包括:

8.根据权利要求7所述的方法,其特征在于,所述运行所述目标脚本代码,得到每项内容在所述客户端的显示窗口中的显示位置和显示尺寸,包括:

9.根据权利要求8所述的方法,其特征在于,所述基于每项内容的原始高度、原始宽度、所述列宽、所述水平距离、所述垂直距离以及所述列高度索引向量,确定每项内容在所述显示窗口中的显示位置和显示尺寸,包括:

10.一种服务端,其特征在于,包括:收发单元和处理单元;

11.一种客户端,其特征在于,包括:收发单元和处理单元;

12.一种电子设备,其特征在于,包括:处理器和存储器,所述处理器与所述存储器相连,所述存储器用于存储计算机程序,所述处理器用于执行所述存储器中存储的计算机程序,以使得所述电子设备执行如权利要求1-9任一项所述的方法。

13.一种计算机可读存储介质,其特征在于,所述计算机可读存储介质存储有计算机程序,所述计算机程序被处理器执行以实现如权利要求1-9任一项所述的方法。

...

【技术特征摘要】

1.一种页面渲染方法,其特征在于,应用于服务端,所述方法包括:

2.根据权利要求1所述的方法,其特征在于,向所述客户端返回第一数据块之前,所述方法还包括:

3.根据权利要求2所述的方法,其特征在于,所述对所述基础数据的一个片段进行渲染,得到第一字符串,包括:

4.根据权利要求3所述的方法,其特征在于,所述方法还包括:

5.根据权利要求1-4任一项所述的方法,其特征在于,向所述客户端返回第二数据块之前,所述方法还包括:

6.一种页面渲染方法,其特征在于,应用于客户端,所述方法包括:

7.根据权利要求6所述的方法,其特征在于,所述业务内容包括多项内容;在获取到所述业务数据后;所述方法还包括:

8.根据权利要求7所述的方法,其特征在于,所述运行所述目标脚本代码,得到每项内容在所述客户端的显示...

【专利技术属性】
技术研发人员:赵旭阳董浩洋徐铁豹张进霖
申请(专利权)人:行吟信息科技上海有限公司
类型:发明
国别省市:

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1