CN111506844A

CN111506844A - 页面处理方法、设备及计算机存储介质

Info

Publication number: CN111506844A
Application number: CN202010269597.5A
Authority: CN
Inventors: 高军舰; 王敏
Original assignee: Qingdao Hisense Media Network Technology Co Ltd
Current assignee: Qingdao Hisense Media Network Technology Co Ltd
Priority date: 2020-04-08
Filing date: 2020-04-08
Publication date: 2020-08-07
Anticipated expiration: 2040-04-08
Also published as: CN111506844B

Abstract

本申请公开了一种页面处理方法、设备及计算机存储介质，属于计算机技术领域。方法包括：接收终端发送的首页获取请求；将首页获取请求转化为首页页面；将首页页面返回至终端，以便于终端显示首页页面；向终端提供单页应用动态逻辑脚本，终端用于加载单页应用动态逻辑脚本后，将首页页面与交互处理逻辑组件绑定。如此终端在加载单页应用动态逻辑脚本前，先向用户展示首页页面供用户观看，解决了相关技术中单页应用的运行流畅度较低的问题，达到了提升单页应用的运行流畅度的效果。

Description

页面处理方法、设备及计算机存储介质

技术领域

本申请涉及计算机技术领域，特别涉及一种页面处理方法、设备及计算机存储介质。

背景技术

单页应用(英文：Single Page Application，缩写：SPA)，是在终端设备上运行并与单一网页相适应的万维网(英文：World Wide Web，缩写：Web)应用。单页应用将所有的活动局限于一个Web页面中，用户使用过程中无需跳转至其他页面，由于单页应用中避免了操作时重新加载页面，单页应用可以为用户提供较为流畅的用户体验。

在用户点击单页应用链接时，单页应用中的所有组件一起加载完成后展现出与用户的交互页面，在组件加载过程中，由于动态逻辑脚本在全部加载完成后单页应用才能执行，因此在动态逻辑脚本加载过程中终端所展示的单页应用的页面为空白页面。在网速较慢时，加载速度较慢，空白页面的停留时间更长。

空白页面导致单页应用的运行流畅度较差。

发明内容

本申请实施例提供了一种页面处理方法、设备及计算机存储介质。所述技术方案如下：

一方面，提供一种页面处理方法，用于业务服务器，所述方法包括：

接收终端发送的首页获取请求；

将所述首页获取请求转化为首页页面；

将所述首页页面返回至所述终端，以便于所述终端显示所述首页页面；

向所述终端提供单页应用动态逻辑脚本，所述终端用于加载所述单页应用动态逻辑脚本后，将所述首页页面与交互处理逻辑组件绑定。

可选的，所述接收终端发送的首页获取请求之前，所述方法包括：

获取首页资源；

将所述首页资源转换为所述业务服务器能够识别的格式；

将转换后的所述首页资源分离成首页动态逻辑脚本和首页静态样式脚本；

所述首页获取请求包括首页框架和首页参数，所述将所述首页获取请求转化为首页页面，包括：

根据所述首页参数获取所述业务服务器能够识别的首页数据资源；

将所述首页数据资源嵌入首页动态逻辑脚本并渲染，得到超文本字符串；

将所述超文本字符串、所述首页静态样式脚本和所述首页数据资源插入所述首页框架后得到所述首页页面。

可选的，所述将所述压缩后的首页资源分离成首页动态逻辑脚本和首页静态样式脚本之后，所述方法还包括：

加载所述首页动态逻辑脚本以及所述首页静态样式脚本。

可选的，所述根据所述首页参数获取所述业务服务器能够识别的首页数据资源，包括：

将所述首页参数发送给数据服务器，所述数据服务器用于将所述首页参数转换为所述业务服务器能够识别的首页数据资源；

获取所述数据服务器提供的所述业务服务器能够识别的首页数据资源。

可选的，所述向所述终端提供单页应用动态逻辑脚本，包括：

接收所述终端发送的单页应用动态逻辑脚本请求；

根据所述单页应用动态逻辑脚本请求向所述终端发送所述单页应用动态逻辑脚本。

可选的，所述将转换后的所述首页资源分离成首页动态逻辑脚本和首页静态样式脚本之前，所述方法还包括：

使用打包工具压缩转换后的所述首页资源；

所述将转换后的所述首页资源分离成首页动态逻辑脚本和首页静态样式脚本，包括：

将压缩后的所述首页资源分离成所述首页动态逻辑脚本和所述首页静态样式脚本。

另一方面，提供一种页面处理方法，用于终端，所述方法包括：

向业务服务器发送首页获取请求；

接收所述业务服务器根据所述首页获取请求反馈的首页页面；

展示所述首页页面；

接收并加载所述业务服务器提供的单页应用动态逻辑脚本；

将所述交互处理逻辑组件与所述首页页面绑定。

可选的，所述首页页面包括超文本字符串，所述将所述交互处理逻辑组件与所述首页页面绑定，包括：

对所述超文本字符串进行校验；

当所述超文本字符串通过所述校验时，将所述超文本字符串渲染出的网页元素与所述交互处理逻辑组件绑定，所述交互处理逻辑组件用于使所述首页页面具有交互处理能力。

又一方面，提供一种页面处理设备，所述页面处理设备包括处理器和存储器，所述存储器中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由所述处理器加载并执行以实现第一方面所述的页面处理方法。

再一方面，提供一种计算机存储介质，所述计算机存储介质中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由处理器加载并执行以实现第一方面所述的页面处理方法。

本申请实施例提供的技术方案带来的有益效果是：

提供一种页面处理方法，业务服务器接收终端发送的首页获取请求后将该首页获取请求转化为首页页面，并将首页页面返回至终端，终端显示出首页页面时再同步加载单页应用动态逻辑脚本，等动态逻辑脚本加载完成后将首页页面与交互处理逻辑组件绑定，用户可以对其进行操作。如此终端在加载单页应用动态逻辑脚本前，先向用户展示首页页面供用户观看，解决了相关技术中单页应用的运行流畅度较低的问题，达到了提升单页应用的运行流畅度的效果。

附图说明

为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本申请实施例所涉及的实施环境示意图；

图2是本申请实施例提供的一种页面处理方法的流程图；

图3是本申请实施例提供的另一种页面处理方法的流程图；

图4是本申请实施例提供的另一种页面处理方法的流程图；

图5是图4中步骤402的子步骤流程图；

图6是图4中步骤412的子步骤流程图；

图7是本申请实施例提供的一种页面处理装置的结构示意图；

图8是本申请实施例提供的另一种页面处理装置的结构示意图；

图9是本申请实施例提供的一种数据传输装置的结构示意图。

通过上述附图，已示出本申请明确的实施例，后文中将有更详细的描述。这些附图和文字描述并不是为了通过任何方式限制本申请构思的范围，而是通过参考特定实施例为本领域技术人员说明本申请的概念。

具体实施方式

为使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请实施方式作进一步地详细描述。

图1是本申请实施例提供的一种实施环境的示意图。该实施环境可以包括业务服务器11、数据服务器12以及终端13。

业务服务器11和数据服务器12均可以为服务器或者服务器集群。业务服务器11和数据服务器12可以通过有线或无线的方式(图1示出的是以无线的方式进行连接的情况)连接。

终端12可以为手机、平板电脑、笔记本电脑、智能可穿戴设备等。终端12可以通过有线或无线的方式(图1示出的是以无线的方式进行连接的情况)与业务服务器11连接。

如图2所示，其为本申请实施例提供的一种页面处理方法的流程图，该页面处理方法可以用于业务服务器。该页面处理方法可以包括下面几个步骤：

步骤201、接收终端发送的首页获取请求。

步骤202、将首页获取请求转化为首页页面。

步骤203、将首页页面返回至终端，以便于终端显示首页页面。

步骤204、向终端提供单页应用动态逻辑脚本，终端用于加载单页应用动态逻辑脚本后，将首页页面与交互处理逻辑组件绑定。

综上，本申请实施例提供的一种页面处理方法，业务服务器接收终端发送的首页获取请求后将该首页获取请求转化为首页页面，并将首页页面返回至终端，终端显示出首页页面时再同步加载单页应用动态逻辑脚本，等动态逻辑脚本加载完成后将首页页面与交互处理逻辑组件绑定，用户可以对其进行操作。如此终端在加载单页应用动态逻辑脚本前，先向用户展示首页页面供用户观看，解决了相关技术中单页应用的运行流畅度较低的问题，达到了提升单页应用的运行流畅度的效果。

如图3所示，其为本申请实施例提供的一种页面处理方法的流程图，该页面处理方法可以用于终端。该页面处理方法可以包括下面几个步骤：

步骤301、向业务服务器发送首页获取请求。

步骤302、接收业务服务器根据首页获取请求反馈的首页页面。

步骤303、展示首页页面。

步骤304、接收并加载业务服务器提供的单页应用动态逻辑脚本。

步骤305、将交互处理逻辑组件与首页页面绑定。

综上所述，本申请实施例提供的一种页面处理方法，业务服务器接收终端发送的首页获取请求后将该首页获取请求转化为首页页面，并将首页页面返回至终端，终端显示出首页页面时再同步加载单页应用动态逻辑脚本，等动态逻辑脚本加载完成后将首页页面与交互处理逻辑组件绑定，用户可以对其进行操作。如此终端在加载单页应用动态逻辑脚本前，先向用户展示首页页面供用户观看，解决了相关技术中单页应用的运行流畅度较低的问题，达到了提升单页应用的运行流畅度的效果。

如图4所示，其为本申请实施例提供的一种页面处理方法的流程图，该页面处理方法可以用于终端和服务器。该页面处理方法可以包括下面几个步骤：

步骤401、业务服务器获取首页资源，将首页资源转换为业务服务器能够识别的格式。

首页资源可以包括一个单页应用中首页组件源码资源，将该首页组件源码资源上传至业务服务器后进行同构化处理，同构化处理即为将该首页组件源码资源转换为业务服务器能够识别和处理的格式，转化后的首页资源既能在业务服务器上运行，也可以在终端上运行。其中上传至业务服务器的方式可以参考相关技术，本申请实施例在此不做赘述。本申请中所使用的业务服务器可以为支持React服务器端渲染的nodeJS服务器，nodeJS服务器是一种高并发服务器。

步骤402、业务服务器将转换后的首页资源分离成首页动态逻辑脚本和首页静态样式脚本。

其中，首页动态逻辑脚本可以为首页资源中的交互逻辑源码JS(英文：JavaScript)。首页静态样式脚本为首页资源中的样式源码CSS(英文：Cascading StyleSheets，中文：层叠样式表)。

如图5所示，步骤402可以包括下面几个子步骤：

步骤4021、使用打包工具压缩转换后的首页资源。

转换后的首页资源体积较大，为了加快业务服务器的运行速度，可以使用打包工具对首页资源进行压缩，以减小首页资源在业务服务器上的体积。本申请实施例中，可以使用第三方打包工具webpack进行资源打包，webpack是一种静态模块打包器，具体处理过程可以参考相关技术，本申请实施例在此不做赘述。

步骤4022、将压缩后的首页资源分离成首页动态逻辑脚本和首页静态样式脚本。

打包工具还可以将压缩后的首页资源中在业务服务器中待渲染的资源进行分离，以分离成独立的首页动态逻辑脚本和首页静态样式脚本。

步骤4023、加载首页动态逻辑脚本以及首页静态样式脚本。

加载即是在业务服务器中读取首页动态逻辑脚本以及首页静态样式脚本，如此便使业务服务器可以缓存读取后的首页动态逻辑脚本以及首页静态样式脚本，缓存后的数据可以重复使用。本申请实施例中使用的业务服务器读取上述首页动态逻辑脚本以及首页静态样式脚本可以采用渲染类库react-dom插件进行。本申请中在终端向业务服务器发送首页获取请求之前加载首页动态逻辑脚本以及首页静态样式脚本，可以提高业务服务器将首页获取请求转化首页页面的速度。

另外，将读取后的首页动态逻辑脚本以及首页静态样式脚本缓存在业务服务器，在业务服务器运行时长内，上述首页动态逻辑脚本以及首页静态样式脚本可以重复使用，无需进行多次转换、读取和缓存，节省业务服务器存储空间的同时可以提高业务服务器的运行速度。

另外，步骤4023也可以在步骤403-408之间进行。

步骤403、终端向业务服务器发送首页获取请求，首页获取请求包括首页框架和首页参数。

用户点击终端的单页应用链接时，终端向业务服务器发送包括首页框架和首页参数的首页获取请求，其中首页页面包括形成该页面的首页页面框架和嵌入框架内的首页页面参数。

步骤404、业务服务器将首页参数发送给数据服务器。

数据服务器为一种可以将参数源码转化为数据源码的处理数据的服务器。可以将终端发送的首页获取请求中的首页参数发送至数据服务器进行参数转化。若业务服务器可以将首页参数进行转化处理，则可以在步骤403执行后执行步骤407。

步骤405、数据服务器将首页参数转换为业务服务器能够识别的首页数据资源。

也即是数据服务器将首页参数转换为业务服务器和终端均能够识别的首页数据资源。

步骤406、数据服务器将业务服务器能够识别的首页数据资源发送给业务服务器。

数据服务器将首页数据资源发送给业务服务器后，业务服务器可以将该首页数据资源缓存预设时长，在该预设时长内再次获取终端的首页获取请求时，业务服务器可以无需再次向数据服务器发送数据转换请求，而是可以直接使用缓存的首页数据资源，以此加快业务服务器的处理速度。超过预设时长后，业务服务器缓存的首页数据资源失效，可以重新将首页参数发送至数据服务器，以使首页数据资源更新。本申请中使用的业务服务器可以将缓存预设时长设置为10分钟。在超过预设时长外再次获取客户端的首页获取请求时，可以重新执行步骤404-406。

步骤407、业务服务器将首页数据资源嵌入首页动态逻辑脚本并渲染，得到超文本字符串。

将数据服务器转化后的首页数据资源嵌入首页动态逻辑脚本，并使用业务服务器对其进行渲染，渲染是指将组件或者页面通过服务器生成超文本标记语言(英文：HyperText Markup Language，缩写：HTML)，也即是超文本字符串。使用业务服务器进行渲染可以加快首屏渲染的时间。本申请中可以使用渲染类库react-dom插件进行渲染。

步骤408、业务服务器将超文本字符串、首页静态样式脚本和首页数据资源插入首页框架后得到首页页面。

终端向业务服务器发送的首页获取请求包括首页框架和首页参数，首页参数在前述步骤中已进行了处理，步骤408可以将处理后的得到的首页数据资源、超文本字符串以及在步骤402中提前加载好的首页静态样式脚本插入首页框架，形成首页页面。将资源插入框架时，可以使用nodeJS服务器的模板文件ejs模板技术。

步骤409、业务服务器将首页页面发送给终端。

业务服务器将上述步骤408中形成的包括各项数据和框架的首页页面发送给终端。

步骤410、终端展示首页页面。

终端接受业务服务器发送的首页页面后，由于获得的是数据资源形式的首页页面，因此终端读取该首页页面资源并进行渲染形成可以展示出的首页画面，此时用户所看到的即是首页画面并非相关技术中展示的空白屏幕。

步骤411、终端向业务服务器发送单页应用动态逻辑脚本请求。

相关技术中，用户点击单页应用链接后，终端在所有脚本资源一起加载完成后向用户展示首页页面，而由于单页应用中的动态逻辑脚本包括首页以及除首页外的所有数据源码，因此加载过程通常较慢，加载过程中单页应用呈现空白页面，也即是整个单页应用的运行流畅度较差。而本申请中也可以在执行步骤410的同时向业务服务器发送单页应用动态逻辑脚本请求，在单页应用动态逻辑脚本的加载过程中，用户可以先看到终端展示出的该单页应用首页画面，单页应用运行过程中不会展示空白页面，运行流畅度较好，且同时提高了用户的体验感。

步骤412、业务服务器根据单页应用动态逻辑脚本请求向终端发送单页应用动态逻辑脚本。

业务服务器将终端请求的单页应用动态逻辑脚本返回给终端，整个请求过程通常持续几秒钟，在网速较慢的时候时间会有延长。而本申请中在该请求过程中用户可以先观看终端展示出的首页画面。

另外，在终端获取业务服务器发送的单页应用动态逻辑脚本之后，本申请还可以包括如下子步骤，图6为步骤412的子步骤流程图：

步骤4121、首页页面包括超文本字符串，终端对超文本字符串进行校验。

为避免显示错误，终端可以采用校验功能，对首页页面中的超文本字符串进行校验，如果校验通过，执行步骤413。如果校验未通过，执行步骤4122。该首页页面为首页网页组件，该首页网页组件中包括的超文本字符串为步骤410渲染后得到的超文本字符串渲染出的网页元素。

步骤4122、当超文本字符串没有通过校验时，终端对超文本字符串重新进行渲染。

若未通过终端的校验，可以重新返回步骤410，对超文本字符串重新渲染。渲染后对首页画面进行刷新，由于渲染和刷新速度较快，因此在不会影响用户的使用体验的同时可以提高页面显示的正确性。

步骤413、终端将交互处理逻辑组件与首页页面绑定。

当超文本字符串通过校验时，终端将超文本字符串渲染出的网页元素与交互处理逻辑组件绑定，交互处理逻辑组件用于使首页图像具有交互处理能力。交互处理逻辑组件是一种交互处理行为，终端接收到单页应用动态逻辑脚本前向用户展示的首页画面为不能进行点击操作的首页页面，用户可以观看该首页页面，终端将首页页面与交互处理逻辑组件绑定之后，也即是将首页网页组件中的元素与DOM事件处理函数进行绑定之后，可以形成完整的首页页面，用户可以对该首页页面进行点击操作。步骤411-412的执行时长通常仅持续几秒钟，也即是用户观看首页画面，熟悉该首页画面，并找到需要点击的位置时，本申请已经可以完成交互处理逻辑组件与首页画面的绑定。不影响用户的正常使用。与相关技术中用户通常要面对长时间的空白屏幕相比，大大增加了单页应用的运行流畅度，同时提升了用户的使用体验。

如图7所示，其为本申请实施例提供的一种页面处理装置的结构示意图，该页面处理装置可以用于业务服务器中。该页面处理装置700可以包括：

接收模块701，用于接收终端发送的首页获取请求。

转化模块702，用于将首页获取请求转化为首页页面。

页面发送模块703，用于将首页页面返回至终端，以便于终端显示首页页面。

资源提供模块704，用于向终端提供单页应用动态逻辑脚本，终端用于加载单页应用动态逻辑脚本后，将首页页面与交互处理逻辑组件绑定。

综上所述，本申请实施例提供的一种页面处理装置，业务服务器接收终端发送的首页获取请求后将该首页获取请求转化为首页页面，并将首页页面返回至终端，终端显示出首页页面时再同步加载单页应用动态逻辑脚本，等动态逻辑脚本加载完成后将首页页面与交互处理逻辑组件绑定，用户可以对其进行操作。如此终端在加载单页应用动态逻辑脚本前，先向用户展示首页页面供用户观看，解决了相关技术中单页应用的运行流畅度较低的问题，达到了提升单页应用的运行流畅度的效果。

如图8所示，其为本申请实施例提供的一种页面处理装置的结构示意图，该页面处理装置可以用于终端中。该页面处理装置800可以包括：

发送模块801，用于向业务服务器发送首页获取请求。

接收模块802，用于接收业务服务器根据首页获取请求反馈的首页页面。

展示模块803，用于展示首页页面。

读取模块804，用于接收并加载业务服务器提供的单页应用动态逻辑脚本。

绑定模块805，用于将交互处理逻辑组件与首页页面绑定。

请参考图9，其示出了本申请实施例提供的一种数据传输装置的结构示意图，该数据传输装置900可以为服务器。示例地，如图9所示，该装置900包括中央处理单元(CPU)901、存储器902，以及连接存储器902和中央处理单元901的系统总线903，存储器902可以包括诸如硬盘或者CD-ROM驱动器之类的计算机可读介质(未示出)。

不失一般性，计算机可读存储介质可以包括计算机存储介质和通信介质。计算机存储介质包括以用于存储诸如计算机可读指令、数据结构、程序模块或其他数据等信息的任何方法或技术实现的易失性和非易失性、可移动和不可移动介质。计算机存储介质包括RAM、ROM、EPROM、EEPROM、闪存或其他固态存储其技术，CD-ROM、DVD或其他光学存储、磁带盒、磁带、磁盘存储或其他磁性存储设备。当然，本领域技术人员可知计算机存储介质不局限于上述几种。

上述存储器902还包括一个或者一个以上的程序，一个或者一个以上程序存储于存储器中，被配置由CPU执行，以实现本公开实施例提供的方法。

本申请实施例还提供了一种页面处理设备，页面处理设备包括处理器和存储器，存储器中存储有至少一条指令、至少一段程序、代码集或指令集，至少一条指令、至少一段程序、代码集或指令集由处理器加载并执行以实现如上述任意一种页面处理方法。

本申请实施例还提供了一种计算机存储介质，其特征在于，计算机存储介质中存储有至少一条指令、至少一段程序、代码集或指令集，至少一条指令、至少一段程序、代码集或指令集由处理器加载并执行以实现如上述任意一种页面处理方法。

现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，上述提到的存储介质可以是只读存储器，磁盘或光盘等。

以上所述仅为本申请的可选实施例，并不用以限制本申请，凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。

Claims

1.一种页面处理方法，其特征在于，用于业务服务器，所述方法包括：

接收终端发送的首页获取请求；

将所述首页获取请求转化为首页页面；

2.根据权利要求1所述的方法，其特征在于，所述接收终端发送的首页获取请求之前，所述方法包括：

获取首页资源；

将所述首页资源转换为所述业务服务器能够识别的格式；

3.根据权利要求2所述的方法，其特征在于，所述将所述压缩后的首页资源分离成首页动态逻辑脚本和首页静态样式脚本之后，所述方法还包括：

加载所述首页动态逻辑脚本以及所述首页静态样式脚本。

4.根据权利要求2所述的方法，其特征在于，所述根据所述首页参数获取所述业务服务器能够识别的首页数据资源，包括：

5.根据权利要求1所述的方法，其特征在于，所述向所述终端提供单页应用动态逻辑脚本，包括：

接收所述终端发送的单页应用动态逻辑脚本请求；

6.根据权利要求2所述的方法，其特征在于，所述将转换后的所述首页资源分离成首页动态逻辑脚本和首页静态样式脚本之前，所述方法还包括：

使用打包工具压缩转换后的所述首页资源；

7.一种页面处理方法，其特征在于，用于终端，所述方法包括：

向业务服务器发送首页获取请求；

展示所述首页页面；

接收并加载所述业务服务器提供的单页应用动态逻辑脚本；

将所述交互处理逻辑组件与所述首页页面绑定。

8.根据权利要求7所述的方法，其特征在于，所述首页页面包括超文本字符串，所述将所述交互处理逻辑组件与所述首页页面绑定，包括：

对所述超文本字符串进行校验；

9.一种页面处理设备，其特征在于，所述页面处理设备包括处理器和存储器，所述存储器中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由所述处理器加载并执行以实现如权利要求1至6任一所述的页面处理方法。

10.一种计算机存储介质，其特征在于，所述计算机存储介质中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由处理器加载并执行以实现如权利要求1至6任一所述的页面处理方法。