一种网页渲染方法、装置、终端和存储介质制造方法及图纸

技术编号:39318845 阅读:15 留言:0更新日期:2023-11-12 16:00
本发明专利技术实施例公开了一种网页渲染方法、装置、终端和存储介质,可以接收来自客户端的网页请求,并基于所述网页请求确定待渲染内容;将所述待渲染内容拆分为多个待渲染子内容,所述待渲染子内容与目标网页上的页面元素相对应;构建内容编译器,并基于所述内容编译器将所述待渲染子内容编译为字符串拼接函数;基于所述字符串拼接函数,生成所述页面元素对应的目标字符串;将所述目标字符串发送至客户端进行网页渲染,以便所述客户端基于所述目标字符串显示网页渲染后的目标网页。这种渲染方案节约了系统资源开销,从而大幅提升了网页渲染性能。能。能。

【技术实现步骤摘要】
一种网页渲染方法、装置、终端和存储介质


[0001]本专利技术涉及通讯
,具体涉及一种网页渲染方法、装置、终端和存储介质。

技术介绍

[0002]随着移动互联网的普及和5G技术对数据传输的显著提速,网页被越来越多的应用于各种互联网产品中。因为节约客户端资源、前端耗时少、更有利于搜索引擎优化等优点,服务端渲染技术的采用也越来越广泛。但传统的服务端渲染技术是基于虚拟DOM的,需要在服务端先把组件编译成虚拟DOM,再根据所述虚拟DOM来生成用来渲染网页的字符串,这个过程需要消耗额外的内存和CPU资源,同时,传统的服务端渲染因为需要生成虚拟DOM,所以需要客户端生成虚拟DOM与服务端生成的DOM结构进行比较,导致客户端加载的javascript脚本的文件体积较大。传统的渲染方式对性能会造成一定的负面影响,尤其是在大型应用中,性能影响更为突出。

技术实现思路

[0003]本专利技术实施例提供一种网页渲染方法、装置、终端和存储介质,可以显著提高服务端渲染的性能。
[0004]本申请实施例提供一种网页渲染方法,所述方法应用于服务器,所述方法包括如下步骤:接收来自客户端的网页请求,并基于所述网页请求确定待渲染内容;将所述待渲染内容拆分为多个待渲染子内容,所述待渲染子内容与目标网页上的页面元素相对应;构建内容编译器,并基于所述内容编译器将所述待渲染子内容编译为字符串拼接函数;基于所述字符串拼接函数,生成所述页面元素对应的目标字符串;将所述目标字符串发送至客户端进行网页渲染,以便所述客户端基于所述目标字符串显示网页渲染后的目标网页。
[0005]相应的,本申请实施例提供一种网页渲染装置,应用于服务端,包括:第一接收单元,用于接收来自客户端的网页请求,并基于所述网页请求确定待渲染内容;拆分单元,用于将所述待渲染内容拆分为多个待渲染子内容,所述待渲染子内容与目标网页上的页面元素相对应;构建单元,用于构建内容编译器,并基于所述内容编译器将所述待渲染子内容编译为字符串拼接函数;生成单元,用于基于所述字符串拼接函数,生成所述页面元素对应的目标字符串;第一发送单元,用于将所述目标字符串发送至客户端进行网页渲染,以便所述客户端基于所述目标字符串显示网页渲染后的目标网页。
[0006]可选的,在本申请的一些实施例中,所述装置还可以包括接收子单元、确定子单元和第一发送子单元,如下:所述接收子单元,用于接收来自客户端的交互请求;所述确定子单元,用于确定实现所述交互请求的目标事件处理文件;所述第一发送子单元,用于将所述目标事件处理文件发送给所述客户端,以便所述客户端加载所述目标事件处理文件,并基于所述目标事件处理文件在所述目标网页上执行目标操作可选的,在本申请的一些实施例中,所述装置还可以包括第一构建子单元、第二构建子单元和绑定子单元,如下:所述第一构建子单元,用于构建用于指示交互事件被触发时所执行操作的事件处理文件集合,所述事件处理文件集合中包括多个事件处理文件;所述第二构建子单元,用于构建所述事件处理文件集合对应的事件处理目录,所述事件处理目录包括所述事件处理文件对应的文件索引、以及所述文件索引对应所述事件处理文件在所述服务端的地址;所述绑定子单元,用于将所述文件索引与所述目标网页中多个可交互页面元素进行绑定,得到所述文件索引与所述可交互页面元素之间的绑定关系。
[0007]可选的,在本申请的一些实施例中,所述确定子单元,具体可以用于基于所述交互请求确定客户端交互操作所针对的目标页面元素;基于所述绑定关系,确定与所述目标页面元素相绑定的目标文件索引;基于所述事件处理目录,确定所述目标文件索引对应的目标事件处理文件在所述服务端的目标地址;基于所述目标地址,获取所述目标事件处理文件。
[0008]本申请实施例还提供一种网页渲染方法,所述方法应用于客户端,所述方法包括如下步骤:向服务端发送网页请求;接收来自所述服务端的目标字符串,所述目标字符串是所述服务端通过执行内容编译器生成的字符串拼接函数得到的;基于所述目标字符串显示网页渲染后的目标网页。
[0009]相应的,本申请实施例提供一种网页渲染装置,应用于客户端,包括:第二发送单元,用于向服务端发送网页请求;第二接收单元,用于接收来自所述服务端的目标字符串,所述目标字符串是所述服务端通过执行内容编译器生成的字符串拼接函数得到的;显示单元,用于基于所述目标字符串显示网页渲染后的目标网页。
[0010]可选的,在本申请的一些实施例中,所述显示单元包括转换子单元和显示子单元,如下;所述转换子单元,用于将所述目标字符串转换为DOM元素;所述显示子单元,用于基于所述DOM元素显示网页渲染后的目标网页。
[0011]可选的,在本申请的一些实施例中,所述装置还可以包括第二发送子单元、加载子单元和执行子单元,如下:所述第二发送子单元,用于响应于用户针对所述目标网页中目标页面元素的交互
操作,向所述服务端发送交互请求;所述加载子单元,用于加载来自所述服务端的目标事件处理文件;所述执行子单元,用于基于所述目标事件处理文件,在所述目标网页上执行目标操作。
[0012]本申请实施例提供的一种电子设备,包括处理器和存储器,所述存储器存储有多条指令,所述处理器加载所述指令,以执行本申请实施例提供的网页渲染方法中的步骤。
[0013]本申请实施例还提供一种计算机可读存储介质,其上存储有计算机程序,其中,所述计算机程序被处理器执行时实现本申请实施例提供的网页渲染方法中的步骤。
[0014]此外,本申请实施例还提供一种计算机程序产品,包括计算机程序或指令,该计算机程序或指令被处理器执行时实现本申请实施例提供的网页渲染方法中的步骤。
[0015]本申请实施例提供了一种网页渲染方法以及相关设备,可以接收来自客户端的网页请求,并基于所述网页请求确定待渲染内容;将所述待渲染内容拆分为多个待渲染子内容,所述待渲染子内容与目标网页上的页面元素相对应;构建内容编译器,并基于所述内容编译器将所述待渲染子内容编译为字符串拼接函数;基于所述字符串拼接函数,生成所述页面元素对应的目标字符串;将所述目标字符串发送至客户端进行网页渲染,以便所述客户端基于所述目标字符串显示网页渲染后的目标网页。本申请可以在服务端渲染前端组件为html字符串的过程中,不使用虚拟DOM技术,而是把待渲染内容拆分为多个待渲染子内容,通过内容编译器,把待渲染子内容直接编译为字符串拼接函数,拼接函数执行后直接得到用于渲染网页的目标字符串,这种方案由于服务端没有使用虚拟DOM技术使得渲染性能大幅提升。同时这种方案由于服务端没有使用虚拟DOM技术,所以不需要客户端生成虚拟DOM与服务端的结构进行比较,减少了javascript脚本的体积大小。另外,本申请在进行网页交互事件处理时,先将交互事件构建为一个个独立的事件处理文件,同时构建事件处理目录,该事件处理目录包含事件处理文件的文件索引及事件处理文件在服务端的地址。在客户端进行网页请求时,只加载事件处理目录,并确定可交互网页元素与事件处理文件之间的绑定关系,当用户针对可本文档来自技高网
...

【技术保护点】

【技术特征摘要】
1.一种网页渲染方法,其特征在于,应用于服务端,包括:接收来自客户端的网页请求,并基于所述网页请求确定待渲染内容;将所述待渲染内容拆分为多个待渲染子内容,所述待渲染子内容与目标网页上的页面元素相对应;构建内容编译器,并基于所述内容编译器将所述待渲染子内容编译为字符串拼接函数;基于所述字符串拼接函数,生成所述页面元素对应的目标字符串;将所述目标字符串发送至客户端进行网页渲染,以便所述客户端基于所述目标字符串显示网页渲染后的目标网页。2.根据权利要求1所述的网页渲染方法,其特征在于,将所述目标字符串发送至客户端进行网页渲染,以便所述客户端基于所述目标字符串显示网页渲染后的目标网页之后,还包括:接收来自客户端的交互请求;确定实现所述交互请求的目标事件处理文件;将所述目标事件处理文件发送给所述客户端,以便所述客户端加载所述目标事件处理文件,并基于所述目标事件处理文件在所述目标网页上执行目标操作。3.根据权利要求2所述的网页渲染方法,其特征在于,接收来自客户端的交互请求之前,还包括:构建用于指示交互事件被触发时所执行操作的事件处理文件集合,所述事件处理文件集合中包括多个事件处理文件;构建所述事件处理文件集合对应的事件处理目录,所述事件处理目录包括所述事件处理文件对应的文件索引、以及所述文件索引对应所述事件处理文件在所述服务端的地址;将所述文件索引与所述目标网页中多个可交互页面元素进行绑定,得到所述文件索引与所述可交互页面元素之间的绑定关系。4.根据权利要求3所述的网页渲染方法,其特征在于,确定实现所述交互请求的目标事件处理文件,包括:基于所述交互请求确定客户端交互操作所针对的目标页面元素;基于所述绑定关系,确定与所述目标页面元素相绑定的目标文件索引;基于所述事件处理目录,确定所述目标文件索引对应的目标事件处理文件在所述服务端的目标地址;基于所述目标地址,获取所述目标事件处理文件。5.一种网页渲染方法,其特征在于,应用于客户端,包括:向服务端发送网页请求;接收来自所述服务端的目标字符串,所述目标字符串是所述服务端通过执行内容编译器生成的字符串拼接函数得到的;基于所述...

【专利技术属性】
技术研发人员:张宇昂
申请(专利权)人:腾讯科技深圳有限公司
类型:发明
国别省市:

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

1