渲染方法、装置、设备及存储介质与流程

专利检索2025-11-02  7


本发明涉及页面渲染,尤其涉及一种渲染方法、装置、设备及存储介质。


背景技术:

1、在前端技术发展迅速的今天,vue与react裹挟下的组件化开发模式愈发盛行,模块化语法开发模式也是层出不穷。项目的架构也随着不断的开发变得极其臃肿进而难以维护。而现有的页面渲染方式一般为客户端渲染(client side render,csr),请求流程大概是:访问url,服务器返回html页面,但是没有dom结构,客户端先渲染html页面,如已知的js文件,然后再请求数据,在服务端返回请求的数据后,解析json数据,并生成dom结构进行渲染。而 csr模式的请求执行顺序至少包含两个来回(空的html页面和数据的获取渲染),存在首屏内容到达时间较长的弊端,也就是常说的白屏时间较长。毕竟先渲染的是一个空白的html结构,然后再发送请求获取相关的页面数据信息进行渲染。

2、上述内容仅用于辅助理解本发明的技术方案,并不代表承认上述内容是现有技术。


技术实现思路

1、本发明的主要目的在于提供了一种渲染方法、装置、设备及存储介质,旨在解决现有技术采用客户端渲染存在首屏内容到达时间较长的技术问题。

2、为实现上述目的,本发明提供了一种渲染方法,所述方法包括以下步骤:

3、根据浏览器发起的首屏请求中的请求参数获取待展示页面;

4、获取所述待展示页面对应的页面渲染数据;

5、将所述页面渲染数据转换为html字符串;

6、将所述html字符串发送至所述浏览器,以使所述浏览器根据所述 html字符串进行页面渲染。

7、可选地,所述将所述页面渲染数据转换为html字符串的步骤,包括:

8、确定所述页面渲染数据中的静态数据;

9、为所述静态数据添加静态标记,以使所述浏览器根据所述静态标记识别所述静态数据;

10、根据所述静态标记将所述页面渲染数据转换为html字符串。

11、可选地,所述获取所述待展示页面对应的页面渲染数据的步骤,包括:

12、获取所述待展示页面中的请求信息;

13、根据所述请求信息生成网络请求,并根据所述网络请求获取页面渲染数据。

14、可选地,所述根据浏览器发起的首屏请求中的请求参数获取待展示页面的步骤,包括:

15、获取浏览器发起的访问请求,判断所述访问请求是否为首屏请求;

16、在所述访问请求为所述首屏请求时,根据浏览器发起的首屏请求中的请求参数获取待展示页面。

17、可选地,所述在所述访问请求为所述首屏请求时,根据浏览器发起的首屏请求中的请求参数获取待展示页面的步骤,包括:

18、在所述访问请求为所述首屏请求时,判断预设缓存列表中是否存在所述首屏请求对应的html字符串;

19、若不存在,则根据浏览器发起的首屏请求中的请求参数获取待展示页面。

20、此外,为实现上述目的,本发明还提供了一种渲染方法,所述方法包括以下步骤:

21、接收服务器发送的html字符串;

22、将所述html字符串转换为dom数据;

23、根据所述dom数据进行页面渲染。

24、可选地,所述根据所述dom数据进行页面渲染的步骤,包括:

25、对所述dom数据中带有静态标记的数据进行激活处理,获得激活后的 dom数据;

26、根据所述激活后的dom数据和所述dom数据中的动态数据进行页面渲染。

27、可选地,所述接收服务器发送的html字符串的步骤之前,还包括:

28、获取待发送的访问请求,并将所述访问请求发送至对应的服务器。

29、可选地,所述获取待发送的访问请求,并将所述访问请求发送至对应的服务器的步骤之后,还包括:

30、在预设时长内未接收到所述服务器反馈的html字符串时;

31、判断当前是否使用预设引擎;

32、在使用预设引擎时,通过预设引擎将所述访问请求发送至服务器,获得服务器反馈的页面数据;

33、根据所述预设引擎对所述页面数据进行渲染。

34、可选地,所述判断当前是否使用预设引擎的步骤之后,还包括:

35、在当前未使用预设引擎时,将所述访问请求发送至服务器,获得服务器反馈的页面数据;

36、通过客户端渲染模式渲染所述页面数据。

37、此外,为实现上述目的,本发明还提供一种渲染装置,所述装置包括:

38、获取模块,用于根据浏览器发起的首屏请求中的请求参数获取待展示页面;

39、页面渲染数据模块,用于获取所述待展示页面对应的页面渲染数据;

40、转换模块,用于将所述页面渲染数据转换为html字符串;

41、发送模块,用于将所述html字符串发送至所述浏览器,以使所述浏览器根据所述html字符串进行页面渲染。

42、可选地,所述转换模块,还用于确定所述页面渲染数据中的静态数据;

43、为所述静态数据添加静态标记,以使所述浏览器根据所述静态标记识别所述静态数据;

44、根据所述静态标记将所述页面渲染数据转换为html字符串。

45、可选地,所述页面渲染数据模块,还用于获取所述待展示页面中的请求信息;

46、根据所述请求信息生成网络请求,并根据所述网络请求获取页面渲染数据。

47、可选地,所述获取模块,还用于获取浏览器发起的访问请求,判断所述访问请求是否为首屏请求;

48、在所述访问请求为所述首屏请求时,根据浏览器发起的首屏请求中的请求参数获取待展示页面。

49、可选地,所述获取模块,还用于在所述访问请求为所述首屏请求时,判断预设缓存列表中是否存在所述首屏请求对应的html字符串;

50、若不存在,则根据浏览器发起的首屏请求中的请求参数获取待展示页面。

51、此外,为实现上述目的,本发明还提供一种渲染装置,所述装置包括:

52、接收模块,用于接收服务器发送的html字符串;

53、dom数据,用于将所述html字符串转换为dom数据;

54、页面渲染模块,用于根据所述dom数据进行页面渲染。

55、可选地,所述页面渲染模块,还用于对所述dom数据中带有静态标记的数据进行激活处理,获得激活后的dom数据;

56、根据所述激活后的dom数据和所述dom数据中的动态数据进行页面渲染。

57、可选地,所述接收模块,还用于获取待发送的访问请求,并将所述访问请求发送至对应的服务器。

58、可选地,所述接收模块,还用于在预设时长内未接收到所述服务器反馈的html字符串时;

59、判断当前是否使用预设引擎;

60、在使用预设引擎时,通过预设引擎将所述访问请求发送至服务器,获得服务器反馈的页面数据;

61、根据所述预设引擎对所述页面数据进行渲染。

62、可选地,所述接收模块,还用于在当前未使用预设引擎时,将所述访问请求发送至服务器,获得服务器反馈的页面数据;

63、通过客户端渲染模式渲染所述页面数据。

64、此外,为实现上述目的,本发明还提出一种渲染设备,所述设备包括:存储器、处理器及存储在所述存储器上并可在所述处理器上运行的渲染程序,所述渲染程序配置为实现如上文所述的渲染方法的步骤。

65、此外,为实现上述目的,本发明还提出一种存储介质,所述存储介质上存储有渲染程序,所述渲染程序被处理器执行时实现如上文所述的渲染方法的步骤。

66、本发明根据浏览器发起的首屏请求中的请求参数获取待展示页面;获取所述待展示页面对应的页面渲染数据;将所述页面渲染数据转换为html字符串;将所述html字符串发送至所述浏览器,以使所述浏览器根据所述 html字符串进行页面渲染。由于本发明是根据浏览器发起的首屏请求中的请求参数获取待展示页面,并获取待展示页面对应的页面渲染数据,将页面渲染数据转换为html字符串发送至浏览器,以使浏览器根据html字符串进行页面渲染。解决了现有的单页应用首屏内容到达时间较长的技术问题。


技术特征:

1.一种渲染方法,其特征在于,所述渲染方法包括:

2.如权利要求1所述的渲染方法,其特征在于,所述将所述页面渲染数据转换为html字符串的步骤,包括:

3.如权利要求1所述的渲染方法,其特征在于,所述获取所述待展示页面对应的页面渲染数据的步骤,包括:

4.如权利要求1所述的渲染方法,其特征在于,所述根据浏览器发起的首屏请求中的请求参数获取待展示页面的步骤,包括:

5.如权利要求4所述的渲染方法,其特征在于,所述在所述访问请求为所述首屏请求时,根据浏览器发起的首屏请求中的请求参数获取待展示页面的步骤,包括:

6.一种渲染方法,其特征在于,应用于浏览器,所述渲染方法包括:

7.一种渲染装置,其特征在于,所述渲染装置包括:

8.一种渲染装置,其特征在于,所述渲染装置包括:

9.一种渲染设备,其特征在于,所述设备包括:存储器、处理器及存储在所述存储器上并可在所述处理器上运行的渲染程序,所述渲染程序配置为实现如权利要求1至5和/或6中任一项所述的渲染方法的步骤。

10.一种存储介质,其特征在于,所述存储介质上存储有渲染程序,所述渲染程序被处理器执行时实现如权利要求1至5和/或6任一项所述的渲染方法的步骤。


技术总结
本发明属于计算机领域,公开了一种渲染方法、装置、设备及存储介质。该方法包括:根据浏览器发起的首屏请求中的请求参数获取待展示页面;获取所述待展示页面对应的页面渲染数据;将所述页面渲染数据转换为HTML字符串;将所述HTML字符串发送至所述浏览器,以使所述浏览器根据所述HTML字符串进行页面渲染。由于本发明是根据浏览器发起的首屏请求中的请求参数获取待展示页面,并获取待展示页面对应的页面渲染数据,将页面渲染数据转换为HTML字符串发送至浏览器,以使浏览器根据HTML字符串进行页面渲染。解决了现有的单页应用首屏内容到达时间长的技术问题。

技术研发人员:韩志臻
受保护的技术使用者:北京奇虎科技有限公司
技术研发日:
技术公布日:2024/5/29
转载请注明原文地址:https://win.8miu.com/read-1158198.html

最新回复(0)