CN111339462B - 一种组件渲染方法、装置、服务器、终端和介质 - Google Patents

Abstract

本申请公开了一种组件渲染方法、装置、服务器、终端和介质，涉及前端渲染技术。具体实现方案为：响应来自终端的目标组件渲染请求，使用目标组件中的第一状态结构进行一级渲染，得到所述目标组件的第一状态页面，其中，所述目标组件中包括第一状态结构和第二状态结构；将所述第一状态页面发送至所述终端，使所述终端执行如下操作：显示所述第一状态页面，使用所述目标组件中的第二状态结构进行二级渲染，得到第二状态页面，并显示所述第二状态页面。本申请实施例基于组件设定双状态模式，在服务器和终端两侧实现组件的分状态渲染，使两端执行不同状态逻辑产出不同复杂度的HTML页面，降低服务器执行渲染逻辑的复杂度，从而提高服务器的性能和稳定性。

Description

一种组件渲染方法、装置、服务器、终端和介质

技术领域

本申请涉及互联网技术领域，尤其涉及一种前端渲染技术，具体涉及一种组件渲染方法、装置、服务器、终端和介质。

背景技术

前端侧的服务端渲染方案(Server-Side Rendering)简称SSR，是目前基于主流前端框架(如React、Vue等)将前端构建产物部署至服务端，由服务端执行渲染产出HTML结构发送至浏览器，再由浏览器基于框架进行激活(事件绑定，生命周期事件触发等)，实现可交互的前端应用程序。主要用以加快用户侧的页面呈现速度，以及加强SEO(搜索引擎优化)和优化前后端分离。而越来越复杂的前端组件与应用逻辑，使得服务端渲染的负载不断增大，对服务端的性能与稳定性带来一定影响。

为解决该问题，现有技术通常是采取SSR缓存方案，包括页面级别缓存、组件级别缓存或者数据级别缓存，然而，这些缓存方案无法适用于所有场景，例如，用户特定内容的场景，数据量很大的场景，复杂的页面或组件渲染场景等。

发明内容

本申请实施例提供一种组件渲染方法、装置、服务器、终端和介质，以解决SSR服务端渲染因负载不断增大而影响服务端性能与稳定性的问题。

第一方面，本申请实施例提供了一种组件渲染方法，应用于服务器，所述方法包括：

响应来自终端的目标组件渲染请求，使用所述目标组件中的第一状态结构进行一级渲染，得到所述目标组件的第一状态页面，其中，所述目标组件中包括第一状态结构和第二状态结构；

将所述第一状态页面发送至所述终端，使所述终端执行如下操作：显示所述第一状态页面，使用所述目标组件中的第二状态结构进行二级渲染，得到第二状态页面，并显示所述第二状态页面。

上述申请中的一个实施例具有如下优点或有益效果：基于组件设定第一状态与第二状态的双状态模式，使服务器使用第一状态结构进行一级渲染，由终端先显示一级渲染出的第一状态页面，然后再使用第二状态进行二级渲染，得到第二状态页面并显示，从而实现分状态渲染，使服务器和终端执行不同状态逻辑产出不同复杂度的HTML页面，以降低服务器执行渲染逻辑的复杂度，从而提高服务器的性能和稳定性。

可选的，所述第一状态结构包括呈现态结构，所述第二状态结构包括交互态结构。

上述申请中的一个实施例具有如下优点或有益效果：将能够呈现组件所需的基本HTML结构作为呈现态结构，将组件其他的复杂结构作为交互态结构，使服务器和终端执行不同状态逻辑产出不同复杂度的HTML页面，以降低服务器执行渲染逻辑的复杂度，从而提高服务器的性能和稳定性。同时，终端还可以先显示基于呈现态结构渲染的页面，当基于交互态结构进行的二级渲染完毕，再显示最终的交互态页面，实现了渐进式地页面显示，避免在页面打开过程中用户长时间的等待。

可选的，响应来自终端的目标组件渲染请求，使用所述目标组件中的第一状态结构进行一级渲染，包括：

响应来自终端的目标组件渲染请求，基于服务器侧的环境状态值，使用所述目标组件中的第一状态结构进行一级渲染，其中，所述服务器侧的环境状态值用于判定当前执行环境是否位于服务器侧。

上述申请中的一个实施例具有如下优点或有益效果：将环境状态值作为判定条件，服务器侧的环境状态值表示当前执行环境位于服务器侧时，则由服务器执行一级渲染，终端侧的环境状态值表示当前执行环境位于终端侧时，则由终端执行二级渲染，从而使两侧的分状态渲染成为可能。

第二方面，本申请实施例还提供了一种组件渲染方法，应用于终端，所述方法包括：

接收服务器发送的第一状态页面，并显示所述第一状态页面，其中，所述第一状态页面是所述服务器响应来自所述终端的目标组件渲染请求，使用所述目标组件中的第一状态结构进行一级渲染而得到，所述目标组件中包括第一状态结构和第二状态结构；

使用所述目标组件中的第二状态结构进行二级渲染，得到第二状态页面，并显示所述第二状态页面。

上述申请中的一个实施例具有如下优点或有益效果：基于组件设定第一状态与第二状态的双状态模式，使服务器使用第一状态结构进行一级渲染，再由终端先显示一级渲染出的第一状态页面，然后再使用第二状态进行二级渲染，得到第二状态页面并显示，从而实现分状态渲染，使服务器和终端执行不同状态逻辑产出不同复杂度的HTML页面，以降低服务器执行渲染逻辑的复杂度，从而提高服务器的性能和稳定性。

可选的，所述第一状态结构包括呈现态结构，所述第二状态结构包括交互态结构。

上述申请中的一个实施例具有如下优点或有益效果：将能够呈现组件所需的基本HTML结构作为呈现态结构，将组件其他的复杂结构作为交互态结构，使服务器和终端执行不同状态逻辑产出不同复杂度的HTML页面，以降低服务器执行渲染逻辑的复杂度，从而提高服务器的性能和稳定性。同时，终端还可以先显示基于呈现态结构渲染的页面，当基于交互态结构进行的二级渲染完毕，再显示最终的交互态页面，实现了渐进式地页面显示，避免在页面打开过程中用户长时间的等待。

可选的，在所述显示所述第一状态页面之前，所述方法还包括：对所述第一状态页面进行激活。

上述申请中的一个实施例具有如下优点或有益效果：通过激活则可以实现事件绑定、生命周期事件触发等页面状态。

可选的，所述使用所述目标组件中的第二状态结构进行二级渲染，包括：

基于终端侧的环境状态值，使用所述目标组件中的第二状态结构进行二级渲染，其中，所述终端侧的环境状态值用于判定当前执行环境是否位于终端侧。

上述申请中的一个实施例具有如下优点或有益效果：将环境状态值作为判定条件，服务器侧的环境状态值表示当前执行环境位于服务器侧时，则由服务器执行一级渲染，终端侧的环境状态值表示当前执行环境位于终端侧时，则由终端执行二级渲染，从而使两侧的分状态渲染成为可能。

可选的，所述显示所述第二状态页面，包括：

将所述第二状态页面更新至所述第一状态页面，以显示所述第二状态页面。

上述申请中的一个实施例具有如下优点或有益效果：先显示第一状态页面，然后基于二级渲染得到的第二状态页面对其进行更新，以显示出第二状态页面，实现了页面的渐进式显示过程，减少用户在终端等待的时间，提高组件渲染效率的同时，也提高了用户体验。

第三方面，本申请实施例还提供了一种组件渲染装置，配置于服务器，所述装置包括：

一级渲染模块，用于响应来自终端的目标组件渲染请求，使用所述目标组件中的第一状态结构进行一级渲染，得到所述目标组件的第一状态页面，其中，所述目标组件中包括第一状态结构和第二状态结构；

发送模块，用于将所述第一状态页面发送至所述终端，使所述终端执行如下操作：显示所述第一状态页面，使用所述目标组件中的第二状态结构进行二级渲染，得到第二状态页面，并显示所述第二状态页面。

第四方面，本申请实施例还提供了一种组件渲染装置，配置于终端，所述装置包括：

接收显示模块，用于接收服务器发送的第一状态页面，并显示所述第一状态页面，其中，所述第一状态页面是所述服务器响应来自所述终端的目标组件渲染请求，使用所述目标组件中的第一状态结构进行一级渲染而得到，所述目标组件中包括第一状态结构和第二状态结构；

二级渲染模块，用于使用所述目标组件中的第二状态结构进行二级渲染，得到第二状态页面，并显示所述第二状态页面。

第五方面，本申请实施例还提供了一种服务器，包括：

至少一个处理器；以及

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

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行本申请任意实施例所述的应用于服务器的组件渲染方法。

第六方面，本申请实施例还提供了一种终端，包括：

至少一个处理器；以及

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

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行本申请任意实施例所述的应用于终端的组件渲染方法。

第七方面，本申请实施例还提供了一种存储有计算机指令的非瞬时计算机可读存储介质，所述计算机指令用于使所述计算机执行本申请任意实施例所述的应用于服务器的组件渲染方法。

第八方面，本申请实施例还提供了一种存储有计算机指令的非瞬时计算机可读存储介质，所述计算机指令用于使所述计算机执行本申请任意实施例所述的应用于终端的组件渲染方法。

上述申请中的一个实施例具有如下优点或有益效果：基于组件设定第一状态与第二状态的双状态模式，使服务器使用第一状态结构进行一级渲染，再由终端先显示一级渲染出的第一状态页面，然后再使用第二状态进行二级渲染，得到第二状态页面并显示，从而实现分状态渲染，使服务器和终端执行不同状态逻辑产出不同复杂度的HTML页面，以降低服务器执行渲染逻辑的复杂度，从而提高服务器的性能和稳定性。

上述可选方式所具有的其他效果将在下文中结合具体实施例加以说明。

附图说明

附图用于更好地理解本方案，不构成对本申请的限定。其中：

图1是根据本申请第一实施例的组件渲染方法的流程示意图；

图2是根据本申请第二实施例的组件渲染方法的流程示意图；

图3是根据本申请第三实施例的组件渲染装置的结构示意图；

图4是根据本申请第四实施例的组件渲染装置的结构示意图；

图5是用来实现本申请实施例的组件渲染方法的服务器的框图；

图6是用来实现本申请实施例的组件渲染方法的终端的框图。

具体实施方式

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

图1是根据本申请第一实施例的组件渲染方法的流程示意图，本实施例可适用于基于前端侧的请求进行组件渲染的情况。该方法可由一种组件渲染装置来执行，该装置采用软件和/或硬件的方式实现，优选是配置于服务器中。如图1所示，该方法具体包括如下：

S101、响应来自终端的目标组件渲染请求，使用所述目标组件中的第一状态结构进行一级渲染，得到所述目标组件的第一状态页面，其中，所述目标组件中包括第一状态结构和第二状态结构。

当用户在终端上触发针对前端的目标组件的展现请求时，终端需要在浏览器上显示目标组件，该目标组件可以包括一个页面，也可以包括多个页面。然后，终端会将目标组件的渲染请求发送到服务器，请求服务器对目标组件的页面进行渲染。

由于前端组件与应用逻辑越来越复杂，使得服务器渲染的负载不断增大，使得现有技术中，组件渲染的效率降低，对服务器的性能与稳定性带来一定的影响。而本申请实施例中，则采用在服务器和终端进行分状态渲染的方式，由服务器使用第一状态结构进行一级渲染，然后再由终端使用第二状态结构进行二级渲染，得到最终的页面，而由于服务器无需对全部组件结构进行渲染，因此可以降低服务器执行渲染逻辑的复杂度。示例性的，还可以让第一状态结构的复杂度低于第二状态结构，从而进一步降低服务器执行渲染逻辑的复杂度。

在一种实施方式中，所述第一状态结构包括呈现态结构，所述第二状态结构包括交互态结构。具体的，开发人员从业务角度、逻辑角度，预先对各种前端组件的状态进行支持，将能够呈现组件所需的基本HTML结构作为呈现态结构，将组件原有的复杂结构，例如最终可交互的HTML结构、js逻辑等，作为交互态结构，从而将原有的组件结构拆分为呈现态结构和交互态结构，并使得这两种结构并存于组件中，为实现分状态渲染做准备。以图片轮播组件为例，交互态的HTML结构包含轮播的多个item的结构以及其他事件按钮等，相对较为复杂。而对于呈现态所需的结构仅需要一张图片占位，便可达到基本呈现的需求效果。还需要说明的是，所述呈现态结构和交互态结构仅为示例，本申请实施例对第一状态结构和第二状态结构的具体内容不做任何限定。

进一步的，由于所述目标组件中包括第一状态结构和第二状态结构，那么使用所述第一状态结构进行一级渲染，即可得到所述目标组件的第一状态页面。示例性的，当所述第一状态结构为呈现态结构时，所述第一状态页面也即满足目标组件基本呈现需求的页面。

在一种具体的实施方式中，响应来自终端的目标组件渲染请求，使用所述目标组件中的第一状态结构进行一级渲染，包括：

响应来自终端的目标组件渲染请求，基于服务器侧的环境状态值，使用所述目标组件中的第一状态结构进行一级渲染，其中，所述服务器侧的环境状态值用于判定当前执行环境是否位于服务器侧。

在SSR中，服务器侧和终端侧运行着相同的组件逻辑，为了实现二者的分状态渲染，则利用环境状态值作为判定条件，让服务器判断当前服务器侧的环境状态值是否位于服务器侧，当判断为是时，则执行所述一级渲染。而由于服务器侧的环境状态值在获取后并不会发生改变，且表示执行环境是位于服务器侧，因此，服务器就会使用第一状态结构进行一级渲染，而不是如现有技术中进行组件的整体渲染，无形中增加了服务器执行渲染的复杂度。

具体的，执行环境下，可将构建至服务器的Bundle中设定全局变量进行标识，或者通过环境变量来获取当前执行环境的信息，从而作为所述服务器侧的环境状态值。例如，VUE(一种前端框架)下可直接使用框架内置实例属性$isServer来获取执行环境信息。

S102、将所述第一状态页面发送至所述终端，使所述终端执行如下操作：显示所述第一状态页面，使用所述目标组件中的第二状态结构进行二级渲染，得到第二状态页面，并显示所述第二状态页面。

其中，第一状态页面并非包括目标组件全部状态的页面，还需要由终端使用第二状态进行二级渲染，得到的第二状态页面即为包括目标组件全部状态的页面，并显示第二状态页面。

以第一状态结构为呈现态结构，第二状态结构为交互态结构为例进行说明。具体的，呈现态页面是满足目标组件所需的基本HTML结构，而为了在终端显示出最终的包括其他复杂状态的目标组件，还需要由终端使用交互态结构进行二级渲染，即可得到最终的交互态页面，并显示出来。而所述呈现态页面和交互态页面的渐进式显示过程，则减少了用户在终端等待的时间，提高组件渲染效率的同时，也提高了用户体验。

此外，在另一种实施方式中，在本申请实施例的分状态渲染方案的基础上，还可以结合缓存方式，在事宜的场景进行优化。例如，在服务器进行一级渲染时，如果缓存区存储有与当前的目标组件的第一状态结构相同的HTML结构，则可以直接采用缓存区的页面结构，而无需进行一级渲染，从而进一步提高服务器渲染的效率，降低复杂度。

本申请实施例的技术方案，基于组件设定第一状态与第一状态的双状态模式，使服务器使用第一状态结构进行一级渲染，由终端先显示一级渲染出的第一状态页面，然后再使用第二状态进行二级渲染，得到第二状态页面并显示，从而实现分状态渲染，使服务器和终端执行不同状态逻辑产出不同复杂度的HTML页面，以降低服务器执行渲染逻辑的复杂度，从而提高服务器的性能和稳定性。

图2是根据本申请第二实施例的组件渲染方法的流程示意图，本实施例可适用于基于前端侧的请求进行组件渲染的情况。该方法可由一种组件渲染装置来执行，该装置采用软件和/或硬件的方式实现，优选是配置于终端中。如图2所示，该方法具体包括如下：

S201、接收服务器发送的第一状态页面，并显示所述第一状态页面，其中，所述第一状态页面是所述服务器响应来自所述终端的目标组件渲染请求，使用所述目标组件中的第一状态结构进行一级渲染而得到，所述目标组件中包括第一状态结构和第二状态结构。

可选的，所述第一状态结构包括呈现态结构，所述第二状态结构包括交互态结构。而关于服务器针对第一状态页面的一级渲染操作，与上述实施例中描述的相同，此处不再赘述。

此外，在所述显示所述第一状态页面之前，所述方法还包括：对所述第一状态页面进行激活。通过激活，则可以实现事件绑定、生命周期事件触发等页面状态，得到一个完整的第一状态页面进行显示。具体的，服务器发送的第一状态页面中可以包括SSR的标识或标签以及相关数据，用于表示呈现态页面中的一些状态，激活的操作则可以是对这些标识或者标签进行解析，以实现事件绑定、生命周期事件触发等页面状态。

S202、使用所述目标组件中的第二状态结构进行二级渲染，得到第二状态页面，并显示所述第二状态页面。

以第一状态结构为呈现态结构，第二状态结构为交互态结构为例，终端先显示满足目标组件所需的基本HTML结构的呈现态页面，让用户可以在终端上看到最基本的一个页面，不至于等待过久。然后，终端再使用目标组件中的交互态结构进行二级渲染，得到交互态页面，将所述交互态页面更新至所述呈现态页面，即可显示所述交互态页面。这样的渐进式显示过程，减少了用户在终端等待的时间，提高组件渲染效率的同时，也提高了用户体验。而在服务器侧，也减少了其渲染逻辑的复杂度。

在一种实施方式中，所述使用所述目标组件中的第二状态结构进行二级渲染，包括：

基于终端侧的环境状态值，使用所述目标组件中的第二状态结构进行二级渲染，其中，所述终端侧的环境状态值用于判定当前执行环境是否位于终端侧。

类似于服务器侧的环境状态值，终端侧的环境状态值是用于判定当前执行环境是否位于终端侧。而由于终端每次获取的终端侧的环境状态值并不会发生改变，且表示执行环境是位于终端侧，因此，终端就会使用第二状态结构进行二级渲染，从而得到目标组件的最终页面。

具体的，执行环境下，可通过环境变量或浏览器特征检测来获取当前执行环境的信息，从而作为所述终端侧的环境状态值。

本申请实施例的技术方案，基于组件设定第一状态与第二状态的双状态模式，使服务器使用第一状态结构进行一级渲染，由终端先显示一级渲染出的第一状态页面，然后再使用第二状态进行二级渲染，得到第二状态页面并显示，从而实现分状态渲染，使服务器和终端执行不同状态逻辑产出不同复杂度的HTML页面，以降低服务器执行渲染逻辑的复杂度，从而提高服务器的性能和稳定性。

图3是根据本申请第三实施例的组件渲染装置的结构示意图，本实施例可适用于基于前端侧的请求进行组件渲染的情况。该装置可实现本申请任意实施例所述的应用于服务器的组件渲染方法。如图3所示，该装置300具体包括：

一级渲染模块301，用于响应来自终端的目标组件渲染请求，使用所述目标组件中的第一状态结构进行一级渲染，得到所述目标组件的第一状态页面，其中，所述目标组件中包括第一状态结构和第二状态结构；

发送模块302，用于将所述第一状态页面发送至所述终端，使所述终端执行如下操作：显示所述第一状态页面，使用所述目标组件中的第二状态结构进行二级渲染，得到第二状态页面，并显示所述第二状态页面。

可选的，所述一级渲染模块，具体用于：

响应来自终端的目标组件渲染请求，基于服务器侧的环境状态值，使用所述目标组件中的第一状态结构进行一级渲染，其中，所述服务器侧的环境状态值用于判定当前执行环境是否位于服务器侧。

本申请实施例提供的组件渲染装置300可执行本申请任意实施例提供的应用于服务器的组件渲染方法，具备执行方法相应的功能模块和有益效果。本实施例中未详尽描述的内容可以参考本申请任意方法实施例中的描述。

图4是根据本申请第四实施例的组件渲染装置的结构示意图，本实施例可适用于基于前端侧的请求进行组件渲染的情况。该装置可实现本申请任意实施例所述的应用于终端的组件渲染方法。如图4所示，该装置400具体包括：

接收显示模块401，用于接收服务器发送的第一状态页面，并显示所述第一状态页面，其中，所述第一状态页面是所述服务器响应来自所述终端的目标组件渲染请求，使用所述目标组件中的第一状态结构进行一级渲染而得到，所述目标组件中包括第一状态结构和第二状态结构；

二级渲染模块402，用于使用所述目标组件中的第二状态结构进行二级渲染，得到第二状态页面，并显示所述第二状态页面。

可选的，所述装置还包括激活模块，用于在所述接收显示模块显示所述第一状态页面之前，对所述第一状态页面进行激活。

可选的，所述二级渲染模块，具体用于：

基于终端侧的环境状态值，使用所述目标组件中的第二状态结构进行二级渲染，其中，所述终端侧的环境状态值用于判定当前执行环境是否位于终端侧。

可选的，所述二级渲染模块，具体用于：

将所述第二状态页面更新至所述第一状态页面，以显示所述第二状态页面。

本申请实施例提供的组件渲染装置400可执行本申请任意实施例提供的应用于终端的组件渲染方法，具备执行方法相应的功能模块和有益效果。本实施例中未详尽描述的内容可以参考本申请任意方法实施例中的描述。

根据本申请的实施例，本申请还提供了一种服务器和一种可读存储介质。

如图5所示，是根据本申请实施例的应用于服务器的组件渲染方法的服务器的框图。服务器旨在表示各种形式的数字计算机，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。服务器还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本申请的实现。

如图5所示，该服务器包括：一个或多个处理器501、存储器502，以及用于连接各部件的接口，包括高速接口和低速接口。各个部件利用不同的总线互相连接，并且可以被安装在公共主板上或者根据需要以其它方式安装。处理器可以对在服务器内执行的指令进行处理，包括存储在存储器中或者存储器上以在外部输入/输出装置(诸如，耦合至接口的显示设备)上显示GUI的图形信息的指令。在其它实施方式中，若需要，可以将多个处理器和/或多条总线与多个存储器和多个存储器一起使用。同样，可以连接多个服务器，各个服务器提供部分必要的操作(例如，作为服务器阵列、一组刀片式服务器、或者多处理器系统)。图5中以一个处理器501为例。

存储器502即为本申请所提供的非瞬时计算机可读存储介质。其中，所述存储器存储有可由至少一个处理器执行的指令，以使所述至少一个处理器执行本申请所提供的应用于服务器的组件渲染方法。本申请的非瞬时计算机可读存储介质存储计算机指令，该计算机指令用于使计算机执行本申请所提供的应用于服务器的组件渲染方法。

存储器502作为一种非瞬时计算机可读存储介质，可用于存储非瞬时软件程序、非瞬时计算机可执行程序以及模块，如本申请实施例中的组件渲染方法对应的程序指令/模块(例如，附图3所示的一级渲染模块301和发送模块302)。处理器501通过运行存储在存储器502中的非瞬时软件程序、指令以及模块，从而执行服务器的各种功能应用以及数据处理，即实现上述方法实施例中的应用于服务器的组件渲染方法。

存储器502可以包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需要的应用程序；存储数据区可存储根据实现本申请实施例的应用于服务器的组件渲染方法的服务器的使用所创建的数据等。此外，存储器502可以包括高速随机存取存储器，还可以包括非瞬时存储器，例如至少一个磁盘存储器件、闪存器件、或其他非瞬时固态存储器件。在一些实施例中，存储器502可选包括相对于处理器501远程设置的存储器，这些远程存储器可以通过网络连接至实现本申请实施例的应用于服务器的组件渲染方法的服务器。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

实现本申请实施例的应用于服务器的组件渲染方法的服务器还可以包括：输入装置503和输出装置504。处理器501、存储器502、输入装置503和输出装置504可以通过总线或者其他方式连接，图5中以通过总线连接为例。

输入装置503可接收输入的数字或字符信息，以及产生与实现本申请实施例的应用于服务器的组件渲染方法的服务器的用户设置以及功能控制有关的键信号输入，例如触摸屏、小键盘、鼠标、轨迹板、触摸板、指示杆、一个或者多个鼠标按钮、轨迹球、操纵杆等输入装置。输出装置504可以包括显示设备、辅助照明装置(例如，LED)和触觉反馈装置(例如，振动电机)等。该显示设备可以包括但不限于，液晶显示器(LCD)、发光二极管(LED)显示器和等离子体显示器。在一些实施方式中，显示设备可以是触摸屏。

此处描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、专用ASIC(专用集成电路)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。

这些计算程序(也称作程序、软件、软件应用、或者代码)包括可编程处理器的机器指令，并且可以利用高级过程和/或面向对象的编程语言、和/或汇编/机器语言来实施这些计算程序。如本文使用的，术语“机器可读介质”和“计算机可读介质”指的是用于将机器指令和/或数据提供给可编程处理器的任何计算机程序产品、设备、和/或装置(例如，磁盘、光盘、存储器、可编程逻辑装置(PLD))，包括，接收作为机器可读信号的机器指令的机器可读介质。术语“机器可读信号”指的是用于将机器指令和/或数据提供给可编程处理器的任何信号。

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

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

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

根据本申请实施例的技术方案，基于组件设定第一状态与第二状态的双状态模式，使服务器使用第一状态结构进行一级渲染，由终端先显示一级渲染出的第一状态页面，然后再使用第二状态进行二级渲染，得到第二状态页面并显示，从而实现分状态渲染，使服务器和终端执行不同状态逻辑产出不同复杂度的HTML页面，以降低服务器执行渲染逻辑的复杂度，从而提高服务器的性能和稳定性。

此外，根据本申请的实施例，本申请还提供了一种终端和另一种可读存储介质。

如图6所示，该终端包括：一个或多个处理器601、存储器602，以及用于连接各部件的接口，包括高速接口和低速接口。各个部件利用不同的总线互相连接，并且可以被安装在公共主板上或者根据需要以其它方式安装。处理器可以对在终端内执行的指令进行处理，包括存储在存储器中或者存储器上以在外部输入/输出装置(诸如，耦合至接口的显示设备)上显示GUI的图形信息的指令。在其它实施方式中，若需要，可以将多个处理器和/或多条总线与多个存储器和多个存储器一起使用。同样，可以连接多个终端，各个设备提供部分必要的操作(例如，作为服务器阵列、一组刀片式服务器、或者多处理器系统)。图6中以一个处理器601为例。

存储器602即为本申请所提供的非瞬时计算机可读存储介质。其中，所述存储器存储有可由至少一个处理器执行的指令，以使所述至少一个处理器执行本申请所提供的应用于终端的组件渲染方法。本申请的非瞬时计算机可读存储介质存储计算机指令，该计算机指令用于使计算机执行本申请所提供的应用于终端的组件渲染方法。

存储器602作为一种非瞬时计算机可读存储介质，可用于存储非瞬时软件程序、非瞬时计算机可执行程序以及模块，如本申请实施例中的应用于终端的组件渲染方法对应的程序指令/模块(例如，附图4所示的接收显示模块401和二级渲染模块402)。处理器601通过运行存储在存储器602中的非瞬时软件程序、指令以及模块，从而执行服务器的各种功能应用以及数据处理，即实现上述方法实施例中的应用于终端的组件渲染方法。

存储器602可以包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需要的应用程序；存储数据区可存储根据实现本申请实施例的应用于终端的组件渲染方法的终端的使用所创建的数据等。此外，存储器602可以包括高速随机存取存储器，还可以包括非瞬时存储器，例如至少一个磁盘存储器件、闪存器件、或其他非瞬时固态存储器件。在一些实施例中，存储器602可选包括相对于处理器601远程设置的存储器，这些远程存储器可以通过网络连接至实现本申请实施例的应用于终端的组件渲染方法的终端。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

实现本申请实施例的应用于终端的组件渲染方法的终端还可以包括：输入装置603和输出装置604。处理器601、存储器602、输入装置603和输出装置604可以通过总线或者其他方式连接，图6中以通过总线连接为例。

输入装置603可接收输入的数字或字符信息，以及产生与实现本申请实施例的应用于终端的组件渲染方法的终端的用户设置以及功能控制有关的键信号输入，例如触摸屏、小键盘、鼠标、轨迹板、触摸板、指示杆、一个或者多个鼠标按钮、轨迹球、操纵杆等输入装置。输出装置604可以包括显示设备、辅助照明装置(例如，LED)和触觉反馈装置(例如，振动电机)等。该显示设备可以包括但不限于，液晶显示器(LCD)、发光二极管(LED)显示器和等离子体显示器。在一些实施方式中，显示设备可以是触摸屏。

此处描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、专用ASIC(专用集成电路)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。

这些计算程序(也称作程序、软件、软件应用、或者代码)包括可编程处理器的机器指令，并且可以利用高级过程和/或面向对象的编程语言、和/或汇编/机器语言来实施这些计算程序。如本文使用的，术语“机器可读介质”和“计算机可读介质”指的是用于将机器指令和/或数据提供给可编程处理器的任何计算机程序产品、设备、和/或装置(例如，磁盘、光盘、存储器、可编程逻辑装置(PLD))，包括，接收作为机器可读信号的机器指令的机器可读介质。术语“机器可读信号”指的是用于将机器指令和/或数据提供给可编程处理器的任何信号。

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

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

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

根据本申请实施例的技术方案，基于组件设定第一状态与第二状态的双状态模式，使服务器使用第一状态结构进行一级渲染，由终端先显示一级渲染出的第一状态页面，然后再使用第二状态进行二级渲染，得到第二状态页面并显示，从而实现分状态渲染，使服务器和终端执行不同状态逻辑产出不同复杂度的HTML页面，以降低服务器执行渲染逻辑的复杂度，从而提高服务器的性能和稳定性。

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

上述具体实施方式，并不构成对本申请保护范围的限制。本领域技术人员应该明白的是，根据设计要求和其他因素，可以进行各种修改、组合、子组合和替代。任何在本申请的精神和原则之内所作的修改、等同替换和改进等，均应包含在本申请保护范围之内。

Claims (16)

1.一种组件渲染方法，应用于服务器，其特征在于，所述方法包括：

响应来自终端的目标组件渲染请求，使用所述目标组件中的第一状态结构进行一级渲染，得到所述目标组件的第一状态页面，其中，所述目标组件中包括第一状态结构和第二状态结构；

将所述第一状态页面发送至所述终端，使所述终端执行如下操作：显示所述第一状态页面，使用所述目标组件中的第二状态结构进行二级渲染，得到第二状态页面，并显示所述第二状态页面；

其中，所述第一状态结构和所述第二状态结构，分别是对所述目标组件的结构拆分后得到的呈现态结构和交互态结构，且所述第一状态结构的复杂度低于所述第二状态结构；

所述第一状态页面为满足所述目标组件呈现需求的页面；所述第二状态页面为包括所述目标组件全部状态的页面。

2.根据权利要求1所述的方法，其特征在于，响应来自终端的目标组件渲染请求，使用所述目标组件中的第一状态结构进行一级渲染，包括：

响应来自终端的目标组件渲染请求，基于服务器侧的环境状态值，使用所述目标组件中的第一状态结构进行一级渲染，其中，所述服务器侧的环境状态值用于判定当前执行环境是否位于服务器侧。

3.一种组件渲染方法，应用于终端，其特征在于，所述方法包括：

接收服务器发送的第一状态页面，并显示所述第一状态页面，其中，所述第一状态页面是所述服务器响应来自所述终端的目标组件渲染请求，使用所述目标组件中的第一状态结构进行一级渲染而得到，所述目标组件中包括第一状态结构和第二状态结构；

使用所述目标组件中的第二状态结构进行二级渲染，得到第二状态页面，并显示所述第二状态页面；

其中，所述第一状态结构和所述第二状态结构，分别是对所述目标组件的结构拆分后得到的呈现态结构和交互态结构，且所述第一状态结构的复杂度低于所述第二状态结构；

所述第一状态页面为满足所述目标组件呈现需求的页面；所述第二状态页面为包括所述目标组件全部状态的页面。

4.根据权利要求3所述的方法，其特征在于，在所述显示所述第一状态页面之前，所述方法还包括：对所述第一状态页面进行激活。

5.根据权利要求3所述的方法，其特征在于，所述使用所述目标组件中的第二状态结构进行二级渲染，包括：

基于终端侧的环境状态值，使用所述目标组件中的第二状态结构进行二级渲染，其中，所述终端侧的环境状态值用于判定当前执行环境是否位于终端侧。

6.根据权利要求3所述的方法，其特征在于，所述显示所述第二状态页面，包括：

将所述第二状态页面更新至所述第一状态页面，以显示所述第二状态页面。

7.一种组件渲染装置，配置于服务器，其特征在于，所述装置包括：

一级渲染模块，用于响应来自终端的目标组件渲染请求，使用所述目标组件中的第一状态结构进行一级渲染，得到所述目标组件的第一状态页面，其中，所述目标组件中包括第一状态结构和第二状态结构；

发送模块，用于将所述第一状态页面发送至所述终端，使所述终端执行如下操作：显示所述第一状态页面，使用所述目标组件中的第二状态结构进行二级渲染，得到第二状态页面，并显示所述第二状态页面；

其中，所述第一状态结构和所述第二状态结构，分别是对所述目标组件的结构拆分后得到的呈现态结构和交互态结构，且所述第一状态结构的复杂度低于所述第二状态结构；

所述第一状态页面为满足所述目标组件呈现需求的页面；所述第二状态页面为包括所述目标组件全部状态的页面。

8.根据权利要求7所述的装置，其特征在于，所述一级渲染模块，具体用于：

响应来自终端的目标组件渲染请求，基于服务器侧的环境状态值，使用所述目标组件中的第一状态结构进行一级渲染，其中，所述服务器侧的环境状态值用于判定当前执行环境是否位于服务器侧。

9.一种组件渲染装置，配置于终端，其特征在于，所述装置包括：

接收显示模块，用于接收服务器发送的第一状态页面，并显示所述第一状态页面，其中，所述第一状态页面是所述服务器响应来自所述终端的目标组件渲染请求，使用所述目标组件中的第一状态结构进行一级渲染而得到，所述目标组件中包括第一状态结构和第二状态结构；

二级渲染模块，用于使用所述目标组件中的第二状态结构进行二级渲染，得到第二状态页面，并显示所述第二状态页面；

其中，所述第一状态结构和所述第二状态结构，分别是对所述目标组件的结构拆分后得到的呈现态结构和交互态结构，且所述第一状态结构的复杂度低于所述第二状态结构；

所述第一状态页面为满足所述目标组件呈现需求的页面；所述第二状态页面为包括所述目标组件全部状态的页面。

10.根据权利要求9所述的装置，其特征在于，所述装置还包括激活模块，用于在所述接收显示模块显示所述第一状态页面之前，对所述第一状态页面进行激活。

11.根据权利要求9所述的装置，其特征在于，所述二级渲染模块，具体用于：

基于终端侧的环境状态值，使用所述目标组件中的第二状态结构进行二级渲染，其中，所述终端侧的环境状态值用于判定当前执行环境是否位于终端侧。

12.根据权利要求9所述的装置，其特征在于，所述二级渲染模块，具体用于：

将所述第二状态页面更新至所述第一状态页面，以显示所述第二状态页面。

13.一种服务器，其特征在于，包括：

至少一个处理器；以及

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

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行权利要求1或2所述的组件渲染方法。

14.一种终端，其特征在于，包括：

至少一个处理器；以及

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

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

15.一种存储有计算机指令的非瞬时计算机可读存储介质，其特征在于，所述计算机指令用于使所述计算机执行权利要求1或2所述的组件渲染方法。

16.一种存储有计算机指令的非瞬时计算机可读存储介质，其特征在于，所述计算机指令用于使所述计算机执行权利要求3-6中任一项所述的组件渲染方法。

Images