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

页面渲染方法、装置、计算机设备和存储介质制造方法及图纸

技术编号:40192046 阅读:6 留言:0更新日期:2024-01-26 23:54
本申请涉及一种页面渲染方法、装置、计算机设备和存储介质,涉及计算机技术领域,可应用于金融技术领域或其他技术领域。方法包括:响应于对目标页面的访问请求,向服务器发送目标页面的页面地址,使服务器根据页面地址向客户端发送HTML文件;其中,HTML文件包含目标页面的DOM信息,DOM信息包括目标页面对应的静态数据的静态存储路径,以及目标页面对应的动态数据;根据静态存储路径,获取静态数据;根据静态数据和动态数据,渲染出目标页面。该方法中,服务器将完整的HTML文件返回给客户端,加快了客户端渲染页面的效率;另外HTML文件中包含DOM信息,便于搜索引擎抓取和索引页面的内容,进而提高SEO优化效果。

【技术实现步骤摘要】

本申请涉及计算机,特别是涉及一种页面渲染方法、装置、计算机设备和存储介质,可应用于金融或者其他。


技术介绍

1、全球广域网(world wide web,web)应用程序是指可以通过web访问的应用程序。目前大多数web应用程序一般采用react、vue等前端框架来构建用户界面。前端用于构建用户界面显示框架,后端负责将用户界面的显示内容进行渲染,以得到显示界面。

2、现有技术中通常采用客户端渲染的方式,即服务器将页面参数和页面入口文件打包生成脚本(javascript,js)文件,并将该js文件嵌入到超文本标记语言(hyper textmarkup language,html)文件中;当客户端访问某个页面时,会向服务器请求一个html文件,在该html文件中获取js文件,并利用获取的js文件在客户端动态生成层叠样式表(cascading style sheets,css)文件和文档对象模型(document object model,dom)文件,利用css文件和dom文件来渲染页面的显示内容。

3、这种基于客户端渲染的方式,一方面渲染页面的效率不高;另一方面由于初始页面加载时通常只有一个简单的html骨架,搜索引擎无法正确抓取和索引页面的内容,不利于搜索引擎优化(search engine optimization,seo)。


技术实现思路

1、基于此,有必要针对上述技术问题,提供一种页面渲染方法、装置、计算机设备和存储介质,能够提高渲染页面的效率以及seo优化效果。

2、第一方面,本申请提供了一种页面渲染方法。该方法应用于客户端,所述方法包括:

3、响应于对目标页面的访问请求,向服务器发送所述目标页面的页面地址,以使所述服务器根据所述页面地址,向客户端发送超文本标记语言html文件;其中,html文件包含所述目标页面的文档对象模型dom信息,dom信息包括所述目标页面对应的静态数据的静态存储路径,以及所述目标页面对应的动态数据;

4、根据所述静态存储路径,获取所述目标页面对应的静态数据;

5、根据所述静态数据和所述动态数据,渲染出所述目标页面。

6、在其中一个实施例中,所述根据所述静态存储路径,获取所述目标页面对应的静态数据,包括:

7、向服务器发送包括静态存储路径的静态数据获取请求,以使所述服务器根据所述静态存储路径从静态资源文件中获取所述目标页面对应的静态数据,并反馈;

8、获取所述服务器反馈的所述目标页面对应的静态数据。

9、在其中一个实施例中,所述根据所述静态数据和所述动态数据,渲染出所述目标页面,包括:

10、根据所述静态数据,构建样式树;

11、将所述动态数据与所述样式树进行关联;

12、根据所述样式树、所述动态数据,以及所述动态数据与所述样式树之间的关联关系,渲染出所述目标页面。

13、第二方面,本申请提供了另一种页面渲染方法。该方法应用于服务器,所述方法包括:

14、获取客户端响应于对目标页面的访问请求所发送的目标页面的页面地址;

15、根据所述页面地址,获取所述目标页面对应的动态数据;

16、将所述动态数据加载到html文件中;其中,html文件包含所述目标页面的dom信息,dom信息包括所述目标页面对应的静态数据的静态存储路径,以及所述目标页面对应的动态数据;

17、将所述html文件发送至所述客户端,以使所述客户端根据所述静态存储路径获取所述目标页面对应的静态数据,并根据所述静态数据和所述动态数据,渲染出所述目标页面。

18、在其中一个实施例中,所述根据所述页面地址,获取所述目标页面对应的动态数据,包括:

19、获取所述页面地址对应的动态数据接口文件;

20、从所述动态数据接口文件中提取动态存储路径;

21、根据所述动态存储路径,从数据库中获取与所述目标页面对应的动态数据。

22、在其中一个实施例中,所述将所述动态数据加载到html文件中,包括:

23、将所述动态数据转换为目标字符串;

24、将所述目标字符串加载到html文件中。

25、在其中一个实施例中,所述将所述html文件发送至所述客户端之后,所述方法还包括:

26、获取所述客户端发送的静态数据获取请求;

27、根据所述静态数据获取请求中的静态存储路径,从静态资源文件中获取与所述目标页面对应的静态数据;

28、向所述客户端反馈所述静态数据。

29、第三方面,本申请还提供了一种页面渲染装置,所述装置包括:

30、第一发送模块,用于响应于对目标页面的访问请求,向服务器发送所述目标页面的页面地址,以使所述服务器根据所述页面地址,向客户端发送html文件;其中,html文件包含所述目标页面的dom信息,dom信息包括所述目标页面对应的静态数据的静态存储路径,以及所述目标页面对应的动态数据;

31、第一获取模块,用于根据所述静态存储路径,获取所述目标页面对应的静态数据;

32、渲染模块,用于根据所述静态数据和所述动态数据,渲染出所述目标页面。

33、第四方面,本申请还提供了另一种页面渲染装置,所述装置包括:

34、第二获取模块,用于获取客户端响应于对目标页面的访问请求所发送的目标页面的页面地址;

35、第三获取模块,用于根据所述页面地址,获取所述目标页面对应的动态数据;

36、加载模块,用于将所述动态数据加载到html文件中;其中,html文件包含所述目标页面的dom信息,dom信息包括所述目标页面对应的静态数据的静态存储路径,以及所述目标页面对应的动态数据;

37、第二发送模块,用于将所述html文件发送至所述客户端,以使所述客户端根据所述静态存储路径获取所述目标页面对应的静态数据,并根据所述静态数据和所述动态数据,渲染出所述目标页面。

38、第五方面,本申请还提供了一种计算机设备。所述计算机设备包括存储器和处理器,所述存储器存储有计算机程序,所述处理器执行所述计算机程序时实现以下步骤:

39、响应于对目标页面的访问请求,向服务器发送所述目标页面的页面地址,以使所述服务器根据所述页面地址,向客户端发送html文件;其中,html文件包含所述目标页面的dom信息,dom信息包括所述目标页面对应的静态数据的静态存储路径,以及所述目标页面对应的动态数据;

40、根据所述静态存储路径,获取所述目标页面对应的静态数据;

41、根据所述静态数据和所述动态数据,渲染出所述目标页面。

42、第六方面,本申请还提供了另一种计算机设备。所述计算机设备包括存储器和处理器,所述存储器存储有计算机程序,所述处理器执行所述计算机程序时实现以下步骤:

本文档来自技高网...

【技术保护点】

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

2.根据权利要求1所述的方法,其特征在于,所述根据所述静态存储路径,获取所述目标页面对应的静态数据,包括:

3.根据权利要求1所述的方法,其特征在于,所述根据所述静态数据和所述动态数据,渲染出所述目标页面,包括:

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

5.根据权利要求4所述的方法,其特征在于,所述根据所述页面地址,获取所述目标页面对应的动态数据,包括:

6.根据权利要求4所述的方法,其特征在于,所述将所述动态数据加载到HTML文件中,包括:

7.根据权利要求4所述的方法,其特征在于,所述将所述HTML文件发送至所述客户端之后,所述方法还包括:

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

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

10.一种计算机设备,包括存储器和处理器,所述存储器存储有计算机程序,其特征在于,所述处理器执行所述计算机程序时实现权利要求1至7中任一项所述的方法的步骤。

11.一种计算机可读存储介质,其上存储有计算机程序,其特征在于,所述计算机程序被处理器执行时实现权利要求1至7中任一项所述的方法的步骤。

12.一种计算机程序产品,包括计算机程序,其特征在于,该计算机程序被处理器执行时实现权利要求1至7中任一项所述的方法的步骤。

...

【技术特征摘要】

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

2.根据权利要求1所述的方法,其特征在于,所述根据所述静态存储路径,获取所述目标页面对应的静态数据,包括:

3.根据权利要求1所述的方法,其特征在于,所述根据所述静态数据和所述动态数据,渲染出所述目标页面,包括:

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

5.根据权利要求4所述的方法,其特征在于,所述根据所述页面地址,获取所述目标页面对应的动态数据,包括:

6.根据权利要求4所述的方法,其特征在于,所述将所述动态数据加载到html文件中,包括:

7.根据权利要求4所述的方法,其特征在...

【专利技术属性】
技术研发人员:高亚萍罗涛赵海强颜佩琼
申请(专利权)人:中国工商银行股份有限公司
类型:发明
国别省市:

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

1