System.ArgumentOutOfRangeException: 索引和长度必须引用该字符串内的位置。 参数名: length 在 System.String.Substring(Int32 startIndex, Int32 length) 在 zhuanliShow.Bind() 页面渲染方法、装置以及设备制造方法及图纸_技高网

页面渲染方法、装置以及设备制造方法及图纸

技术编号:41126529 阅读:5 留言:0更新日期:2024-04-30 17:54
本说明书实施例公开了页面渲染方法、装置以及设备,在采用诸如CSS‑in‑JS这类运行时生成CSS的技术的场景下,需要有助于降低客户端负担的方案。其中,应用于客户端的方案包括:响应于针对目标页面的页面展示请求操作,启动对所述目标页面的渲染过程;判断服务端是否已为所述目标页面中的当前页面元素生成了样式内容;若是,则根据所述服务端已生成的所述样式内容,渲染所述当前页面元素;否则,为所述当前页面元素生成样式内容,并根据所述样式内容渲染所述当前页面元素;根据对所述目标页面中的各页面元素的渲染结果,得到对所述目标页面的渲染结果并据此展示所述目标页面。

【技术实现步骤摘要】

本说明书涉及前端,尤其涉及页面渲染方法、装置以及设备


技术介绍

1、无论是在pc端还是移动端(主要为智能手机),向用户展示页面都是一项频繁进行的处理动作。页面通常基于超文本标记语言(hypertext markup language,html)和层叠样式表(cascading style sheets,css)而渲染展示,其中,html描述了页面中具体包含哪些页面元素以及这些页面元素之间的布局,css属于样式内容,用于指示对应的页面元素需要按照怎样的样式来展示。

2、在传统技术中,css是固定写好的,在页面渲染时直接使用,不过为了提高样式灵活性,发展出了运行时生成css的技术,典型的如css-in-js技术。css-in-js能够通过javascript在运行时生成css。

3、在实际应用中,智能手机占据了用户越来越多的使用时长,大多数页面浏览都是在智能手机上进行的。相应地,在采用诸如css-in-js这类运行时生成css的技术的场景下,智能手机上相应应用的客户端,需要频繁为用户渲染展示应用页面,从而频繁地生成css,如此给客户端造成了不小负担,还可能影响正常业务,尤其对于性能不高的智能手机而言问题将更为明显。

4、基于此,在上述场景下,需要有助于降低客户端负担的方案。


技术实现思路

1、本说明书一个或多个实施例提供页面渲染方法、装置、设备以及存储介质,用以解决如下技术问题:在采用诸如css-in-js这类运行时生成css的技术的场景下,需要有助于降低客户端负担的方案。

2、为解决上述技术问题,本说明书一个或多个实施例是这样实现的:

3、本说明书一个或多个实施例提供的一种页面渲染方法,应用于客户端,所述方法包括:

4、响应于针对目标页面的页面展示请求操作,启动对所述目标页面的渲染过程;

5、判断服务端是否已为所述目标页面中的当前页面元素生成了样式内容;

6、若是,则根据所述服务端已生成的所述样式内容,渲染所述当前页面元素;

7、否则,为所述当前页面元素生成样式内容,并根据所述样式内容渲染所述当前页面元素;

8、根据对所述目标页面中的各页面元素的渲染结果,得到对所述目标页面的渲染结果并据此展示所述目标页面。

9、本说明书一个或多个实施例提供的一种页面渲染方法,应用于服务端,所述方法包括:

10、启动对目标页面的样式内容生成过程;

11、为所述目标页面中的当前页面元素生成样式内容;

12、在样式内容查询数据中相应进行记录,以表示所述服务端已为所述当前页面元素生成了样式内容;

13、将所述样式内容查询数据下发给客户端,以便所述客户端在需要渲染页面时,根据所述样式内容查询数据查询所述服务端是否已为所述页面中的页面元素生成了样式内容,若是,则由所述客户端获取所述服务端已生成的所述样式内容用于所述渲染。

14、本说明书一个或多个实施例提供的一种页面渲染装置,应用于客户端,所述装置包括:

15、页面渲染启动模块,响应于针对目标页面的页面展示请求操作,启动对所述目标页面的渲染过程;

16、服务端样式判断模块,判断服务端是否已为所述目标页面中的当前页面元素生成了样式内容;

17、服务端样式复用模块,若是,则根据所述服务端已生成的所述样式内容,渲染所述当前页面元素;

18、客户端样式生成模块,否则,为所述当前页面元素生成样式内容,并根据所述样式内容渲染所述当前页面元素;

19、目标页面展示模块,根据对所述目标页面中的各页面元素的渲染结果,得到对所述目标页面的渲染结果并据此展示所述目标页面。

20、本说明书一个或多个实施例提供的一种页面渲染装置,应用于服务端,所述装置包括:

21、样式生成启动模块,启动对目标页面的样式内容生成过程;

22、样式内容生成模块,为所述目标页面中的当前页面元素生成样式内容;

23、查询数据记录模块,在样式内容查询数据中相应进行记录,以表示所述服务端已为所述当前页面元素生成了样式内容;

24、查询数据下发模块,将所述样式内容查询数据下发给客户端,以便所述客户端在需要渲染页面时,根据所述样式内容查询数据查询所述服务端是否已为所述页面中的页面元素生成了样式内容,若是,则由所述客户端获取所述服务端已生成的所述样式内容用于所述渲染。

25、本说明书一个或多个实施例提供的一种页面渲染设备,应用于客户端,所述设备包括:

26、至少一个处理器;以及,

27、与所述至少一个处理器通信连接的存储器;其中,

28、所述存储器存储有可被所述至少一个处理器执行的指令,所述指令被所述至少一个处理器执行,以使所述至少一个处理器能够:

29、响应于针对目标页面的页面展示请求操作,启动对所述目标页面的渲染过程;

30、判断服务端是否已为所述目标页面中的当前页面元素生成了样式内容;

31、若是,则根据所述服务端已生成的所述样式内容,渲染所述当前页面元素;

32、否则,为所述当前页面元素生成样式内容,并根据所述样式内容渲染所述当前页面元素;

33、根据对所述目标页面中的各页面元素的渲染结果,得到对所述目标页面的渲染结果并据此展示所述目标页面。

34、本说明书一个或多个实施例提供的一种页面渲染设备,应用于服务端,所述设备包括:

35、至少一个处理器;以及,

36、与所述至少一个处理器通信连接的存储器;其中,

37、所述存储器存储有可被所述至少一个处理器执行的指令,所述指令被所述至少一个处理器执行,以使所述至少一个处理器能够:

38、启动对目标页面的样式内容生成过程;

39、为所述目标页面中的当前页面元素生成样式内容;

40、在样式内容查询数据中相应进行记录,以表示所述服务端已为所述当前页面元素生成了样式内容;

41、将所述样式内容查询数据下发给客户端,以便所述客户端在需要渲染页面时,根据所述样式内容查询数据查询所述服务端是否已为所述页面中的页面元素生成了样式内容,若是,则由所述客户端获取所述服务端已生成的所述样式内容用于所述渲染。

42、本说明书一个或多个实施例提供的一种非易失性计算机存储介质,应用于客户端,所述介质存储有计算机可执行指令,所述计算机可执行指令设置为:

43、响应于针对目标页面的页面展示请求操作,启动对所述目标页面的渲染过程;

44、判断服务端是否已为所述目标页面中的当前页面元素生成了样式内容;

45、若是,则根据所述服务端已生成的所述样式内容,渲染所述当前页面元素;

46、否则,为所述当前页面元素生成样式内容,并根据所述样式内容渲染所述当前页面元素;

本文档来自技高网...

【技术保护点】

1.一种页面渲染方法,应用于客户端,所述方法包括:

2.如权利要求1所述的方法,所述判断服务端是否已为所述目标页面中的当前页面元素生成了样式内容,具体包括:

3.如权利要求2所述的方法,所述样式内容查询数据包括哈希表,用于记录服务端已为其生成了样式内容的页面元素的描述信息;

4.如权利要求1所述的方法,所述判断服务端是否已为所述目标页面中的当前页面元素生成了样式内容之前,所述方法还包括:

5.如权利要求4所述的方法,所述元素样式关系数据还用于保存为页面元素生成的样式内容;

6.如权利要求3或4所述的方法,所述描述信息包括对应的页面元素对应的以下至少一种信息:设计Token信息、组件名称、路径信息。

7.如权利要求1所述的方法,所述客户端处于第一用户的终端上;

8.如权利要求7所述的方法,对于同一个页面元素,所述第二用户请求为所述第一用户生成所述样式内容,与所述第一用户的终端能够自行为所述同一个页面元素生成的样式内容不同。

9.如权利要求1~8任一项所述的方法,所述为所述当前页面元素生成样式内容,具体包括:

10.一种页面渲染方法,应用于服务端,所述方法包括:

11.一种页面渲染装置,应用于客户端,所述装置包括:

12.如权利要求11所述的装置,所述服务端样式判断模块,判断本地是否存在服务端下发的样式内容查询数据;

13.如权利要求12所述的装置,所述样式内容查询数据包括哈希表,用于记录服务端已为其生成了样式内容的页面元素的描述信息;

14.如权利要求11所述的装置,还包括:

15.如权利要求14所述的装置,所述元素样式关系数据还用于保存为页面元素生成的样式内容;

16.如权利要求13或14所述的装置,所述描述信息包括对应的页面元素对应的以下至少一种信息:设计Token信息、组件名称、路径信息。

17.如权利要求11所述的装置,所述客户端处于第一用户的终端上;

18.如权利要求17所述的装置,对于同一个页面元素,所述第二用户请求为所述第一用户生成所述样式内容,与所述第一用户的终端能够自行为所述同一个页面元素生成的样式内容不同。

19.如权利要求11~18任一项所述的装置,所述客户端样式生成模块,通过运行所述目标页面的脚本代码,动态地为所述当前页面元素生成样式内容。

20.一种页面渲染装置,应用于服务端,所述装置包括:

21.一种页面渲染设备,应用于客户端,所述设备包括:

22.一种页面渲染设备,应用于服务端,所述设备包括:

...

【技术特征摘要】

1.一种页面渲染方法,应用于客户端,所述方法包括:

2.如权利要求1所述的方法,所述判断服务端是否已为所述目标页面中的当前页面元素生成了样式内容,具体包括:

3.如权利要求2所述的方法,所述样式内容查询数据包括哈希表,用于记录服务端已为其生成了样式内容的页面元素的描述信息;

4.如权利要求1所述的方法,所述判断服务端是否已为所述目标页面中的当前页面元素生成了样式内容之前,所述方法还包括:

5.如权利要求4所述的方法,所述元素样式关系数据还用于保存为页面元素生成的样式内容;

6.如权利要求3或4所述的方法,所述描述信息包括对应的页面元素对应的以下至少一种信息:设计token信息、组件名称、路径信息。

7.如权利要求1所述的方法,所述客户端处于第一用户的终端上;

8.如权利要求7所述的方法,对于同一个页面元素,所述第二用户请求为所述第一用户生成所述样式内容,与所述第一用户的终端能够自行为所述同一个页面元素生成的样式内容不同。

9.如权利要求1~8任一项所述的方法,所述为所述当前页面元素生成样式内容,具体包括:

10.一种页面渲染方法,应用于服务端,所述方法包括:

11.一种页面渲染装置,应用于客户端,所述装置包括:

...

【专利技术属性】
技术研发人员:蒋吉麟
申请(专利权)人:支付宝杭州信息技术有限公司
类型:发明
国别省市:

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

1