CN111368235B - 页面渲染和展示方法、装置、服务器、存储介质 - Google Patents
页面渲染和展示方法、装置、服务器、存储介质 Download PDFInfo
- Publication number
- CN111368235B CN111368235B CN202010116779.9A CN202010116779A CN111368235B CN 111368235 B CN111368235 B CN 111368235B CN 202010116779 A CN202010116779 A CN 202010116779A CN 111368235 B CN111368235 B CN 111368235B
- Authority
- CN
- China
- Prior art keywords
- page
- rendering
- block
- rendering mode
- current
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000009877 rendering Methods 0.000 title claims abstract description 321
- 238000000034 method Methods 0.000 title claims abstract description 66
- 238000005192 partition Methods 0.000 claims description 30
- 230000002194 synthesizing effect Effects 0.000 claims description 9
- 238000010586 diagram Methods 0.000 description 8
- 230000003068 static effect Effects 0.000 description 8
- 230000000903 blocking effect Effects 0.000 description 4
- 238000004590 computer program Methods 0.000 description 3
- 230000006870 function Effects 0.000 description 3
- 230000004044 response Effects 0.000 description 3
- 230000006978 adaptation Effects 0.000 description 2
- 230000005540 biological transmission Effects 0.000 description 2
- 238000013500 data storage Methods 0.000 description 2
- 238000000605 extraction Methods 0.000 description 2
- 230000000977 initiatory effect Effects 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 230000008569 process Effects 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 239000000835 fiber Substances 0.000 description 1
- 230000010354 integration Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 239000004065 semiconductor Substances 0.000 description 1
- 239000007787 solid Substances 0.000 description 1
- 230000001960 triggered effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本公开关于一种页面渲染和展示方法、装置、服务器、存储介质。该页面渲染方法,包括:根据当前页面的页面配置信息或当前页面的访问请求中所携带的标识信息,确定当前页面的页面渲染模式;根据所获取的当前页面中目标页面分块的页面分块配置信息,确定目标页面分块的页面分块渲染模式;基于页面渲染模式以及页面分块渲染模式,对当前页面中的所述目标页面分块进行渲染。由于该渲染模式针对目标页面分块进行分区块地渲染,并不需要一次性接收到页面的全部数据才能进行渲染,因此一次性渲染的数据量减少,从而相对于现有技术能够快速的进行响应,防止页面长时间处于白屏的状态。
Description
技术领域
本公开涉及计算机技术领域,尤其涉及一种页面渲染和展示方法、装置、服务器、存储介质。
背景技术
现如今,通过浏览器或应用APP的客户端访问各种网页已成为人们获取信息的重要渠道之一。信息服务的提供商为了向用户提供更好的服务,通常需要根据所提供的信息服务的类型对网页的页面进行渲染。
现有的页面渲染方式中,服务器通常需要在一次性接收到页面的全部数据之后,通过编程语言等方式将这些数据与模版合成为HTML文档的字符串,从而发送至用户终端进行页面展示。但是,这种页面渲染方式由于服务器需要一次性接收到页面的全部数据才能进行渲染,因此页面展示的响应时间通常较长,特别是在网络传输速度较慢的场景下,用户终端的网页页面可能会长时间处于白屏的状态。
发明内容
本公开提供一种页面渲染和展示方法、装置、服务器、存储介质以至少解决相关技术中,需要一次性接收到页面的全部数据才能进行渲染,导致页面展示的响应时间通常较长的问题。本公开的技术方案如下:
根据本公开实施例的第一方面,提供一种页面渲染方法,包括:
根据当前页面的页面配置信息或当前页面的访问请求中所携带的标识信息,确定所述当前页面的页面渲染模式;
根据所获取的所述当前页面中目标页面分块的页面分块配置信息,确定所述目标页面分块的页面分块渲染模式;
基于所述页面渲染模式以及所述页面分块渲染模式,对所述当前页面中的所述目标页面分块进行渲染。
根据本公开实施例的第二方面,提供一种页面展示方法,包括:
向服务器发送当前页面的访问请求,用于通过服务器基于所述当前页面的页面渲染模式以及所述当前页面中目标页面分块的页面分块渲染模式,对所述当前页面中的所述目标页面分块进行渲染,其中,服务器根据当前页面的页面配置信息或所述访问请求中所携带的标识信息,确定所述当前页面的页面渲染模式;服务器根据所获取的所述目标页面分块的页面分块配置信息,确定所述目标页面分块的页面分块渲染模式;
接收服务器对所述目标页面分块进行渲染后所生成的反馈数据,用于所述当前页面中所述目标页面分块的展示。
根据本公开实施例的第三方面,提供一种页面渲染装置,包括:
页面渲染模式确定单元,被配置为执行根据当前页面的页面配置信息或当前页面的访问请求中所携带的标识信息,确定所述当前页面的页面渲染模式;
页面分块渲染模式确定单元,被配置为执行根据所获取的所述当前页面中目标页面分块的页面分块配置信息,确定所述目标页面分块的页面分块渲染模式;
渲染单元,被配置为执行基于所述页面渲染模式以及所述页面分块渲染模式,对所述当前页面中的所述目标页面分块进行渲染。
根据本公开实施例的第四方面,提供一种页面展示装置,包括:
发送单元,被配置为执行向服务器发送当前页面的访问请求,用于通过服务器基于所述当前页面的页面渲染模式以及所述当前页面中目标页面分块的页面分块渲染模式,对所述当前页面中的所述目标页面分块进行渲染,其中,服务器根据当前页面的页面配置信息或所述访问请求中所携带的标识信息,确定所述当前页面的页面渲染模式;服务器根据所获取的所述目标页面分块的页面分块配置信息,确定所述目标页面分块的页面分块渲染模式;
接收单元,被配置为接收服务器对所述目标页面分块进行渲染后所生成的反馈数据,用于所述当前页面中所述目标页面分块的展示。
根据本公开实施例的第五方面,提供一种服务器,包括:
处理器;
用于存储所述处理器可执行指令的存储器;
其中,所述处理器被配置为执行所述指令,以实现如权利要求1至6中任一项所述的页面渲染方法。
根据本公开实施例的第六方面,提供一种存储介质,当所述存储介质中的指令由服务器的处理器执行时,使得所述服务器能够执行本公开实施例所提供的页面渲染方法,或本公开实施例所提供的页面展示方法。
根据本公开实施例的第七方面,提供一种计算机程序产品,当所述计算机程序产品在计算机上运行时,使得所述服务器能够执行本公开实施例所提供的页面渲染方法,或本公开实施例所提供的页面展示方法。
本公开的实施例提供的技术方案至少带来以下有益效果:
采用本公开实施例所提供的页面渲染方法,根据当前页面的页面配置信息或当前页面的访问请求中所携带的标识信息,确定当前页面的页面渲染模式;根据当前页面中目标页面分块的页面分块配置信息,确定目标页面分块的页面分块渲染模式;然后基于该页面渲染模式以及该页面分块渲染模式,对目标页面分块进行渲染。由于该渲染模式针对目标页面分块进行分区块地渲染,并不需要一次性接收到页面的全部数据才能进行渲染,因此一方面一次性渲染的数据量减少,另一方面可以对页面中的多个页面分块可以实现分批次的渲染,从而相对于现有技术能够快速的进行响应,防止页面长时间处于白屏的状态。
应当理解的是,以上的一般描述和后文的细节描述仅是示例性和解释性的,并不能限制本公开。
附图说明
此处的附图被并入说明书中并构成本说明书的一部分,示出了符合本公开的实施例,并与说明书一起用于解释本公开的原理,并不构成对本公开的不当限定。
图1是本公开实施例中的技术方案能够适用的一种应用场景,在该场景中,可以包括服务器和终端设备。
图2是根据一示例性实施例示出的页面渲染方法的具体流程示意图。
图3是根据一示例性实施例示出的页面展示方法的具体流程示意图。
图4是根据一示例性实施例示出的页面渲染装置的具体结构示意图。
图5是根据一示例性实施例示出的页面展示装置的具体结构示意图。
图6是根据一示例性实施例示出的服务器的具体结构示意图。
具体实施方式
为了使本领域普通人员更好地理解本公开的技术方案,下面将结合附图,对本公开实施例中的技术方案进行清楚、完整地描述。
需要说明的是,本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象,而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换,以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。
如前所述,现有的网页渲染方式中,服务器通常需要在一次性接收到页面的全部数据之后,才能通过编程语言等方式将这些数据与模版合成为HTML文档的字符串,用于页面的展示。但是,这种页面渲染方式由于服务器需要一次性接收到页面的全部数据才能进行渲染,因此页面展示的响应时间通常较长,特别是在网络传输速度较慢的场景下,用户终端的网页页面可能会长时间处于白屏的状态。
比如,现有的网页渲染方式中,待展示的页面中包括3个页面分块,服务器在渲染时需要一次性接收到这3个页面分块的全部数据,才能将其与模版合成为HTML文档的字符串,并发送至客户端用户终端进行展示,该方式页面展示的响应时间通常较长,尤其在网络传输速度较慢的场景下,该响应时间较长的问题更加明显,通常导致用户终端的网页页面长时间处于白屏的状态。
以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反,它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法等的例子。
图1所示为本公开实施例中的技术方案能够适用的一种应用场景,在该场景中,可以包括服务器10和终端设备20。
服务器10可以为应用服务器或者网站服务器。应用服务器例如可以为视频应用、直播应用、即时通讯应用或者新闻资讯应用等应用软件(Application,APP)的后台服务器,该应用服务器能够对页面或页面分块进行渲染,并所生成的反馈数据发送至终端设备20进行展示;网站服务器例如可以为各新闻网站的后台服务器。
终端设备20可以是诸如手机、电脑或平板电脑等终端或移动终端,终端设备20中可以安装与服务器10对应的应用软件,或者可以通过终端设备20中的浏览器进行网页展示。
以服务器10为视频应用的后台服务器为例,视频应用的后台服务器可以对页面或页面分块进行渲染,并将所生成的反馈数据发送至终端设备20中进行展示。
当然,本公开实施例提供的方法并不限用于图1所示的应用场景中,还可以用于其他可能的应用场景,对此本公开实施例并不进行限制。对于图1所示的应用场景的各个设备所能实现的功能将在后续的方法实施例中一并进行描述,在此先不过多赘述。
本公开实施例中网页设计人员在设计网页页面的时候,一方面可以根据页面应用场景的不同(如视频网页、资讯信息网页、购物的网页等)、终端设备类型、屏幕尺寸大小等情况,确定页面具体的页面渲染模式,比如可以为normal页面渲染模式、bigpipe页面渲染模式、ajaxpipe页面渲染模式或quickling页面渲染模式等。并且在确定页面具体的页面渲染模式之后,可以作为页面配置信息进行存储,比如,设置不同的值分别对应不同的页面渲染模式,并将这些值存储于该页面的页面第三字段,从而利用页面的页面第三字段的值来记录该页面的页面渲染模式,其中,该页面的页面第三字段例如可以是该页面的页面Mode字段,或者其他类似的字段。
比如,可以将数值“1”对应normal页面渲染模式、数值“2”对应bigpipe页面渲染模式、数值“3”对应ajaxpipe页面渲染模式、数值“4”对应quickling页面渲染模式。对于某个页面,假设该页面具体的页面渲染模式为normal页面渲染模式,则可以将该页面的页面Mode字段的值配置为“1”并进行存储。
网页设计人员在进行页面设计时,通常还可以根据页面中各模块的相关性,确定该页面中所需要划分出的模块数量及各模块的作用等,并对页面元素进行划分得到这些模块,该划分得到的模块可以理解为是本公开实施例涉及的页面分块(Pagelets)。用户可以根据结构化的(html-DOM)网页中的HTML节点来定位相应的页面分块。
网页设计人员在划分得到页面中的各个页面分块后,可以分别确定各个页面分块的页面分块渲染模式,比如可以为normal页面分块渲染模式、lazyrender页面分块渲染模式或bigrender页面分块渲染模式等。在确定各个页面分块的页面分块渲染模式之后,可以将各个页面分块分别所对应的页面分块渲染模式作为各页面分块的页面分块配置信息进行存储。比如,设置不同的值分别对应不同的页面分块渲染模式,并将这些值分别存储于各个页面分块的第四字段,从而利用各个页面分块分别对应的页面分块第四字段的值来记录各个页面分块的页面分块渲染模式,其中,页面分块的第四字段例如可以是页面分块的Mode字段或者其他类似的字段。
比如,可以将值“A”对应normal页面分块渲染模式、值“B”对应lazyrender页面分块渲染模式、值“C”对应bigrender页面分块渲染模式。对于某个页面中的两个页面分块(页面分块1和页面分块2),假设页面分块1的页面分块渲染模式为normal页面分块渲染模式,页面分块2的页面分块渲染模式为lazyrender页面分块渲染模式,则可以将页面分块1的Mode字段的值配置为“A”并进行存储,将将页面分块2的Mode字段的值配置为“B”并进行存储。
另外,网页设计人员在划分得到页面中的各个页面分块之后,还需要确定各个页面分块分别对应的渲染模板以及数据接口,从而在对某个(或多个)页面分块进行渲染时,从数据接口中获取数据,并确定渲染模板。在实际应用中,通常可以将页面分块的第一字段的值与渲染模板进行对应,从而在确定某个页面分块的渲染模板时,可以先获取该页面分块的第一字段的值,然后根据对应关系来获取所对应的渲染模板,其中,该第一字段例如可以是ppl字段或者其他类似字段。
通常也可以将页面分块的第二字段的值与数据接口进行对应,当需要获取某个页面分块的数据时,可以获取该页面分块的第二字段的值,然后根据该第二字段的值与数据接口的对应关系来确定对应的数据接口,从而从该数据接口中获取数据,其中,该第二字段例如可以是provid字段或者其他类似的字段。
网页设计人员在对网页进行配置之后,在实际应用中,用户可以通过终端设备上的客户端或者浏览器来进行页面的浏览,在该过程中,服务器能够利用上述配置对页面中的一个或多个页面分块进行渲染,从而用于在终端设备上进行页面展示。
参考图2为本公开实施例所提供的页面渲染方法的具体流程示意图,图2中所示的该页面渲染方法可以由服务器执行。该页面渲染方法可以包括如下步骤。
步骤S31:根据当前页面的页面配置信息或当前页面的访问请求中所携带的标识信息,确定当前页面的页面渲染模式。
其中,用户通常可以在终端设备上的客户端或者浏览器上进行操作,从而发起对某个页面的访问请求,被访问的该页面为步骤S31中所提到的当前页面,其中该当前页面上包括多个页面分块。比如,用户在手机上发起某视频网页的访问请求,该视频网页的页面为当前页面。
服务器主要可以通过两种方式来确定当前页面的页面渲染模式,一种方式为通过当前页面的页面配置信息,比如,预先配置的该当前页面的页面第三字段(如,页面Mode字段)的值,利用该值与页面渲染模式的对应关系来确定该当前页面的页面渲染模式。另一种方式为,根据当前页面的访问请求中所携带的标识信息,来确定当前页面的页面渲染模式,比如,当前页面的页面渲染模式为normal页面渲染模式,针对该当前页面的访问请求中通常会所携带标识信息,比如“normal”等,通过该标识信息来指示该当前页面采用某种页面渲染模式(比如该例子中采用normal页面渲染模式)进行渲染。
步骤S32:根据所获取的当前页面中目标页面分块的页面分块配置信息,确定目标页面分块的页面分块渲染模式。
这里的目标页面分块可以是当前页面中的一个或多个页面分块,从而针对该一个或多个页面分块进行渲染。比如该目标页面分块可以是,从当前页面中随机确定出的某个或某几个页面分块,从而作为当前页面分块进行渲染。另外,在实际应用中,根据需要可能会针对当前页面中的各个页面分块分配相应的优先级顺序,此时,该目标页面分块可以是根据该优先级顺序来进行渲染的某个或多个页面分块。特别是,随着服务器数据处理能力的增强,通常会采用并行处理的方式,此时该目标页面分块可以是并行处理中的多个页面分块。
目标页面分块的页面分块配置信息可以是目标页面分块的第四字段的值,比如在确定目标页面分块之后,可以获取该目标页面分块的Mode字段的值,从而根据该值与页面分块渲染模式的对应关系,将与该值对应的页面分块渲染模式确定为目标页面分块的页面分块渲染模式。
步骤S33:基于当前页面的页面渲染模式以及当前页面中目标页面分块的页面分块渲染模式,对当前页面中的目标页面分块进行渲染。
由于当前页面的页面渲染模式可以为normal页面渲染模式、bigpipe页面渲染模式、ajaxpipe页面渲染模式或quickling页面渲染模式,并且目标页面分块的页面分块渲染模式可以为normal页面分块渲染模式、lazyrender页面分块渲染模式或bigrender页面分块渲染模式,因此在基于当前页面的页面渲染模式和目标页面分块的页面分块渲染模式进行渲染时,可以有多种渲染方式,下面可以一一进行说明。
方式一:当前页面为normal页面渲染模式,并且目标页面分块为normal页面分块渲染模式。可以获取该目标页面分块的第一字段(如,ppl字段)的值以及第二字段(如,provid字段)的值,从而通过第一字段的值与渲染模板的对应关系,来确定该目标页面分块的渲染模板;以及通过第二字段的值与数据接口的对应关系,确定相应的数据接口,并从该数据接口中获取数据;在获取渲染模板和数据之后,将两者进行合成,从而用于生成HTML格式的反馈数据,并以字符串的方式发送至终端设备,当然也可以从数据接口中所获取js、css等静态资源,并也以字符串的方式发送至终端设备。
当前页面为normal页面渲染模式,并且目标页面分块为lazyrender页面分块渲染模式时。则,可以对该目标页面分块直接分配相应的占位符,从而作为反馈数据,比如该占位符可以是一个带有页面分块id的div元素,其中页面分块id可以用于唯一表示相对应的页面分块。
当前页面为normal页面渲染模式,并且目标页面分块为bigrender页面分块渲染模式时。在根据目标页面分块的第一字段的值以及第二字段的值,分别获取目标页面分块的渲染模板和数据之后,可以将两者进行合成,从而用于生成HTML格式的反馈数据发送至终端设备。同时,还可以将从数据接口中所获取js、css等静态资源添加到一个json格式的数据中,并且将该json格式的数据添加到一个隐藏的textarea元素中,并将该textarea元素发送至终端设备。此时,由于终端设备不会将该textarea元素的内容进行渲染,从而作为dom树的一部分,因此降低了渲染的数据量,提高渲染效率。另外,在需要时,还可以由终端设备中的客户端js脚本来完成该textarea元素中json格式的数据的提取,并将其添加到页面中进行展示。
需要说明的是,当前页面为normal页面渲染模式时,对于目标页面分块为normal页面渲染模式或bigrender页面分块渲染模式,在获取目标页面分块的渲染模板和数据,通过两者进行合成,从而用于生成HTML格式的反馈数据;对于目标页面分块为lazyrender页面渲染模式,直接输出占位符。
方式二:当前页面为bigpipe页面渲染模式时,首先针对当前页面中的各个页面分块分别分配一个对应的页面分块id作为占位符,并将各占位符拼接生成HTML格式的数据反馈至终端设备。然后针对该当前页面中的不同的页面分块渲染模式的页面分块(normal页面分块渲染模式、lazyrender页面分块渲染模式或bigrender页面分块渲染模式),分别采用不同的方式进行处理,并且进行分区块的渲染。
比如,目标页面分块为normal页面分块渲染模式。此时,也可以获取该目标页面分块的第一字段的值以及第二字段的值,从而通过第一字段的值与渲染模板的对应关系,来确定该目标页面分块的渲染模板;以及通过第二字段的值与数据接口的对应关系,确定相应的数据接口,并从该数据接口中获取数据;在获取渲染模板和数据之后,将两者进行合成,从而用于生成HTML格式的数据;然后将该HTML格式的数据、该目标页面分块的页面分块id、js、css等静态资源作为js函数bigpipe.renderPagelet的参数,生成一段与该目标页面分块对应的js脚本,作为反馈数据。终端设备上的客户端或浏览器在得到该反馈数据后,可以这个根据页面分块id将HTML格式的数据在相应位置(即目标页面分块的位置)进行展示、同时加载js、css等静态资源。
比如,目标页面分块为lazyrender页面分块渲染模式。此时,可以对该目标页面分块直接分配相应的占位符,从而作为反馈数据,比如该占位符可以是一个带有页面分块id的div元素。
比如,目标页面分块为bigrender页面分块渲染模式。此时,在根据目标页面分块的ppl字段的值以及provid字段的值,分别获取目标页面分块的渲染模板和数据之后,可以将两者进行合成,从而用于生成HTML格式的数据;然后将该HTML格式的数据、js、css等静态资源目标页面分块的页面分块id等,添加到一个json格式的数据中,并且将该json格式的数据添加到一个隐藏的textarea元素中,并将该textarea元素发送至终端设备。此时,由于终端设备不会将该textarea元素的内容进行渲染,从而作为dom树的一部分,因此降低了渲染的数据量,提高渲染效率。另外,在需要时,还可以由终端设备中的客户端js脚本来完成该textarea元素中json格式的数据的提取,并将其添加到页面中进行展示。
需要说明的是,当前页面为bigpipe页面渲染模式时,由于首先针对当前页面中的各个页面分块分别分配一个对应的页面分块id作为占位符,并将各占位符拼接生成HTML格式的数据反馈至终端设备。之后,可以分别将当前页面中的各个页面分块作为当前页面分块,从而确定出该当前页面分块的反馈数据,发送至终端设备处,并由终端设备将当前页面分块的反馈数据进行分区块的展示。当前页面中有多个页面分块时,每一次也可以将一个页面分块的数据进行发送,使得终端设备每一次接收至少是一个页面分块完整数据,并用于该页面分块的渲染和展示。
方式三:当前页面为quickling页面渲染模式时,也针对当前页面中的各个页面分块分别分配一个对应的页面分块id作为占位符,并将各占位符拼接生成HTML格式的数据反馈至终端设备。然后针对该当前页面中的不同的页面分块渲染模式的页面分块(normal页面分块渲染模式、lazyrender页面分块渲染模式或bigrender页面分块渲染模式),分别采用不同的方式进行处理,并且进行分区块的渲染。
比如,目标页面分块为normal页面分块渲染模式。此时,也可以获取该目标页面分块的第一字段的值以及第二字段的值,从而通过第一字段的值与渲染模板的对应关系,来确定该目标页面分块的渲染模板;以及通过第二字段的值与数据接口的对应关系,确定相应的数据接口,然后通过ajax发起数据获取请求,从该数据接口中获取数据;在获取渲染模板和数据之后,将两者进行合成HTML格式的数据;然后利用该HTML格式的数据、该目标页面分块的页面分块id、js、css等静态资源生成json格式的数据,作为反馈数据发送至终端设备处。此时,终端设备上的客户端或浏览器可以通过XMLHttpRequest对象的progress事件来接收反馈数据,其中该反馈数据为json格式的数据。
同样,当前页面中有多个页面分块时,每一次也可以将一个页面分块的数据进行发送,使得终端设备每一次接收至少是一个页面分块完整数据,并用于该页面分块的渲染和展示。
比如,当前页面为quickling页面渲染模式,目标页面分块为lazyrender页面分块渲染模式。此时,可以对该目标页面分块直接分配相应的占位符,从而作为反馈数据,比如该占位符可以是一个带有页面分块id的div元素。
比如,当前页面为quickling页面渲染模式,目标页面分块为bigrender页面分块渲染模式。也可以通过目标页面分块的ppl字段的值来获取目标页面分块的渲染模板,利用目标页面分块的provid字段的值,然后通过ajax发起数据获取请求,从该provid字段的值所对应的数据接口中获取数据;在获取渲染模板和数据之后,将两者进行合成HTML格式的数据。然后将该HTML格式的数据、目标页面分块的页面分块id、js、css等静态资源添加到一个json格式的数据中,并将该json格式的数据作为反馈数据发送至终端设备。此时,终端设备上的客户端或浏览器可以通过XMLHttpRequest对象的progress事件来接收反馈数据。
方式四:当前页面为ajaxpipe页面渲染模式,通常该页面渲染模式可以应用于当前页面中未渲染部分的渲染。对于当前页面,其页面分块的页面分块渲染模式通常为normal页面分块渲染模式。
可以获取该目标页面分块的第一字段的值以及第二字段的值,从而通过第一字段的值与渲染模板的对应关系,来确定该目标页面分块的渲染模板;以及通过第二字段的值与数据接口的对应关系,确定相应的数据接口,然后通过ajax发起数据获取请求,从该数据接口中获取数据。在获取渲染模板和数据之后,将两者进行合成HTML格式的数据;然后将该HTML格式的数据、js、css等静态资源添加至一个json格式的数据中,然后将该json格式的数据作为反馈数据发送至终端设备处。当当前页面中的页面分块数量较多时,在并行处理过程中(即,将各个页面分块分别作为当前页面分块进行并行处理),可以分批次向终端设备处发送反馈数据,其中每批次中包括一个或多个页面分块所对应的反馈数据。终端设备通过XMLHttpRequest对象的progress事件所接收到的每一个批次的数据中,至少包括一个页面分块的反馈数据,可以利用其进行相应页面分块的展示。
采用本公开实施例所提供的页面渲染方法,根据当前页面的页面配置信息或当前页面的访问请求中所携带的标识信息,确定当前页面的页面渲染模式;根据当前页面中目标页面分块的页面分块配置信息,确定目标页面分块的页面分块渲染模式;然后基于该页面渲染模式以及该页面分块渲染模式,对目标页面分块进行渲染。由于该渲染模式针对目标页面分块进行分区块地渲染,并不需要一次性接收到页面的全部数据才能进行渲染,因此一方面一次性渲染的数据量减少,另一方面可以对页面中的多个页面分块可以实现分批次的渲染,从而相对于现有技术能够快速的进行响应,防止页面长时间处于白屏的状态。
在实际应用中,该页面渲染方法通常可以由服务器执行,比如可以由设置于服务器中的页面渲染模型来执行。比如服务器在接收到针对当前页面的访问请求之后,由设置于服务器中的页面渲染模型来执行该面渲染方法中的步骤S31~步骤S32,从而实现对当前页面中的目标页面分块的渲染。
同时,为了应对突发业务,比如在某个时段,对当前页面的访问量突然剧增等,可以将服务器配置为分布式集群的方式,从而通过分布式集群中的不同节点来并行处理。比如,当前页面中包括3个页面分块,可以将3个页面分块均作为当前页面分块,分配至分布式集群中的3个不同节点来并行处理。这样一方面可以增加处理效率,另一方面还可以在面对突发业务时,降低服务器由于业务量过多而出现故障的风险。
基于与本公开实施例所提供的页面渲染方法相同的发明构思,本公开实施例还可以提供一种页面展示方法,该方法可以应用于终端设备处,对于该方法中如有不清楚的内容,可以参考本公开实施例所提供的页面渲染方法。如图3所示,该页面展示方法包括如下步骤:
步骤S41:向服务器发送当前页面的访问请求。
在实际应用中,用户需要浏览某个页面(当前页面)时,可以通过键盘输入、鼠标点击、触控等方式,触发终端设备中相应页面入口等,从而通过终端设备向服务器发送当前页面的访问请求。
服务器在接收到终端设备所发送的访问请求之后,可以利用本公开实施例中所提供的页面渲染方法进行处理。比如,服务器基于当前页面的页面渲染模式以及当前页面中目标页面分块的页面分块渲染模式,对当前页面中的所述目标页面分块进行渲染,其中,服务器根据当前页面的页面配置信息或访问请求中所携带的标识信息,确定当前页面的页面渲染模式;服务器根据所获取的目标页面分块的页面分块配置信息,确定目标页面分块的页面分块渲染模式。
步骤S42:接收服务器对当前页面中目标页面分块进行渲染后所生成的反馈数据。
步骤S43:基于所接收的反馈数据对目标页面分块进行展示。
采用本公开实施例中所提供的页面展示方法,由于该页面展示方法采用与本公开实施例中所提供的页面渲染方法相同的发明构思,因此也能够解决现有技术中的问题。
基于与本公开实施例所提供的页面渲染方法相同的发明构思,本公开还提供了一页面渲染装置。如图4是根据一示例性实施例示出的该页面渲染装置的框图。参照图4,该装置50包括:页面渲染模式确定单元501,页面分块渲染模式确定单元502和渲染单元503,其中:
页面渲染模式确定单元501,被配置为执行根据当前页面的页面配置信息或当前页面的访问请求中所携带的标识信息,确定所述当前页面的页面渲染模式;
页面分块渲染模式确定单元502,被配置为执行根据所获取的所述当前页面中目标页面分块的页面分块配置信息,确定所述目标页面分块的页面分块渲染模式;
渲染单元503,被配置为执行基于所述页面渲染模式以及所述页面分块渲染模式,对所述当前页面中的所述目标页面分块进行渲染。
关于上述实施例中的装置50,其中各个单元执行操作的具体方式已经在有关该方法的实施例中进行了详细描述,此处将不做详细阐述说明。另外,由于该装置50采用与本公开实施例页面渲染方法相同的发明构思,因此也能够解决现有技术中的问题,这里对此不再赘述。
基于与本公开实施例一种页面展示方法相同的发明构思,本公开还提供了一种页面展示装置。如图5是根据一示例性实施例示出的该页面展示装置的框图。参照图5,该装置60包括:发送单元601和接收单元602,其中:
发送单元601,被配置为执行向服务器发送当前页面的访问请求,用于通过服务器基于所述当前页面的页面渲染模式以及所述当前页面中目标页面分块的页面分块渲染模式,对所述当前页面中的所述目标页面分块进行渲染,其中,服务器根据当前页面的页面配置信息或所述访问请求中所携带的标识信息,确定所述当前页面的页面渲染模式;服务器根据所获取的所述目标页面分块的页面分块配置信息,确定所述目标页面分块的页面分块渲染模式;
接收单元602,被配置为接收服务器对所述目标页面分块进行渲染后所生成的反馈数据,用于所述当前页面中所述目标页面分块的展示。
关于上述实施例中的装置60,其中各个单元执行操作的具体方式已经在有关该方法的实施例中进行了详细描述,此处将不做详细阐述说明。
另外,本公开实施例还可以提供一种服务器。图6是根据一示例性实施例示出的服务器70的框图。该服务器70包括处理器701,以及用于存储处理器701可执行指令的存储器702。其中,处理器701被配置为执行所述指令,以实现本公开实施例的页面渲染方法。
在实际应用中,该服务器70还可以包括网络接口703、I/O控制器704、大容量存储设备705,以及用于连接它们的总线706。
在示例性实施例中,本公开还提供了一种包括指令的存储介质,例如包括上述指令的存储器702,上述指令可由服务器70的处理器701执行以完成上述方法。其中,存储介质可以是非临时性计算机可读存储介质,例如,所述非临时性计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。
本公开实施例还可以提供一种计算机程序产品,当其在计算机上运行时,使得所述计算机执行本公开实施例所提供的页面渲染方法或页面展示方法。
所述计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行所述计算机程序指令时,全部或部分地产生按照本公开实施例所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。所述计算机指令可以存储在计算机可读存储介质中,或者从一个计算机可读存储介质向另一计算机可读存储介质传输,例如,所述计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线(DSL))或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述计算机可读存储介质可以是计算机能够存储的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质,(例如,软盘、硬盘、磁带)、光介质(例如,DVD)、或者半导体介质(例如固态硬盘Solid State Disk(SSD))等。
本领域技术人员在考虑说明书及实践这里公开的发明后,将容易想到本公开的其它实施方案。本公开旨在涵盖本公开的任何变型、用途或者适应性变化,这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的,本公开的真正范围和精神由下面的权利要求指出。
应当理解的是,本公开并不局限于上面已经描述并在附图中示出的精确结构,并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。
Claims (11)
1.一种页面渲染方法,其特征在于,包括:
根据当前页面的页面配置信息或当前页面的访问请求中所携带的标识信息,确定所述当前页面的页面渲染模式;
根据所获取的所述当前页面中目标页面分块的页面分块配置信息,确定所述目标页面分块的页面分块渲染模式;
基于所述页面渲染模式以及所述页面分块渲染模式,对所述当前页面中的所述目标页面分块进行渲染;
其中,基于所述页面渲染模式以及所述页面分块渲染模式,对所述当前页面中的所述目标页面分块进行渲染,具体包括:
基于所述页面渲染模式以及所述页面分块渲染模式,对所述目标页面分块的数据和渲染模板进行合成,用于生成发送至终端设备的反馈数据,其中,所述反馈数据的数据格式与所述页面渲染模式相对应。
2.根据权利要求1所述的页面渲染方法,其特征在于,所述方法还包括:
根据所述目标页面分块的第一字段的值,获取与所述值对应的渲染模板;以及,
根据所述目标页面分块的第二字段的值,从与所述值对应的数据接口获取所述数据。
3.根据权利要求2所述的页面渲染方法,其特征在于,所述页面渲染模式具体包括:quickling页面渲染模式;则,
根据所述目标页面分块的第二字段的值,从与所述值对应的数据接口获取所述数据,具体包括:根据所述目标页面分块的第二字段的值,通过ajax从与所述值对应的数据接口获取所述数据;以及,
基于所述页面渲染模式以及所述页面分块渲染模式,对所述目标页面分块的数据和渲染模板进行合成,用于生成向终端设备的反馈数据,具体包括:
基于所述页面渲染模式以及所述页面分块渲染模式,对所述目标页面分块的数据和渲染模板进行合成,用于生成向终端设备的json格式的反馈数据。
4.根据权利要求1所述的页面渲染方法,其特征在于,根据当前页面的页面配置信息或当前页面的访问请求中所携带的标识信息,确定所述当前页面的页面渲染模式,具体包括:
根据预先配置的所述当前页面的页面第三字段的值,将与所述值对应的页面渲染模式确定为所述当前页面的页面渲染模式。
5.根据权利要求1所述的页面渲染方法,其特征在于,根据所获取的所述当前页面中目标页面分块的页面分块配置信息,确定所述目标页面分块的页面分块渲染模式,具体包括:
根据所获取的所述当前页面中目标页面分块的第四字段的值,将与所述值对应的页面分块渲染模式确定为所述目标页面分块的页面分块渲染模式。
6.一种页面展示方法,其特征在于,包括:
向服务器发送当前页面的访问请求,用于通过服务器基于所述当前页面的页面渲染模式以及所述当前页面中目标页面分块的页面分块渲染模式,对所述当前页面中的所述目标页面分块进行渲染,其中,服务器根据当前页面的页面配置信息或所述访问请求中所携带的标识信息,确定所述当前页面的页面渲染模式;服务器根据所获取的所述目标页面分块的页面分块配置信息,确定所述目标页面分块的页面分块渲染模式;
接收服务器对所述目标页面分块进行渲染后所生成的反馈数据,用于所述当前页面中所述目标页面分块的展示;
其中,通过服务器基于所述当前页面的页面渲染模式以及所述当前页面中目标页面分块的页面分块渲染模式,对所述当前页面中的所述目标页面分块进行渲染,具体包括:
基于所述当前页面的页面渲染模式以及所述当前页面中目标页面分块的页面分块渲染模式,对所述当前页面中目标页面分块的数据和渲染模板进行合成,用于生成发送至终端设备的反馈数据,其中,所述反馈数据的数据格式与所述页面渲染模式相对应。
7.根据权利要求6所述的页面展示方法,其特征在于,接收服务器对所述目标页面分块进行渲染后所生成的反馈数据,具体包括:通过XMLHttpRequest对象的progress事件接收所述反馈数据,其中,所述反馈数据为json格式的数据。
8.一种页面渲染装置,其特征在于,包括:
页面渲染模式确定单元,被配置为执行根据当前页面的页面配置信息或当前页面的访问请求中所携带的标识信息,确定所述当前页面的页面渲染模式;
页面分块渲染模式确定单元,被配置为执行根据所获取的所述当前页面中目标页面分块的页面分块配置信息,确定所述目标页面分块的页面分块渲染模式;
渲染单元,被配置为执行基于所述页面渲染模式以及所述页面分块渲染模式,对所述当前页面中的所述目标页面分块进行渲染;
其中,基于所述页面渲染模式以及所述页面分块渲染模式,对所述当前页面中的所述目标页面分块进行渲染,具体包括:
基于所述页面渲染模式以及所述页面分块渲染模式,对所述目标页面分块的数据和渲染模板进行合成,用于生成发送至终端设备的反馈数据,其中,所述反馈数据的数据格式与所述页面渲染模式相对应。
9.一种页面展示装置,其特征在于,包括:
发送单元,被配置为执行向服务器发送当前页面的访问请求,用于通过服务器基于所述当前页面的页面渲染模式以及所述当前页面中目标页面分块的页面分块渲染模式,对所述当前页面中的所述目标页面分块进行渲染,其中,服务器根据当前页面的页面配置信息或所述访问请求中所携带的标识信息,确定所述当前页面的页面渲染模式;服务器根据所获取的所述目标页面分块的页面分块配置信息,确定所述目标页面分块的页面分块渲染模式;
接收单元,被配置为接收服务器对所述目标页面分块进行渲染后所生成的反馈数据,用于所述当前页面中所述目标页面分块的展示;
其中,通过服务器基于所述当前页面的页面渲染模式以及所述当前页面中目标页面分块的页面分块渲染模式,对所述当前页面中的所述目标页面分块进行渲染,具体包括:
基于所述当前页面的页面渲染模式以及所述当前页面中目标页面分块的页面分块渲染模式,对所述当前页面中目标页面分块的数据和渲染模板进行合成,用于生成发送至终端设备的反馈数据,其中,所述反馈数据的数据格式与所述页面渲染模式相对应。
10.一种服务器,其特征在于,包括:
处理器;
用于存储所述处理器可执行指令的存储器;
其中,所述处理器被配置为执行所述指令,以实现如权利要求1至5中任一项所述的页面渲染方法。
11.一种存储介质,当所述存储介质中的指令由服务器的处理器执行时,使得所述服务器能够执行如权利要求1至5中任一项所述的页面渲染方法,或如权利要求6至7中任一项所述的页面展示方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202010116779.9A CN111368235B (zh) | 2020-02-25 | 2020-02-25 | 页面渲染和展示方法、装置、服务器、存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202010116779.9A CN111368235B (zh) | 2020-02-25 | 2020-02-25 | 页面渲染和展示方法、装置、服务器、存储介质 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN111368235A CN111368235A (zh) | 2020-07-03 |
CN111368235B true CN111368235B (zh) | 2023-11-14 |
Family
ID=71206279
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202010116779.9A Active CN111368235B (zh) | 2020-02-25 | 2020-02-25 | 页面渲染和展示方法、装置、服务器、存储介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN111368235B (zh) |
Families Citing this family (6)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN111966941A (zh) * | 2020-08-07 | 2020-11-20 | 苏州浪潮智能科技有限公司 | 一种模块驱动Web页面渲染方法、系统、终端及存储介质 |
CN112100136B (zh) * | 2020-11-19 | 2021-03-19 | 统信软件技术有限公司 | 一种文档加载方法、计算设备及可读存储介质 |
CN112437148B (zh) * | 2020-11-20 | 2023-03-07 | 北京奇艺世纪科技有限公司 | 业务请求的处理方法、装置、业务服务器及系统 |
CN112364277B (zh) * | 2020-11-23 | 2024-03-08 | 北京三快在线科技有限公司 | 一种网页加载方法及装置 |
CN114510241A (zh) * | 2022-01-28 | 2022-05-17 | 北京金堤科技有限公司 | 页面渲染方法及装置 |
CN114781347B (zh) * | 2022-06-21 | 2022-09-20 | 飞狐信息技术(天津)有限公司 | 一种文件处理方法及系统 |
Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN101551819A (zh) * | 2009-04-30 | 2009-10-07 | 用友软件股份有限公司 | 渲染大型Web页面的方法 |
CN103678631A (zh) * | 2013-12-19 | 2014-03-26 | 华为技术有限公司 | 页面渲染方法及装置 |
CN103761317A (zh) * | 2014-01-27 | 2014-04-30 | 北京京东尚科信息技术有限公司 | 一种多线程异步渲染系统及方法 |
Family Cites Families (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US8255793B2 (en) * | 2008-01-08 | 2012-08-28 | Yahoo! Inc. | Automatic visual segmentation of webpages |
-
2020
- 2020-02-25 CN CN202010116779.9A patent/CN111368235B/zh active Active
Patent Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN101551819A (zh) * | 2009-04-30 | 2009-10-07 | 用友软件股份有限公司 | 渲染大型Web页面的方法 |
CN103678631A (zh) * | 2013-12-19 | 2014-03-26 | 华为技术有限公司 | 页面渲染方法及装置 |
CN103761317A (zh) * | 2014-01-27 | 2014-04-30 | 北京京东尚科信息技术有限公司 | 一种多线程异步渲染系统及方法 |
Also Published As
Publication number | Publication date |
---|---|
CN111368235A (zh) | 2020-07-03 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN111368235B (zh) | 页面渲染和展示方法、装置、服务器、存储介质 | |
US11314568B2 (en) | Message processing method and apparatus, storage medium, and computer device | |
CN109308255B (zh) | 一种用于a/b测试实验的方法和装置 | |
CN110708346B (zh) | 信息处理系统和方法 | |
CN111901674B (zh) | 一种视频播放控制方法及装置 | |
CN113010827B (zh) | 页面渲染方法、装置、电子设备以及存储介质 | |
CN112395027B (zh) | 微件界面生成方法、装置、存储介质与电子设备 | |
CN113382083A (zh) | 一种网页截图方法和装置 | |
CN108334516B (zh) | 信息推送方法和装置 | |
CN110968314B (zh) | 一种页面生成方法及装置 | |
CN115309470B (zh) | 微件的加载方法、装置、设备以及存储介质 | |
CN111246238A (zh) | 直播方法、装置、存储介质及直播系统 | |
CN112714365B (zh) | 视频播放方法和系统 | |
CN106354792B (zh) | 网页显示方法及装置 | |
CN107330087B (zh) | 页面文件生成方法和装置 | |
CN112788090B (zh) | 一种网络资源传输方法、装置及系统 | |
CN110795328A (zh) | 一种接口测试方法和装置 | |
CN114915565B (zh) | 网络调试的方法和系统 | |
CN111079048A (zh) | 一种页面加载方法及装置 | |
CN107688572B (zh) | 一种页面显示方法及终端 | |
CN112016280B (zh) | 一种文件编辑方法、装置及计算机可读介质 | |
CN114742013A (zh) | 在线文档展示方法、装置和电子设备 | |
CN112947918A (zh) | 数据展示方法和装置 | |
CN113918861A (zh) | 图标库展示方法和装置 | |
CN115577200B (zh) | 加载页面的方法、装置、设备以及存储介质 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
GR01 | Patent grant | ||
GR01 | Patent grant |