CN109726346A - 页面组件处理方法及装置 - Google Patents

Abstract

本发明实施例的方面涉及页面组件处理方法及装置。页面组件处理方法应用于客户端，所述方法包括：获取并存储异步加载组件实例；轮询所述异步加载组件实例，并根据所述轮询，加载所述异步加载组件实例。通过本发明实施例，当页面异步加载组件时，可避免异步加载组件时页面抖动的情况。

Description

页面组件处理方法及装置

技术领域

本发明实施例涉及互联网技术领域，特别地是涉及页面组件处理方法及装置。

背景技术

随着互联网的快速发展，网页更新迭代速度越来越快，页面元素越来个性化、特色化。

目前，针对网页的开发主要方式为：工程师根据网页用途开发大量的页面模板，以及根据页面功能或者主题开发大量的组件样式，当选定一款页面模板，以及在模板中添加了需要的组件，就生成了一个个性化的网页页面。

当客户端加载组件时，为实现用户更快捷，更自然的浏览体验，很多大型网站多使用Ajax(Asynchronous JavaScript and XML，异步JavaScript和XML)异步加载技术加载页面中的组件。

借助异步加载技术，可以在网页上进行操作时，使用JavaScript脚本语言立即更新页面，并向服务器发出异步请求，以执行更新或查询数据库。当请求返回时，就可以使用JavaScript和CSS(Cascading StyleSheet，可译为“层叠样式表”或“级联样式表”)来相应地更新页面，而不是刷新整个页面，实现了页面快速响应。

然而，异步加载方式也有缺点，不同组件的加载速度，由服务器的响应时间决定，先接收到响应而返回的组件会首先呈现在页面上，当该组件前面顺序的组件之后完成加载，并呈现在页面上时，在视觉上会出现抖动现象，影响用户体验。

发明内容

本发明实施例提供的页面组件处理方法及装置，可获取并存储异步加载组件实例，并对获取的异步加载组件实例采取轮询机制，通过对异步加载组件实例的轮询，可流畅的加载组件实例，提升用户体验。

本发明实施例的一个方面提供了页面组件处理方法，该方法应用于客户端，所述方法包括：获取并存储异步加载组件实例；轮询所述异步加载组件实例，并根据所述轮询，加载所述异步加载组件实例。

一种可能的实施例中，所述获取并存储异步加载组件实例之前，所述方法还包括：确定异步加载的组件实例，以及确定异步加载的组件实例的顺序。

另一种可能的实施例中，所述确定异步加载的组件实例，所述方法包括：确定异步加载的组件实例预设的属性标签；以及根据所述异步加载的组件实例预设的属性标签，渲染所述异步加载的组件实例属性标签为空标签。

又一种可能的实施例中，所述确定需要异步加载组件的顺序包括：遍历页面中需要异步加载组件实例的顺序；以及根据所述页面中异步下载组件实例的顺序，存储所述页面中异步下载组件实例的顺序到内存中。

一种可能的实施例中，所述轮询所述服务器端返回的所述异步加载组件顺序，包括：按照所述确定异步加载的组件实例顺序，依次判断组件实例是否加载完成；加载未完成，等待下次轮询；以及加载完成，将所述加载完成的所述组件实例从内存中取出，***到对应空标签中。

另一种可能的实施例中，将所述加载完成的所述组件实例从内存中取出，***到对应空标签中之后，所述方法还包括：从所述组件实例顺序中移除所述加载完成的所述组件实例。

本发明实施例的另一个方面提供了页面组件处理装置，所述装置应用于客户端，所述装置包括：确定单元，用于获取并存储异步加载组件实例；轮询单元，用于轮询所述异步加载组件实例，并加载单元，用于根据所述轮询，加载所述异步加载组件实例。

一种可能的实施例中，其中，所述确定单元还用于：所述获取并存储异步加载组件实例之前，确定异步加载的组件实例，以及确定异步加载的组件实例的顺序。

另一种可能的实施例中，所述确定单元采用如下方式确定所述异步加载的组件实例：确定异步加载的组件实例预设的属性标签；以及

根据所述异步加载的组件实例预设的属性标签，渲染所述异步加载的组件实例属性标签为空标签。

又一种可能的实施例中，所述确定单元采用如下方式确定所述异步加载的组件实例顺序：遍历页面中需要异步加载组件实例的顺序；以及

根据所述页面中异步下载组件实例的顺序，存储所述页面中异步下载组件实例的顺序到内存中。

一种可能的实施例中，所述轮询单元采用如下方式轮询所述异步加载组件顺序：按照所述确定异步加载的组件实例顺序，依次判断组件实例是否加载完成；加载未完成，等待下次轮询；以及加载完成，将所述加载完成的所述组件实例从内存中取出，***到对应空标签中。

另一种可能的实施例中，所述确定单元还用于：将所述加载完成的所述组件实例从内存中取出，***到对应空标签中之后，从所述组件实例顺序中移除所述加载完成的所述组件实例。

一种可能的实施例中，本发明实施例还提供一种服务器，所述服务器包括：存储器，配置用于存储指令；以及处理器，配置用于调用所述指令执行上述可能的实施方式中任一所述的方法。

一种可能的实施方式中，本发明实施例还提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机可执行指令，所述计算机可执行指令在由处理器执行时，执行上述可能的实施方式中任一所述的方法。

本发明实施例提供的页面组件处理方法及装置，确定需要异步加载的组件实例，以及确定需要异步加载的组件实例的顺序，向服务器端获取并存储异步加载组件实例，对获取的异步加载组件实例进行轮询，通过轮询机制，确保了页面流畅地异步加载组件实例。

附图说明

图1是本发明实施例提供的组件处理方法实施流程图。

图2是本发明实施例提供的另一种组件处理方法实施流程图。

图3是本发明实施例提供的页面组件处理装置示意图。

具体实施方式

下面将参考若干示例性实施方式来描述本发明的原理和精神。应当理解，给出这些实施方式仅仅是为了使本领域技术人员能够更好地理解进而实现本发明，而并非以任何方式限制本发明的范围。

需要注意，虽然本文中使用“第一”、“第二”等表述来描述本发明的实施方式的不同模块、步骤和数据等，但是“第一”、“第二”等表述仅是为了在不同的模块、步骤和数据等之间进行区分，而并不表示特定的顺序或者重要程度。实际上，“第一”、“第二”等表述完全可以互换使用。

本发明实施例提供的页面组件处理方法，该页面组件处理方法可应用于客户端加载页面组件的应用场景。在该场景下，一种可能的实施方式中，确定异步加载的组件实例的顺序，并发送异步加载组件实例的请求，根据异步加载组件实例的请求，接收并存储返回的异步加载组件实例，针对返回的异步加载组件实例，轮询并加载组件实例，由此实现了页面中组件实例有序的展示，提升用户体验。

图1所示为本发明实施例提供的页面组件处理方法实施流程图。图1所示的方法执行主体可以是页面组件处理装置，该主体可以是浏览器，也可以是其它可以实现相应功能的执行主体，本发明实施例在此不做限定。参阅图1所示，该页面组件处理方法包括：

S101：获取并存储异步加载组件实例。

一种可能的实施方式中，本发明实施例中的组件可以是填充页面区域的重要模型，每个组件需要开发人员独立编写，根据业务需求制定不同的组件，组件可以配置样式、内容数据。页面中常用的组件有：单图组件、图片轮播组件、热区图组件、双列商品组件等等。组件添加到页面中时会创建该组件的一个组件实例，并且一个组件可以被创建多个组件实例。

一种可能的实施方式中，组件实例加载方式可以有同步加载方式或者异步加载方式，同步加载方式为组件全部渲染完成，页面才会呈现给用户。异步加载方式为根据服务器的响应，先加载服务器返回的组件实例，根据接收组件实例的先后顺序，依次呈现在页面上。本发明实施例中组件实例的加载主要针对异步加载的情况。一种可能的实施方式，本发明实施例中，将从服务器获取的异步加载组件实例存储到客户端内存中。

可能的实施方式，本发明实施例中，服务器返回的异步加载组件实例例如可以是组件实例的html片段数据。

S102：轮询所述异步加载组件实例，并根据所述轮询，加载所述异步加载组件实例。

一种可能的实施方式，本发明实施例中，可采用定期轮询的机制确定组件实例加载顺序。轮询时间可以根据实际需要进行设定，例如可将轮询时间确定为3毫秒，或者5毫秒，10毫秒等等，本发明实施例在此不做限定。

一种可能的实施方式，本发明实施例中，客户端根据轮询机制判断第一个组件实例数据是否加载完成，如果第一个组件实例未加载完成，则等待下次轮询。如果第一个组件实例数据加载完成，则将第一个组件实例从内存中取出，***到页面中第一个组件实例的空标签中，并将第一个组件实例从组件实例顺序中移除。依次类推，直到最后一个组件实例***到页面中。由此完成了组件实例的异步加载。

本发明实施例以下将结合实际应用对本发明实施例涉及的票型排序的实施方法进行说明。

图2所示为本发明实施例提供的页面组件处理方法实施流程图，参阅图2所示。

图2中，S202，S203的执行步骤与图1中S101和S102的执行步骤相类似，在此不再赘述。

S201：确定需要异步加载的组件实例，以及确定需要异步加载的组件实例的顺序。

本发明实施例中，针对页面中需要加载的组件实例，可先确定哪些组件实例是需要异步加载的，以及确定需要异步加载的组件实例的顺序并将页面中需要异步加载的组件实例顺序进行存储。

一种可能的实施方式，本发明实施例中，客户端通过页面中存储的需要加载的组件实例id来获取组件实例预设的属性标签，组件实例id例如可以设置为id＝“pagelet-13339”，其中，数字部分表示组件实例id,设置“pagelet”用来表示组件实例异步加载的属性，客户端利用异步加载的组件实例id来确定哪些是异步加载的组件实例，并在客户端渲染需要异步加载的组件实例属性标签为空标签，可能的实施方式中，例如可以渲染需要异步加载的组件实例属性标签为html标签。并根据确定的异步加载的组件实例，遍历并存储页面中异步下载组件实例的顺序到客户端内存中。

S202：获取并存储异步加载组件实例。

S203：轮询所述异步加载组件实例，并根据所述轮询，加载所述异步加载组件实例。

本发明实施例提供的页面组件处理方法，确定异步加载的组件实例，以及确定异步加载的组件实例的顺序，将异步加载的组件实例的顺序存储到客户端内存中，从服务器端获取并存储异步加载组件实例，轮询获取的异步加载组件实例，并根据轮询机制，加载所述异步加载组件实例。针对获取的异步加载组件实例采用轮询机制，确保了异步加载的组件实例按顺序依次展现，由此实现了页面流畅地异步加载组件实例，避免了页面加载组件时页面抖动的情况，提升用户体验。

基于相同的发明构思，本发明实施例还提供了页面组件处理装置。

如图3所示，本发明实施例提供的页面组件处理装置300，该装置300应用于客户端，该装置300包括确定单元301、轮询单元302以及加载单元303。其中，确定单元301，用于获取并存储异步加载组件实例；轮询单元302，用于轮询所述异步加载组件实例，并加载单元303，用于根据所述轮询，加载所述异步加载组件实例。

一种可能的实施例中，其中，所述确定单元301还用于：所述获取并存储异步加载组件实例之前，确定异步加载的组件实例，以及确定异步加载的组件实例的顺序。

另一种可能的实施例中，所述确定单元301采用如下方式确定所述异步加载的组件实例：确定异步加载的组件实例预设的属性标签；以及

根据所述异步加载的组件实例预设的属性标签，渲染所述异步加载的组件实例属性标签为空标签。

又一种可能的实施例中，所述确定单元301采用如下方式确定所述异步加载的组件实例顺序：遍历页面中需要异步加载组件实例的顺序；以及根据所述页面中异步下载组件实例的顺序，存储所述页面中异步下载组件实例的顺序到内存中。

一种可能的实施例中，所述轮询单元302采用如下方式轮询所述异步加载组件顺序：按照所述确定异步加载的组件实例顺序，依次判断组件实例是否加载完成；加载未完成，等待下次轮询；以及加载完成，将所述加载完成的所述组件实例从内存中取出，***到对应空标签中。

另一种可能的实施例中，所述确定单元301还用于：将所述加载完成的所述组件实例从内存中取出，***到对应空标签中之后，从所述组件实例顺序中移除所述加载完成的所述组件实例。

一种可能的实施例中，本发明实施例还提供一种服务器，所述服务器包括：存储器，配置用于存储指令；以及处理器，配置用于调用所述指令执行上述可能的实施方式中任一所述的方法。

一种可能的实施方式中，本发明实施例还提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机可执行指令，所述计算机可执行指令在由处理器执行时，执行上述可能的实施方式中任一所述的方法。

可能的实施方式中，本发明实施例还提供了以下实施方式：

一种可能的实施方式中，本发明实施例提供了页面组件处理方法应用于客户端，该方法包括：获取并存储异步加载组件实例；轮询所述异步加载组件实例，并根据所述轮询，加载所述异步加载组件实例。

一种可能的实施方式中，所述获取并存储异步加载组件实例之前，所述方法还包括：确定异步加载的组件实例，以及确定异步加载的组件实例的顺序。

一种可能的实施方式中，所述确定异步加载的组件实例，所述方法包括：确定异步加载的组件实例预设的属性标签；以及根据所述异步加载的组件实例预设的属性标签，渲染所述异步加载的组件实例属性标签为空标签。

一种可能的实施方式中，所述确定需要异步加载组件的顺序包括：遍历页面中需要异步加载组件实例的顺序；以及根据所述页面中异步下载组件实例的顺序，存储所述页面中异步下载组件实例的顺序到内存中。

一种可能的实施方式中，所述轮询所述服务器端返回的所述异步加载组件顺序，包括：按照所述确定异步加载的组件实例顺序，依次判断组件实例是否加载完成；加载未完成，等待下次轮询；以及加载完成，将所述加载完成的所述组件实例从内存中取出，***到对应空标签中。

一种可能的实施方式中，将所述加载完成的所述组件实例从内存中取出，***到对应空标签中之后，所述方法还包括：从所述组件实例顺序中移除所述加载完成的所述组件实例。

一种可能的实施方式中，本发明实施例还提供的页面组件处理装置应用于客户端，所述装置包括：确定单元，用于获取并存储异步加载组件实例；轮询单元，用于轮询所述异步加载组件实例，并加载单元，用于根据所述轮询，加载所述异步加载组件实例。

一种可能的实施方式中，其中，所述确定单元还用于：所述获取并存储异步加载组件实例之前，确定异步加载的组件实例，以及确定异步加载的组件实例的顺序。

一种可能的实施方式中，所述确定单元采用如下方式确定所述异步加载的组件实例：确定异步加载的组件实例预设的属性标签；以及

根据所述异步加载的组件实例预设的属性标签，渲染所述异步加载的组件实例属性标签为空标签。

一种可能的实施方式中，所述确定单元采用如下方式确定所述异步加载的组件实例顺序：遍历页面中需要异步加载组件实例的顺序；以及

根据所述页面中异步下载组件实例的顺序，存储所述页面中异步下载组件实例的顺序到内存中。

一种可能的实施方式中，所述轮询单元采用如下方式轮询所述异步加载组件顺序：按照所述确定异步加载的组件实例顺序，依次判断组件实例是否加载完成；加载未完成，等待下次轮询；以及加载完成，将所述加载完成的所述组件实例从内存中取出，***到对应空标签中。

一种可能的实施方式中，所述确定单元还用于：将所述加载完成的所述组件实例从内存中取出，***到对应空标签中之后，从所述组件实例顺序中移除所述加载完成的所述组件实例。

一种可能的实施方式中，本发明实施例还提供一种服务器，所述服务器包括：存储器，配置用于存储指令；以及处理器，配置用于调用所述指令执行上述可能的实施方式中任一所述的方法。

一种可能的实施方式中，本发明实施例还提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机可执行指令，所述计算机可执行指令在由处理器执行时，执行上述可能的实施方式中任一所述的方法。

尽管在附图中以特定的顺序描述操作，但是不应将其理解为要求按照所示的特定顺序或是串行顺序来执行这些操作，或是要求执行全部所示的操作以得到期望的结果。在特定环境中，多任务和并行处理可能是有利的。

本发明的方法和装置能够利用标准编程技术来完成，利用基于规则的逻辑或者其他逻辑来实现各种方法步骤。还应当注意的是，此处以及权利要求书中使用的词语“装置”和“模块”意在包括使用一行或者多行软件代码的实现和/或硬件实现和/或用于接收输入的设备。

此处描述的任何步骤、操作或程序可以使用单独的或与其他设备组合的一个或多个硬件或软件模块来执行或实现。在一个实施方式中，软件模块使用包括包含计算机程序代码的计算机可读介质的计算机程序产品实现，其能够由计算机处理器执行用于执行任何或全部的所描述的步骤、操作或程序。

出于示例和描述的目的，已经给出了本发明实施的前述说明。前述说明并非是穷举性的也并非要将本发明限制到所公开的确切形式，根据上述教导还可能存在各种变形和修改，或者是可能从本发明的实践中得到各种变形和修改。选择和描述这些实施例是为了说明本发明的原理及其实际应用，以使得本领域的技术人员能够以适合于构思的特定用途来以各种实施方式和各种修改而利用本发明。

Claims (10)

1.一种页面组件处理方法，其中，所述方法应用于客户端，所述方法包括：

获取并存储异步加载组件实例；

轮询所述异步加载组件实例，并

根据所述轮询，加载所述异步加载组件实例。

2.根据权利要求1所述的方法，其中，所述获取并存储异步加载组件实例之前，所述方法还包括：

确定异步加载的组件实例，以及

确定异步加载的组件实例的顺序。

3.根据权利要求2所述的方法，其中，所述确定异步加载的组件实例，所述方法包括：

确定异步加载的组件实例预设的属性标签；以及

根据所述异步加载的组件实例预设的属性标签，渲染所述异步加载的组件实例属性标签为空标签。

4.根据权利要求2所述的方法，其中，所述确定需要异步加载组件的顺序包括：

遍历页面中需要异步加载组件实例的顺序；以及

根据所述页面中异步下载组件实例的顺序，存储所述页面中异步下载组件实例的顺序到内存中。

5.根据权利要求1所述的方法，其中，所述轮询所述异步加载组件顺序，包括：

按照所述确定异步加载的组件实例顺序，依次判断组件实例是否加载完成；

加载未完成，等待下次轮询；以及

加载完成，将所述加载完成的所述组件实例从内存中取出，***到对应空标签中。

6.根据权利要求4所述的方法，其中，将所述加载完成的所述组件实例从内存中取出，***到对应空标签中之后，所述方法还包括：

从所述组件实例顺序中移除所述加载完成的所述组件实例。

7.一种页面组件处理的装置，其中，所述装置应用于客户端，所述装置包括：

确定单元，用于获取并存储异步加载组件实例；

轮询单元，用于轮询所述异步加载组件实例，并

加载单元，用于根据所述轮询，加载所述异步加载组件实例。

8.根据权利要求7所述的装置，其中，所述确定单元还用于：

所述获取并存储异步加载组件实例之前，确定异步加载的组件实例，以及确定异步加载的组件实例的顺序。

9.根据权利要求8所述的装置，其中，所述确定单元采用如下方式确定所述异步加载的组件实例：

确定异步加载的组件实例预设的属性标签；以及

根据所述异步加载的组件实例预设的属性标签，渲染所述异步加载的组件实例属性标签为空标签。

10.根据权利要求8所述的装置，其中，所述确定单元采用如下方式确定所述异步加载的组件实例顺序：

遍历页面中需要异步加载组件实例的顺序；以及

根据所述页面中异步下载组件实例的顺序，存储所述页面中异步下载组件实例的顺序到内存中。