CN111488542B - 一种网页输出方法、装置、系统和存储介质 - Google Patents

Abstract

本发明涉及一种网页输出方法、装置、系统和存储介质，属于互联网技术领域。方法包括：接收经过服务器端渲染后的第一网页；根据第一网页的状态，执行相应操作，得到第二网页；输出第二网页的页面；装置包括：接收单元、处理单元和输出单元；系统包括，服务器端，用于对原始页面执行服务器端渲染，得到第一网页；客户端，用于接收第一网页，并根据第一网页的状态，执行相应操作，得到第二网页，并输出第二网页的页面；存储介质，其上存储有计算机程序，该计算机程序被处理器执行时，实现上述网页输出方法。与现有技术相比，本发明具有渲染成功率高、成本低以及实现方便等优点。

Description

一种网页输出方法、装置、系统和存储介质

技术领域

本发明涉及互联网技术领域，特别涉及网页编辑领域，具体是指一种网页输出方法、装置、系统和存储介质。

背景技术

随着互联网技术的发展，服务器端渲染(Server Side Render，简称SSR)已经成为一种常见的技术手段。服务器端渲染HTML的情况下，客户端会直接接收到经过服务器计算之后的呈现给用户的最终的HTML字符串，这里的计算就是服务器经过解析存放在服务器端的模板文件来完成的，在这种情况下，客户端只进行了HTML的解析，以及把HTML所代表的图像显示给用户。

然而由于服务器端渲染的性能瓶颈在于服务器资源，在服务器资源不足时，很容易导致服务器端渲染的失败，现有的前端渲染主流框架中，如vue.js或react.js中，一旦服务器端渲染失败，则无法完成网页渲染的操作，继而无法正常输出网页。

发明内容

本发明的目的是针对上述问题提供一种渲染成功率高、成本低以及实现方便的网页输出方法、装置、系统和存储介质。

本发明的目的可以通过以下技术方案来实现：

一种网页输出方法，所述方法应用于客户端，所述方法包括以下步骤：

(1)接收经过服务器端渲染后的第一网页；

(2)根据所述第一网页的状态，执行相应操作，得到第二网页；

(3)输出所述第二网页的页面。

优选地，所述步骤(2)具体包括以下步骤：

(21)根据所述第一网页的状态，判断服务器端渲染是否成功，若是则进入步骤(22)，若否则进入步骤(23)；

(22)对所述第一网页执行第一操作，得到所述第二网页；

(23)直接执行网页渲染，得到所述第二网页。

优选地，所述步骤(21)包括：根据所述第一网页内参数的存在状态，判断服务器端渲染是否成功，若是，则进入步骤(22)，若否，则进入步骤(23)。

优选地，所述步骤(22)包括：对所述第一网页进行解析，得到所述第二网页。

优选地，所述步骤(23)包括：

对所述第一网页执行网页渲染，得到所述第二网页；或者，

对原始网页执行网页渲染，得到所述第二网页，所述原始网页经过服务器端渲染，得到所述第一网页。

一种网页输出装置，包括：

接收单元，用于接收经过服务器端渲染后的第一网页；

处理单元，用于根据所述第一网页的状态，执行相应操作，得到第二网页；

输出单元，用于输出所述第二网页的页面。

优选地，所述处理单元用于：

根据所述第一网页的状态，判断服务器端渲染是否成功；

在判断结果为是时，对所述第一网页执行第一操作，得到所述第二网页；

在判断结果为否时，直接执行网页渲染，得到所述第二网页。

优选地，所述处理单元进一步用于：

在判断结果为是时，对所述第一网页进行解析，得到所述第二网页。

优选地，所述处理单元进一步用于：

在判断结果为否时，对所述第一网页执行网页渲染，得到所述第二网页；或者，

在判断结果为否时，对原始网页执行网页渲染，得到所述第二网页，所述原始网页经过服务器端渲染，得到所述第一网页。

一种网页输出系统，包括：

服务器端，用于对原始页面执行服务器端渲染，得到第一网页；

客户端，用于接收所述第一网页，根据所述第一网页的状态，执行相应操作，得到第二网页，并输出所述第二网页的页面。

优选地，所述客户端用于：

根据所述第一网页的状态，判断服务器端渲染是否成功；

在判断结果为是时，对所述第一网页执行第一操作，得到所述第二网页；

在判断结果为否时，直接执行网页渲染，得到所述第二网页。

优选地，所述客户端进一步用于：

在判断结果为是时，对所述第一网页进行解析，得到所述第二网页。

优选地，所述客户端进一步用于：

在判断结果为否时，对所述第一网页执行网页渲染，得到所述第二网页；或者，

在判断结果为否时，对原始网页执行网页渲染，得到所述第二网页，所述原始网页经过服务器端渲染，得到所述第一网页。

一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时，实现上述中任一项所述网页输出方法。

与现有技术相比，本发明具有以下有益效果：

(1)本发明提出的网页输出方法，客户端首先接收经过服务器端渲染后的第一网页，根据第一网页的状态再执行相应操作，从而得到用于输出的第二网页，通过这种方式，可以在服务器端渲染失败时，直接通过客户端执行网页渲染，避免了一旦服务器资源不足导致服务器端渲染失败，就无法继续执行剩余操作导致网页输出失败的情况，提高了网页渲染和输出的稳定性。

(2)本发明提出的方法，无需对原有的渲染框架进行结构性的改动，只需在原有渲染的基础上，增加一次判断，并根据判断结果增加一次客户端的网页渲染操作，结构简单，执行简便，易于实现的同时大大节约了执行成本。

附图说明

图1为本发明网页输出方法的步骤流程图；

图2为实施例中网页输出过程的完整流程图。

具体实施方式

为了能够更清楚地理解本发明的技术内容，特举以下实施例详细说明。

请参阅图1所示，为本发明网页输出方法的步骤流程图。

在一种实施方式中，该网页输出方法，应用于客户端，包括以下步骤：

(1)接收经过服务器端渲染后的第一网页；

(2)根据第一网页的状态，执行相应操作，得到第二网页，包括：

(21)根据所述第一网页的状态，判断服务器端渲染是否成功，若是则进入步骤(22)，若否则进入步骤(23)，具体包括：根据所述第一网页内参数的存在状态，判断服务器端渲染是否成功，若是，则进入步骤(22)，若否，则进入步骤(23)；

(22)对所述第一网页执行第一操作，得到所述第二网页，具体包括：对第一网页进行解析，得到第二网页；

(23)直接执行网页渲染，得到第二网页，具体包括：对第一网页执行网页渲染，得到第二网页；或者，对原始网页执行网页渲染，得到第二网页，原始网页经过服务器端渲染，得到第一网页；

(3)输出第二网页的页面。

除上述方法之外，本实施例还提出了一种网页输出装置，包括：接收单元，用于接收经过服务器端渲染后的第一网页；处理单元，用于根据第一网页的状态，执行相应操作，得到第二网页；输出单元，用于输出第二网页的页面。其中，处理单元用于：根据第一网页的状态，判断服务器端渲染是否成功；在判断结果为是时，对第一网页执行第一操作，得到第二网页；在判断结果为否时，直接执行网页渲染，得到第二网页。基于上述结构，处理单元进一步用于：在判断结果为是时，对第一网页进行解析，得到第二网页。以及，在判断结果为否时，对第一网页执行网页渲染，得到第二网页；或者，在判断结果为否时，对原始网页执行网页渲染，得到第二网页，原始网页经过服务器端渲染，得到第一网页。

除上述方法和装置之外，本实施例中还提出了一种网页输出系统，包括：服务器端，用于对原始页面执行服务器端渲染，得到第一网页；客户端，用于接收第一网页，根据第一网页的状态，执行相应操作，得到第二网页，并输出第二网页的页面。其中，客户端用于：根据第一网页的状态，判断服务器端渲染是否成功；在判断结果为是时，对第一网页执行第一操作，得到第二网页；在判断结果为否时，直接执行网页渲染，得到第二网页。基于上述结构，客户端进一步用于：在判断结果为是时，对第一网页进行解析，得到第二网页。以及，在判断结果为否时，对第一网页执行网页渲染，得到第二网页；或者，在判断结果为否时，对原始网页执行网页渲染，得到第二网页，其中的原始网页经过服务器端渲染，得到第一网页。以及提出了一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时，实现上述中任一项网页输出方法。

在实际应用中，本发明网页输出方法的具体实现方式，通过以下实施例说明。

实施例1

为了解决现有技术中服务器端渲染不稳定，容易导致网页输出失败的现象，本实施例提出了一种网页输出方法，可以稳定的实现网页页面的渲染，保证网页页面的正常输出。

在本实施例中，为了在服务器端渲染失败的情况下，保证网页页面的正常输出，因此增加了一次渲染机会，即如果服务器端渲染失败，可以通过客户端直接进行网页渲染，从而保证网页渲染的正常进行，继而保证网页页面的稳定输出。

基于上述思想，本实施例进行网页输出的过程具体如图2所示。

从图中可以看出，本实施例中进行网页输出的具体过程为：首先服务器端对原始网页进行渲染，得到相应的输出网页，在本实施例中可以称为第一网页，服务器端得到第一网页后，将此网页传输至客户端，让客户端执行剩余逻辑。

在相关技术中，客户端接收到服务器端传输来的第一网页，则默认为第一网页为服务器端渲染成功后得到的网页，因此直接执行剩余逻辑，实现网页的正常输出，相关技术中客户端执行的剩余逻辑一般指对经过服务器端渲染后的页面进行解析，得到解析后的网页，并输出解析后的网页页面，从而完成网页的输出，从这一过程可以看出，由于客户端默认接收到的网页为服务器端成功渲染后的网页，因此一旦服务器端渲染失败，由于客户端仍执行上述的剩余逻辑，因此会导致网页输出失败的情况。

基于上述原因，在本实施例中，客户端在接收到服务器传输的第一网页后，执行剩余逻辑之前，首先会根据第一网页的状态，来校验服务器端渲染是否成功，如果成功的话，则继续执行上述中相关技术所提到的剩余逻辑，即对第一网页进行解析，得到第二网页，并输出第二网页的页面，实现网页输出；如果不成功的话，则客户端直接执行网页渲染，得到第二网页，并输出第二网页的页面，来保障网页渲染的成功，继而保障网页输出的正常进行。

需要注意的是，本实施例中校验服务器端渲染是否成功的方法不做具体限定，在一种可能的实现方式中，校验服务器端渲染是否成功的方法可以是根据第一网页内参数的存在状态，判断服务器端渲染是否成功。参数的选择不受具体限定，在一个示例中，如果服务器端渲染成功，第一网页内可以存在许多服务器端渲染的内容，在本示例中，可以根据其中window._INITIAL_STATE_这一参数是否存在来判断服务器端渲染是否成功，如果该参数存在，则可以认为服务器端渲染成功，此时可以对第一网页执行第一操作，得到第二网页；如果该参数不存在，则可以认为服务器端渲染失败，此时可以直接执行网页渲染，来得到第二网页。

在本实施例中，客户端直接进行网页渲染的对象可以是第一网页，即客户端执行网页渲染时，是以服务器端输出的网页页面模板为基础进行的渲染。

实施例2

本实施例中的网页输出流程与实施例1基本相同，唯一的区别在于，本实施例中客户端直接进行网页渲染的对象是原始网页，即未经服务器端渲染的最原始的待输出网页。

在此说明书中，本发明已参照其特定的实施例作了描述。但是，很显然仍可以做出各种修改和变换而不背离本发明的精神和范围。因此，说明书和附图应被认为是说明性的而非限制性的。

Claims (11)

1.一种网页输出方法，所述方法应用于客户端，其特征在于，所述方法包括以下步骤：

(1)接收经过服务器端渲染后的第一网页；

(21)根据所述第一网页的状态，判断服务器端渲染是否成功，若是则进入步骤(22)，若否则进入步骤(23)；

(22)对所述第一网页执行第一操作，得到所述第二网页；

(23)直接执行网页渲染，得到所述第二网页；

(3)输出所述第二网页的页面。

2.根据权利要求1所述网页输出方法，其特征在于，所述步骤(21)包括：根据所述第一网页内参数的存在状态，判断服务器端渲染是否成功，若是，则进入步骤(22)，若否，则进入步骤(23)。

3.根据权利要求1所述网页输出方法，其特征在于，所述步骤(22)包括：对所述第一网页进行解析，得到所述第二网页。

4.根据权利要求1所述网页输出方法，其特征在于，所述步骤(23)包括：

对所述第一网页执行网页渲染，得到所述第二网页；或者，

对原始网页执行网页渲染，得到所述第二网页，所述原始网页经过服务器端渲染，得到所述第一网页。

5.一种网页输出装置，其特征在于，包括：

接收单元，用于接收经过服务器端渲染后的第一网页；

处理单元，用于根据所述第一网页的状态，判断服务器端渲染是否成功；在判断结果为是时，对所述第一网页执行第一操作，得到所述第二网页；在判断结果为否时，直接执行网页渲染，得到所述第二网页；

输出单元，用于输出所述第二网页的页面。

6.根据权利要求5所述网页输出装置，其特征在于，所述处理单元进一步用于：

在判断结果为是时，对所述第一网页进行解析，得到所述第二网页。

7.根据权利要求5所述网页输出装置，其特征在于，所述处理单元进一步用于：

在判断结果为否时，对所述第一网页执行网页渲染，得到所述第二网页；或者，

在判断结果为否时，对原始网页执行网页渲染，得到所述第二网页，所述原始网页经过服务器端渲染，得到所述第一网页。

8.一种网页输出系统，其特征在于，包括：

服务器端，用于对原始页面执行服务器端渲染，得到第一网页；

客户端，用于接收所述第一网页，根据所述第一网页的状态，判断服务器端渲染是否成功；在判断结果为是时，对所述第一网页执行第一操作，得到所述第二网页；在判断结果为否时，直接执行网页渲染，得到所述第二网页；并输出所述第二网页的页面。

9.根据权利要求8所述网页输出系统，其特征在于，所述客户端进一步用于：

在判断结果为是时，对所述第一网页进行解析，得到所述第二网页。

10.根据权利要求8所述网页输出系统，其特征在于，所述客户端进一步用于：

在判断结果为否时，对所述第一网页执行网页渲染，得到所述第二网页；或者，

在判断结果为否时，对原始网页执行网页渲染，得到所述第二网页，所述原始网页经过服务器端渲染，得到所述第一网页。

11.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该计算机程序被处理器执行时，实现权利要求1至4中任一项所述网页输出方法。