CN113127783B - 页面显示方法及装置、设备和介质 - Google Patents

Abstract

本公开提供了一种页面显示方法及装置、设备和介质，涉及通信技术领域，尤其涉及页面配置领域。实现方案为：发送页面内容请求；接收服务器返回的结构化数据和针对所述页面内容请求的目标页面响应内容，其中，所述结构化数据和所述目标页面响应内容为按照预设顺序来封装并传输的；确定所述结构化数据相应的预设组件，以及所述目标页面响应内容相应的目标页面组件；基于所述结构数据对所述预设组件进行渲染；基于所述目标页面响应内容对所述目标页面组件进行渲染；以及将渲染后的所述预设组件和目标页面组件添加到目标页面的相应位置，其中，所述目标页面中所述预设组件和目标页面组件之间的位置关系与所述预设顺序相关。

Description

页面显示方法及装置、设备和介质

技术领域

本公开涉及通信技术领域，尤其涉及页面配置领域，具体涉及一种页面显示方法、装置、电子设备、计算机可读存储介质和计算机程序产品。

背景技术

随着智能手机的快速普及以及移动互联网的日益兴起，用户在手机、平板等终端设备上通过应用程序(Application，APP)进行搜索、阅读、视频观看、在线购物、即时通信等的需求越来越复杂和多样化。不同的应用场景下，用户经常会有在同一页面浏览不同类型内容诸如视频、图片和文字等的需求。

现有技术中有多种不同的渲染方式应用于APP端，使内容能够更好的呈现给用户，例如Native渲染(原生渲染)、webview渲染等。由于Native渲染在渲染视频或图片等非文字内容上流畅度优于HTML渲染，所以APP多会在同一页面上选择用Native渲染组件来渲染视频或图片等内容，而用webview渲染组件来渲染文字内容。

在此部分中描述的方法不一定是之前已经设想到或采用的方法。除非另有指明，否则不应假定此部分中描述的任何方法仅因其包括在此部分中就被认为是现有技术。类似地，除非另有指明，否则此部分中提及的问题不应认为在任何现有技术中已被公认。

发明内容

本公开提供了一种页面显示方法、装置、电子设备、计算机可读存储介质和计算机程序产品。

根据本公开的一方面，提供了一种页面显示方法，包括：发送页面内容请求；接收服务器返回的结构化数据和针对所述页面内容请求的目标页面响应内容，其中，所述结构化数据和所述目标页面响应内容为按照预设顺序来封装并传输的；确定所述结构化数据相应的预设组件，以及所述目标页面响应内容相应的目标页面组件；基于所述结构数据对所述预设组件进行渲染；基于所述目标页面响应内容对所述目标页面组件进行渲染；以及将渲染后的所述预设组件和目标页面组件添加到目标页面的相应位置，其中，所述目标页面中所述预设组件和目标页面组件之间的位置关系与所述预设顺序相关。

根据本公开的另一方面，提供了一种页面显示方法，包括：从客户端接收页面内容请求；基于所述页面内容请求，获取结构化数据和针对所述页面内容请求的目标页面响应内容；按照预设顺序对所述结构化数据和所述目标页面响应内容进行封装并发送至所述客户端，其中，所述预设顺序与所述客户端的目标页面中所述结构化数据的待显示位置和所述目标页面响应内容的待显示位置之间的关系相关。

根据本公开的另一方面，提供了一种页面显示装置，包括：发送单元，被配置用于发送页面内容请求；接收单元，被配置用于接收服务器返回的结构化数据和针对所述页面内容请求的目标页面响应内容，其中，所述结构化数据和所述目标页面响应内容为按照预设顺序来封装并传输的；确定单元，被配置用于确定所述结构化数据相应的预设组件，以及所述目标页面响应内容相应的目标页面组件；第一渲染单元，被配置用于基于所述结构数据对所述预设组件进行渲染；第二渲染单元，被配置用于基于所述目标页面响应内容对所述目标页面组件进行渲染；以及添加单元，被配置用于将渲染后的所述预设组件和目标页面组件添加到目标页面的相应位置，其中，所述目标页面中所述预设组件和目标页面组件之间的位置关系与所述预设顺序相关。

根据本公开的另一方面，还提供了一种页面显示装置，包括：接收单元，被配置用于从客户端接收页面内容请求；获取单元，被配置用于基于所述页面内容请求，获取结构化数据和针对所述页面内容请求的目标页面响应内容；发送单元，被配置用于按照预设顺序对所述结构化数据和所述目标页面响应内容进行封装并发送至所述客户端，其中，所述预设顺序与所述客户端的目标页面中结构化数据的待显示位置和目标页面响应内容的待显示位置之间的关系相关。

根据本公开的另一方面，提供了一种电子设备，包括：至少一个处理器；以及与所述至少一个处理器通信连接的存储器；其中所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行上述页面显示方法。

根据本公开的另一方面，提供了一种存储有计算机指令的非瞬时计算机可读存储介质，其中，所述计算机指令用于使所述计算机执行上述页面显示方法。

根据本公开的另一方面，提供了一种计算机程序产品，包括计算机程序，其中，计算机程序在被处理器执行时实现上述页面显示方法。

根据本公开的一个或多个实施例，对于用户访问的网页，可以按预设顺序来显示页面内容，提升用户体验。

应当理解，本部分所描述的内容并非旨在标识本公开的实施例的关键或重要特征，也不用于限制本公开的范围。本公开的其它特征将通过以下的说明书而变得容易理解。

附图说明

附图示例性地示出了实施例并且构成说明书的一部分，与说明书的文字描述一起用于讲解实施例的示例性实施方式。所示出的实施例仅出于例示的目的，并不限制权利要求的范围。在所有附图中，相同的附图标记指代类似但不一定相同的要素。

图1示出了根据本公开示例性实施例的页面显示方法的流程图；

图2示出了根据本公开示例性实施例的页面显示方法的流程图；

图3示出了根据本公开示例性实施例的页面显示方法的流程图；

图4示出了根据本公开示例性实施例的异构数据流式传输的示意图；

图5示出了根据本公开的实施例的页面显示装置的结构框图；

图6示出了根据本公开的实施例的页面显示装置的结构框图；

图7示出了能够用于实现本公开的实施例的示例性电子设备的结构框图。

具体实施方式

以下结合附图对本公开的示范性实施例做出说明，其中包括本公开实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本公开的范围。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

在本公开中，除非另有说明，否则使用术语“第一”、“第二”等来描述各种要素不意图限定这些要素的位置关系、时序关系或重要性关系，这种术语只是用于将一个元件与另一元件区分开。在一些示例中，第一要素和第二要素可以指向该要素的同一实例，而在某些情况下，基于上下文的描述，它们也可以指代不同实例。

在本公开中对各种所述示例的描述中所使用的术语只是为了描述特定示例的目的，而并非旨在进行限制。除非上下文另外明确地表明，如果不特意限定要素的数量，则该要素可以是一个也可以是多个。此外，本公开中所使用的术语“和/或”涵盖所列出的项目中的任何一个以及全部可能的组合方式。

相关技术中，当用户访问一个同时包含两种渲染方式的页面时，可由以下两种方式来实现。一是通过Native引擎与webview引擎两次请求服务器获取相应的数据，再分别进行渲染；二是由webview引擎访问服务器获取结果，通过HTML调起的方式将数据传给Native引擎，再由Native引擎进行渲染。发明人发现这两种方式由于无法确定服务端数据的返回顺序，所以有概率先接收到HTML数据，使得位于页面下方的内容先进行了webview渲染，而后接收到结构化数据(例如Json数据)，使得位于页面上方的内容再后进行Native渲染。由此，会导致用户将在客户端页面上先看到位于页面下方的内容，而后才能看到位于页面上方的内容。这一渲染顺序不符合大多数用户的浏览习惯，导致用户体验不友好。

为解决上述问题，本公开通过客户端向服务器发出一次页面内容请求，在服务器端将Native渲染需要的结构化数据和webview渲染需要的HTML数据按照需要展示的顺序进行封装并传输给客户端进行解析、渲染。由此，可以通过服务器对数据进行有序地封装和传输实现客户端的有序渲染，保证客户端的页面内容按照需求进行有序展示，例如，可以按照页面由上至下的顺序进行有序渲染，符合用户的浏览需求，提升用户体验。

结构化数据和HTML数据可以为结构不同的异构数据，结构化数据例如可以为Json数据。即互为异构数据。

可以理解的，本公开的结构化数据不局限于为Native渲染，也可以采用与结构化数据其它适配的渲染方式进行渲染，在此不作限定。

以下将结合附图对本公开的页面显示方法进行进一步描述。

图1是示出根据本公开示例性实施例的页面显示方法的流程图。如图1所示，所述页面显示方法可以包括：步骤S101、发送页面内容请求；步骤S102、接收服务器返回的结构化数据和目标页面响应内容，其中，所述结构化数据和所述目标页面响应内容为按照预设顺序来封装并传输的；步骤S103、确定所述结构化数据相应的预设组件，以及所述目标页面响应内容相应的目标页面组件；步骤S104、基于所述结构数据对所述预设组件进行渲染；步骤S105、基于所述目标页面响应内容对所述目标页面组件进行渲染；以及步骤S106、将渲染后的所述预设组件和目标页面组件添加到目标页面的相应位置，其中，所述目标页面中所述预设组件和目标页面组件之间的位置关系与所述预设顺序相关。由此，可以通过服务器对数据进行有序地封装和传输实现客户端的有序渲染，保证客户端的页面内容按照需求进行有序展示，符合用户的浏览需求，提升用户体验。

根据一些实施例，所述结构化数据和目标页面响应内容可以互为异构数据。从而能够根据需求采用不同的渲染方式对服务器返回的数据进行有序渲染，提升用户体验。例如，采用渲染流畅度更优的渲染方式对先传输至客户端的数据进行渲染，并且将渲染内容添加至页面的上半部分，能够实现用户更快的获取浏览能力。

示例性的，所述结构化数据例如可为Native数据，所述目标页面响应内容例如可为HTML数据。Native数据即为适用于Native组件的结构化数据，例如Json数据。

可以理解的，所述结构化数据和目标页面响应内容也可以为同构数据，只要服务器对两者进行有序封装和传输，使得客户端能够根据用户的需求进行有序渲染即可。

为了便于描述和理解，下面内容中将以结构化数据为Native数据、目标页面响应内容为HTML数据为例，来具体描述本公开的技术放案。需要说明的是，本公开的技术方案并不局限于仅适用于结构化数据为Native数据、目标页面响应内容为HTML数据的场景，也适用于其它结构化数据和其它数据格式的页面数据。

根据一些实施例，所述页面显示方法适用于客户端一侧的页面显示。当用户点击客户端页面进行操作时，触发客户端向服务器发送页面内容请求。用户的点击操作例如可以是搜索操作，在这种情况下，所触发的客户端向服务器发送的页面内容请求为搜索请求，服务器返回的目标页面响应内容包括针对搜索请求的搜索结果，搜索结果可以HTML数据的形式返回到客户端，以用于目标页面组件的渲染，而后在客户端进行webview渲染。

根据一些实施例，服务器返回的结构化数据可以为推送数据。在页面内容请求为搜索请求的情况下推送数据例如可以是与搜索内容相关联的广告视频，可以Json数据的形式返回到客户端，以用于Native组件，而后在客户端进行Native渲染。

根据一些实施例，服务器所返回的结构化数据和目标页面响应内容为两种不同结构的数据，二者互为异构数据。两种数据返回的顺序与其分别对应的组件在客户端页面上的位置关系相关。例如，当结构化数据先于目标页面响应内容返回客户端时，客户端将先基于结构化数据对其对应的预设Native组件进行Native渲染，而后基于目标页面响应内容对其对应的目标页面组件进行webview渲染；用户则会在客户端页面上方先看到结构化数据对应的例如广告视频内容，而后在页面下方看到目标页面响应内容对应的例如搜索结果。

在一个实施例中，客户端进一步可以包括Native引擎和webview引擎，当用户点击客户端页面触发客户端向服务器发送页面内容请求时，所述页面内容请求可以为通过Native引擎来发送。由此，通过Native引擎发送页面内容请求，能够更快获得Native数据，由于Native渲染流畅度优于HTML渲染，能够使用户获得更快的浏览能力，并且只需要发送一次请求。

在一个实施例中，步骤S102中可以通过Native引擎接收服务器返回的所述结构化数据和针对所述页面内容请求的目标页面响应内容，并且所述Native引擎将所述目标页面响应内容传送给webview引擎，以用于对所述目标页面组件进行渲染。Native引擎例如可以通过JSBridge把相应的HTML数据传送给webview引擎进行渲染。

由上述两个实施例可知，本公开所提供的页面显示方法只需Native引擎向服务器发送一次数据请求，并由Native引擎接收由服务器返回的结构化数据和目标页面响应内容。这种方式下，可以更快获取用于Native渲染的结构化数据，以便可以在客户端页面的上方(即页面的上半部分)先显示例如广告视频等内容，使用户获得更快地浏览能力，提升用户体验。

根据一些实施例，步骤S102中接收服务器返回的所述结构化数据可以包括：接收服务器返回的所述结构化数据的多个第一片段，其中，所述目标页面响应内容和所述多个第一片段之间为按照预设顺序来封装并传输。由此，通过支持结构化数据的部分片段传输，能够提升数据传输的时效性。

在一个示例中，在接收到所述多个第一片段之后，接收到所述目标页面响应内容。由此，在通过支持结构化数据的部分片段传输，提升时效性的同时，能够保证先接收到结构化数据，使用户更快获得浏览能力。可以理解的，所述目标页面响应内容和所述多个第一片段之间为按照预设顺序来封装并传输的方式并不局限于上述一种，例如，也可以在接收到所述多个第一片段中的一部分第一片段之后，接收到所述目标页面响应内容。

上述实施例中支持结构化数据的部分片段传输，也可以支持目标页面响应内容的部分片段传输。

根据一些实施例，步骤S102中接收服务器返回的针对所述页面内容请求的目标页面响应内容可以包括：接收服务器返回的所述目标页面响应内容的多个第二片段，其中，所述结构化数据和所述多个第二片段之间为按照预设顺序来封装并传输。由此，通过支持目标页面响应内容的部分片段传输，能够提升数据传输的时效性。

在一个示例中，在接收到所述结构化数据之后，接收到所述多个第二片段。由此，在通过支持目标页面响应内容的部分片段传输，提升时效性的同时，能够保证先接收到结构化数据，使用户更快获得浏览能力。可以理解的，所述结构化数据和所述多个第二片段之间为按照预设顺序来封装并传输的方式并不局限于上述一种，例如，也可以在接收到所述多个第二片段中的一部分第二片段之后，接收到所述结构化数据。

根据另一些实施例，步骤S102可以包括：接收服务器返回的所述结构化数据的多个第一片段；以及接收服务器返回的所述目标页面响应内容的多个第二片段。也就是说，可以同时支持结构化数据的部分片段的传输以及目标页面响应内容的部分片段的传输，提升数据的时效性。

示例性的，可以在接收到多个第一片段之后，接收到多个第二片段，能够保证先接收到结构化数据，使用户更快获得浏览能力。也可以在接收到多个第二片段中的一部分第二片段之后，接收到多个第一片段，然后再接收到剩余部分的第二片段。可以理解的，可以根据实际需求来设置多个第一片段和多个第二片段的封装和传输顺序，在此不再一一列举。

至于步骤S103中如何确定结构化数据相应的预设组件，以及所述目标页面响应内容相应的目标页面组件，以及步骤S104和S105中的渲染步骤，可以参见相关技术，在此不再详述。

根据一些实施例，步骤S106中客户端在接收到结构化数据之后，接收到目标页面响应内容，所述预设组件所在的位置位于所述目标页面的上半部分。也就是说，Native数据显示在目标页面的上半部分。

可以理解的，Native数据也可以显示在目标页面的其它位置，例如，中间部分，在此不作限定。

根据一些实施例，所述结构化数据和所述目标页面响应内容可以为基于流式传输协议来传输的，从而能够保证按照预设顺序接收结构化数据和目标页面响应内容，对接收的数据进行有序渲染。进一步地，所述方法还可包括：在发送页面内容请求之前，确定客户端是否支持所述流式传输协议；以及在所述页面内容请求中添加预设标记，所述预设标记用于指示所述客户端是否支持所述流式传输协议。

流式传输协议例如可以但不限于为流式二进制传输协议。

相应的，本公开还提供一种适用于服务器一侧的页面显示方法，图2是示出根据本公开示例性实施例的服务器一侧页面显示方法的流程图。如图2所示，所述页面显示方法可以包括：步骤S201、从客户端接收页面内容请求；步骤S202、基于所述页面内容请求，获取结构化数据和针对所述页面内容请求的目标页面响应内容；以及步骤S203、按照预设顺序对所述结构化数据和所述目标页面响应内容进行封装并发送至所述客户端，其中，所述预设顺序与所述客户端的目标页面中所述结构化数据的待显示位置和所述目标页面响应内容的待显示位置之间的关系相关。由此，通过服务器有序传输数据，可以实现客户端有序显示所接收到的数据，以符合用户的浏览需求，提升用户体验。

根据一些实施例，按照预设顺序对所述结构化数据和所述目标页面响应内容进行封装并发送至所述客户端可以包括：将所述结构化数据依次划分为多个第一片段；按照所述预设顺序对所述目标页面响应内容和所述多个第一片段进行封装并发送至所述客户端。从而可以当划分得到一个第一片段之后即进行发送，以保证数据传输的时效性和高效性。

根据一些实施例，按照预设顺序对所述结构化数据和所述目标页面响应内容进行封装并发送至所述客户端还可包括：将所述目标页面响应内容依次划分为多个第二片段；按照所述预设顺序对所述结构化数据和所述多个第二片段进行封装并发送至所述客户端。

该页面显示方法还可支持结构化数据和目标页面响应内容的划分，即二者均可分别划分成多个第一片段和多个第二片段，再按照所述预设顺序对多个第一片段和多个第二片段进行封装、传输。

根据一些实施例，所述结构化数据和所述目标页面响应内容为基于流式传输协议来传输的，所述页面内容请求包括预设标记，并且所述方法还可包括：基于所述预设标记确定所述客户端是否支持流式传输协议，其中，获取结构化数据和针对所述页面内容请求的目标页面响应内容为响应于确定所述客户端支持流式传输协议而执行。

图3是示出根据本公开示例性实施例的页面显示方法的流程图，如图3所示，所述页面显示方法可以包括：

步骤S301：客户端发送页面内容请求，并在所述页面内容请求中添加预设标记。

所述页面内容请求可以但不限于是搜索请求，当用户点击客户端页面进行搜索操作时，触发客户端向服务器发送搜索请求。

页面内容请求中可以添加有预设标记，用于指示客户端是否支持流式传输协议。

所述客户端可以包括但不限于搭载不同系统诸如IOS、Android等系统的通讯移动终端、平板电脑、车载电脑等。

步骤S302：服务器接收到从客户端发送的带有预设标记的页面内容请求，响应于所述预设标记指示所述客户端支持流式传输协议，获取结构化数据和针对所述页面内容请求的目标页面响应内容。

服务器基于页面内容请求中预设标记确定客户端是否支持流式传输协议；响应于所述预设标记指示所述客户端支持流式传输协议，获取异构的结构化数据和针对所述页面内容请求的目标页面响应内容。

所述目标页面响应内容包括针对来自客户端的搜索请求的搜索结果，可以以HTML数据呈现，后续用于webview渲染。

所述结构化数据可以是根据搜索内容匹配得到的待推送数据，可以但不限于是广告视频、图片、动态图片等，可以以Native数据呈现，后续用于Native渲染。

步骤S303：服务器按照预设顺序对所述结构化数据和所述目标页面响应内容进行封装并发送至所述客户端。

按照预设顺序对所述结构化数据和所述目标页面响应内容进行封装并发送至所述客户端可以包括：将所述结构化数据依次划分为多个第一片段；按照所述预设顺序对所述目标页面响应内容和所述多个第一片段进行封装并发送至所述客户端。当划分得到一个第一片段之后即进行发送，以保证数据传输的时效性和高效性。

按照预设顺序对所述结构化数据和所述目标页面响应内容进行封装并发送至所述客户端还可以包括：将所述目标页面响应内容依次划分为多个第二片段；按照所述预设顺序对所述结构化数据和所述多个第二片段进行封装并发送至所述客户端。当划分得到一个第二片段之后即进行发送，以保证数据传输的时效性和高效性。

该页面显示方法还可以支持结构化数据和目标页面响应内容的划分，即二者可分别划分成多个第一片段和多个第二片段，再按照所述预设顺序对多个第一片段和多个第二片段进行封装、传输。

所述预设顺序与所述客户端的目标页面中所述结构化数据的待显示位置和所述目标页面响应内容的待显示位置之间的关系相关，例如先发送的数据所对应的内容将显示在客户端页面的上半部，后发送的数据所对应的内容将显示在客户端页面的下半部。

步骤S304：客户端接收服务器返回的结构化数据和目标页面响应内容。

接收服务器返回的所述结构化数据可以包括：接收服务器返回的所述结构化数据的多个第一片段，其中，所述目标页面响应内容和所述多个第一片段之间为按照预设顺序来封装并传输。

接收服务器返回的目标页面响应内容可以包括：接收服务器返回的所述目标页面响应内容的多个第二片段，其中，所述结构化数据和所述多个第二片段之间为按照预设顺序来封装并传输。

该页面显示方法还可支持传输结构化数据和目标页面响应内容分别划分为的多个第一片段和多个第二片段。

步骤S305：客户端确定所述结构化数据相应的预设组件，以及所述目标页面响应内容相应的目标页面组件。

步骤S306：客户端根据先接收到先渲染的原则：基于所述结构化数据对所述预设组件进行渲染；基于所述目标页面响应内容对所述目标页面组件进行渲染。

基于结构化数据，如Json数据，对预设组件进行Native渲染；Json数据可以对应着视频或图片等推送数据，采用Native渲染的方式，为用户带来更流畅的观感。

基于目标页面响应内容，如HTML数据，对目标页面组件进行webview渲染；HTML数据可以是针对用户搜索请求的搜索结果。

步骤S307：客户端将渲染后的所述预设组件和目标页面组件添加到目标页面的相应位置。

在一个实施例中，客户端在接收到结构化数据之后，接收到目标页面响应内容，所述预设组件所在的位置位于所述目标页面的上半部分。

通过以上具体实施例的描述，本领域技术人员易于理解本公开所提供的页面显示方法可分别适用于客户端和服务器端。

图4示出了根据本公开示例性实施例的异构数据流式传输的示意图。

服务器按照预设顺序对所述结构化数据，例如Json数据，和所述目标页面响应内容，例如HTML数据，进行封装，并通过流式传输协议将上述数据发送至客户端。在一个实施例中，Json数据是完整的视频数据，HTML数据被拆分成多个HTML片段，Json数据和多个HTML片段将通过流式传输协议按照预设的顺序传输给客户端，并在客户端进行片段的合成。

根据本公开的另一方面，提供了一种页面显示装置。如图5所示，页面显示装置500可以包括：发送单元501，被配置用于发送页面内容请求；接收单元502，被配置用于接收服务器返回的结构化数据和针对所述页面内容请求的目标页面响应内容，其中，所述结构化数据和所述目标页面响应内容为按照预设顺序来封装并传输的；确定单元503，被配置用于确定所述结构化数据相应的预设组件，以及所述目标页面响应内容相应的目标页面组件；第一渲染单元504，被配置用于基于所述结构数据对所述预设组件进行渲染；第二渲染单元505，被配置用于基于所述目标页面响应内容对所述目标页面组件进行渲染；以及添加单元506，被配置用于将渲染后的所述预设组件和目标页面组件添加到目标页面的相应位置，其中，所述目标页面中所述预设组件和目标页面组件之间的位置关系与所述预设顺序相关。

页面显示装置500的单元501-单元506的操作与前面描述的步骤S101-步骤S106的操作类似，在此不做赘述。

根据本公开的另一方面，还提供了一种页面显示装置。如图6所示，页面显示装置600可以包括：接收单元601，被配置用于从客户端接收页面内容请求；获取单元602，被配置用于基于所述页面内容请求，获取结构化数据和针对所述页面内容请求的目标页面响应内容；以及发送单元603，被配置用于按照预设顺序对所述结构化数据和所述目标页面响应内容进行封装并发送至所述客户端，其中，所述预设顺序与所述客户端的目标页面中结构化数据的待显示位置和目标页面响应内容的待显示位置之间的关系相关。

页面显示装置600的单元601-单元603的操作与前面描述的步骤S201-步骤S203的操作类似，在此不做赘述。

根据本公开的另一方面，还提供一种电子设备，包括：至少一个处理器；以及与所述至少一个处理器通信连接的存储器；其中所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行上述的页面显示的方法。

根据本公开的另一方面，还提供一种存储有计算机指令的非瞬时计算机可读存储介质，其中，所述计算机指令用于使所述计算机执行上述的页面显示的方法。

根据本公开的另一方面，还提供一种计算机程序产品，包括计算机程序，其中，所述计算机程序在被处理器执行时实现上述的页面显示的方法。

参考图7，现将描述可以作为本公开的服务器或客户端的电子设备700的结构框图，其是可以应用于本公开的各方面的硬件设备的示例。电子设备旨在表示各种形式的数字电子的计算机设备，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本公开的实现。

如图7所示，设备700包括计算单元701，其可以根据存储在只读存储器(ROM)702中的计算机程序或者从存储单元708加载到随机访问存储器(RAM)703中的计算机程序，来执行各种适当的动作和处理。在RAM 703中，还可存储设备700操作所需的各种程序和数据。计算单元701、ROM 702以及RAM 703通过总线704彼此相连。输入/输出(I/O)接口705也连接至总线704。

设备700中的多个部件连接至I/O接口705，包括：输入单元706、输出单元707、存储单元708以及通信单元709。输入单元706可以是能向设备700输入信息的任何类型的设备，输入单元706可以接收输入的数字或字符信息，以及产生与电子设备的用户设置和/或功能控制有关的键信号输入，并且可以包括但不限于鼠标、键盘、触摸屏、轨迹板、轨迹球、操作杆、麦克风和/或遥控器。输出单元707可以是能呈现信息的任何类型的设备，并且可以包括但不限于显示器、扬声器、视频/音频输出终端、振动器和/或打印机。存储单元708可以包括但不限于磁盘、光盘。通信单元709允许设备700通过诸如因特网的计算机网络和/或各种电信网络与其他设备交换信息/数据，并且可以包括但不限于调制解调器、网卡、红外通信设备、无线通信收发机和/或芯片组，例如蓝牙TM设备、1302.11设备、WiFi设备、WiMax设备、蜂窝通信设备和/或类似物。

计算单元701可以是各种具有处理和计算能力的通用和/或专用处理组件。计算单元701的一些示例包括但不限于中央处理单元(CPU)、图形处理单元(GPU)、各种专用的人工智能(AI)计算芯片、各种运行机器学习模型算法的计算单元、数字信号处理器(DSP)、以及任何适当的处理器、控制器、微控制器等。计算单元701执行上文所描述的各个方法和处理，例如页面显示方法。例如，在一些实施例中，页面显示方法可被实现为计算机软件程序，其被有形地包含于机器可读介质，例如存储单元708。在一些实施例中，计算机程序的部分或者全部可以经由ROM 702和/或通信单元709而被载入和/或安装到设备700上。当计算机程序加载到RAM 703并由计算单元701执行时，可以执行上文描述的页面显示方法的一个或多个步骤。备选地，在其他实施例中，计算单元701可以通过其他任何适当的方式(例如，借助于固件)而被配置为执行页面显示方法。

本文中以上描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、场可编程门阵列(FPGA)、专用集成电路(ASIC)、专用标准产品(ASSP)、芯片上系统的系统(SOC)、负载可编程逻辑设备(CPLD)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。

用于实施本公开的方法的程序代码可以采用一个或多个编程语言的任何组合来编写。这些程序代码可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器或控制器，使得程序代码当由处理器或控制器执行时使流程图和/或框图中所规定的功能/操作被实施。程序代码可以完全在机器上执行、部分地在机器上执行，作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。

在本公开的上下文中，机器可读介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。

为了提供与用户的交互，可以在计算机上实施此处描述的系统和技术，该计算机具有：用于向用户显示信息的显示装置(例如，CRT(阴极射线管)或者LCD(液晶显示器)监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。

可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如，作为数据服务器)、或者包括中间件部件的计算系统(例如，应用服务器)、或者包括前端部件的计算系统(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将系统的部件相互连接。通信网络的示例包括：局域网(LAN)、广域网(WAN)和互联网。

计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。

应该理解，可以使用上面所示的各种形式的流程，重新排序、增加或删除步骤。例如，本公开中记载的各步骤可以并行地执行、也可以顺序地或以不同的次序执行，只要能够实现本公开公开的技术方案所期望的结果，本文在此不进行限制。

虽然已经参照附图描述了本公开的实施例或示例，但应理解，上述的方法、系统和设备仅仅是示例性的实施例或示例，本发明的范围并不由这些实施例或示例限制，而是仅由授权后的权利要求书及其等同范围来限定。实施例或示例中的各种要素可以被省略或者可由其等同要素替代。此外，可以通过不同于本公开中描述的次序来执行各步骤。进一步地，可以以各种方式组合实施例或示例中的各种要素。重要的是随着技术的演进，在此描述的很多要素可以由本公开之后出现的等同要素进行替换。

Claims (24)

1.一种页面显示方法，包括：

发送页面内容请求；

接收服务器返回的结构化数据和针对所述页面内容请求的目标页面响应内容，其中，所述结构化数据和所述目标页面响应内容为按照预设顺序来封装并传输的，

并且其中，所述结构化数据和目标页面响应内容返回的顺序与其分别对应的组件在客户端页面上的位置关系相关；

确定所述结构化数据相应的预设组件，以及所述目标页面响应内容相应的目标页面组件；

基于所述结构化数据对所述预设组件进行渲染；

基于所述目标页面响应内容对所述目标页面组件进行渲染；以及

将渲染后的所述预设组件和目标页面组件添加到目标页面的相应位置，其中，所述目标页面中所述预设组件和目标页面组件之间的位置关系与所述预设顺序相关，

并且其中，所述目标页面中所述预设组件和目标页面组件的渲染顺序和添加顺序两者均与所述预设顺序相关。

2.根据权利要求1所述的方法，其中，所述结构化数据和目标页面响应内容互为异构数据。

3.根据权利要求2所述的方法，其中，所述结构化数据为Native数据，所述目标页面响应内容为HTML数据。

4.根据权利要求1-3中任一项所述的方法，其中，接收服务器返回的所述结构化数据包括：

接收服务器返回的所述结构化数据的多个第一片段，其中，所述目标页面响应内容和所述多个第一片段之间为按照预设顺序来封装并传输。

5.根据权利要求4所述的方法，其中，在接收到所述多个第一片段之后，接收到所述目标页面响应内容。

6.根据权利要求4所述的方法，其中，在接收到所述多个第一片段中的一部分第一片段之后，接收到所述目标页面响应内容。

7.根据权利要求1所述的方法，其中，接收服务器返回的针对所述页面内容请求的目标页面响应内容包括：

接收服务器返回的所述目标页面响应内容的多个第二片段，其中，所述结构化数据和所述多个第二片段之间为按照预设顺序来封装并传输。

8.根据权利要求7所述的方法，其中，在接收到所述结构化数据之后，接收到所述多个第二片段。

9.根据权利要求7所述的方法，其中，在接收到所述多个第二片段中的一部分第二片段之后，接收到所述结构化数据。

10.根据权利要求1所述的方法，其中，客户端包括Native引擎和webview引擎，所述页面内容请求为通过Native引擎来发送。

11.根据权利要求10所述的方法，其中，通过所述Native引擎接收服务器返回的所述结构化数据和针对所述页面内容请求的目标页面响应内容，

并且所述Native引擎将所述目标页面响应内容传送给webview引擎，以用于对所述目标页面组件进行渲染。

12.根据权利要求1所述的方法，其中，在接收到所述结构化数据之后，接收到所述目标页面响应内容，并且所述预设组件所在的位置位于所述目标页面的上半部分。

13.根据权利要求1所述的方法，其中，所述页面内容请求为搜索请求，所述目标页面响应内容包括针对所述搜索请求的搜索结果。

14.根据权利要求1所述的方法，其中，所述结构化数据和所述目标页面响应内容为基于流式传输协议来传输的，并且所述方法还包括：

在发送页面内容请求之前，确定客户端是否支持所述流式传输协议；以及

在所述页面内容请求中添加预设标记，所述预设标记用于指示所述客户端是否支持所述流式传输协议。

15.一种页面显示方法，包括：

从客户端接收页面内容请求；

基于所述页面内容请求，获取结构化数据和针对所述页面内容请求的目标页面响应内容；

按照预设顺序对所述结构化数据和所述目标页面响应内容进行封装并发送至所述客户端，其中，所述预设顺序与所述客户端的目标页面中所述结构化数据的待显示位置和所述目标页面响应内容的待显示位置之间的关系相关，

并且其中，所述结构化数据和目标页面响应内容返回所述客户端的顺序与其分别对应的组件在客户端页面上的位置关系相关。

16.根据权利要求15所述的方法，其中，按照预设顺序对所述结构化数据和所述目标页面响应内容进行封装并发送至所述客户端包括：

将所述结构化数据依次划分为多个第一片段；

按照所述预设顺序对所述目标页面响应内容和所述多个第一片段进行封装并发送至所述客户端。

17.根据权利要求15或16所述的方法，其中，按照预设顺序对所述结构化数据和所述目标页面响应内容进行封装并发送至所述客户端包括：

将所述目标页面响应内容依次划分为多个第二片段；

按照所述预设顺序对所述结构化数据和所述多个第二片段进行封装并发送至所述客户端。

18.根据权利要求15所述的方法，其中，所述结构化数据和所述目标页面响应内容为基于流式传输协议来传输的，所述页面内容请求包括预设标记，并且所述方法还包括：

基于所述预设标记确定所述客户端是否支持流式传输协议，

其中，获取结构化数据和针对所述页面内容请求的目标页面响应内容为响应于确定所述客户端支持流式传输协议而执行。

19.根据权利要求15所述的方法，还包括：

获取待推送数据，

其中，所述结构化数据为基于所述待推送数据而生成的。

20.一种页面显示装置，包括：

发送单元，被配置用于发送页面内容请求；

接收单元，被配置用于接收服务器返回的结构化数据和针对所述页面内容请求的目标页面响应内容，其中，所述结构化数据和所述目标页面响应内容为按照预设顺序来封装并传输的，

并且其中，所述结构化数据和目标页面响应内容返回的顺序与其分别对应的组件在客户端页面上的位置关系相关；

确定单元，被配置用于确定所述结构化数据相应的预设组件，以及所述目标页面响应内容相应的目标页面组件；

第一渲染单元，被配置用于基于所述结构化数据对所述预设组件进行渲染；

第二渲染单元，被配置用于基于所述目标页面响应内容对所述目标页面组件进行渲染；以及

添加单元，被配置用于将渲染后的所述预设组件和目标页面组件添加到目标页面的相应位置，其中，所述目标页面中所述预设组件和目标页面组件之间的位置关系与所述预设顺序相关，

并且其中，所述目标页面中所述预设组件和目标页面组件的渲染顺序和添加顺序两者均与所述预设顺序相关。

21.一种页面显示装置，包括：

接收单元，被配置用于从客户端接收页面内容请求；

获取单元，被配置用于基于所述页面内容请求，获取结构化数据和针对所述页面内容请求的目标页面响应内容；

发送单元，被配置用于按照预设顺序对所述结构化数据和所述目标页面响应内容进行封装并发送至所述客户端，其中，所述预设顺序与所述客户端的目标页面中结构化数据的待显示位置和目标页面响应内容的待显示位置之间的关系相关，

并且其中，所述结构化数据和目标页面响应内容返回所述客户端的顺序与其分别对应的组件在客户端页面上的位置关系相关。

22.一种电子设备，包括：

至少一个处理器；以及

与所述至少一个处理器通信连接的存储器；其中

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行权利要求1-19中任一项所述的方法。

23.一种存储有计算机指令的非瞬时计算机可读存储介质，其中，所述计算机指令用于使所述计算机执行根据权利要求1-19中任一项所述的方法。

24.一种计算机程序产品，包括计算机程序，其中，所述计算机程序在被处理器执行时实现权利要求1-19中任一项所述的方法。

Images