CN107247748A - 页面加载方法及装置 - Google Patents

Abstract

本发明实施例提供一种页面加载方法及装置，该方法包括：响应于用户向第一方向对页面执行的滑动操作，客户端获取由滑动操作而产生的移出内容的高度，同时将该移出内容从页面中提取出来并缓存至内存中。根据移出内容的高度生成与该高度相同的空白内容，并以该空白内容替换页面中被缓存至内存中的移出内容。由于移出内容已经不再存于页面中，因此客户端也就无需再渲染此移出内容，从而降低了客户端的页面渲染压力，也同时避免了由于页面中渲染内容过多而造成页面浏览卡顿的现象。

Description

页面加载方法及装置

技术领域

本发明涉及互联网技术领域，尤其涉及一种页面加载方法及装置。

背景技术

为了方便用户浏览页面中的内容，现有技术中，基于用户的滑动操作，会不断加载新的数据内容至当前页面中，此种页面加载模式称为瀑布流加载模式。此种模式能够使用户在短时间内获得更多的信息量同时也避免了用户鼠标点击的翻页操作。

在瀑布流加载模式场景中，随着用户滑动操作次数的增多，加载到页面中的数据内容也会增多。由于用于显示页面内容的显示界面的大小是有限的，往往小于或等于终端屏幕的尺寸，因此会有越来越多的数据内容是不能被显示在显示界面中的，处于非显示状态。但这些处于非显示状态的数据内容也是需要实时进行渲染的，这就增大了客户端的页面渲染压力，还有可能会出现页面卡顿的现象，降低用户的使用体验。

发明内容

有鉴于此，本发明实施例提供一种页面加载方法及装置，通过使用空白内容替换移出显示界面区域的内容，从而减小客户端的页面渲染压力。

本发明实施例提供一种页面加载方法，包括：

响应于用户向第一方向对页面执行的滑动操作，将所述页面中移出显示界面区域的内容缓存至内存中；

生成与移出内容高度相同的空白内容；

以所述空白内容替换所述移出内容。

可选地，所述响应于用户向第一方向对页面执行的滑动操作，将所述页面中移出显示界面区域的内容缓存至内存中，包括：

响应于用户向第一方向对页面执行的滑动操作，若所述页面中移出所述显示界面区域的内容已经达到预设阈值，则将已经达到所述预设阈值的移出内容缓存到内存中，所述预设阈值包括：预设高度阈值或预设数据量阈值。

可选地，所述响应于用户向第一方向对页面执行的滑动操作，将所述页面中移出显示界面区域的内容缓存至内存中，包括：

响应于用户向第一方向对页面执行的滑动操作，若预设时间内所述用户未触发向第二方向对所述页面执行的滑动操作，则将所述页面中移出显示界面区域的内容缓存至内存中，所述第二方向与所述第一方向相反。

可选地，所述方法还包括：

为所述移出内容和所述空白内容生成对应的标识。

可选地，所述方法还包括：

若需要显示所述空白内容，则根据所述标识从所述内存中获取所述移出内容；

以所述移出内容替换所述空白内容。

可选地，所述方法还包括：

监测用户向第二方向的滑动操作，若所述空白内容的位置与所述显示界面区域的边界位置之间的距离小于预设距离，则确定需要显示所述空白内容，其中，所述边界与所述第二方向对应，所述第二方向与所述第一方向相反。

本发明实施例提供一种页面加载装置，包括：

缓存模块，用于响应于用户向第一方向对页面执行的滑动操作，将所述页面中移出显示界面区域的内容缓存至内存中；

生成模块，用于生成与移出内容高度相同的空白内容；

替换模块，用于以所述空白内容替换所述移出内容。

可选地，所述缓存模块具体用于：

响应于用户向第一方向对页面执行的滑动操作，若所述页面中移出所述显示界面区域的内容已经达到预设阈值，则将已经达到所述预设阈值的移出内容缓存到内存中，所述预设阈值包括：预设高度阈值或预设数据量阈值。

可选地，所述缓存模块具体还用于：

响应于用户向第一方向对页面执行的滑动操作，若预设时间内所述用户未触发向第二方向对所述页面执行的滑动操作，则将所述页面中移出显示界面区域的内容缓存至内存中，所述第二方向与所述第一方向相反。

可选地，所述装置还包括：

监测模块，用于监测用户向第二方向的滑动操作，若所述空白内容的位置与所述显示界面区域的边界位置之间的距离小于预设距离，则确定需要显示所述空白内容，其中，所述边界与所述第二方向对应，所述第二方向与所述第一方向相反。

本发明实施例提供的页面加载方法及装置，响应于用户向第一方向对页面执行的滑动操作，客户端获取由滑动操作而产生的移出内容的高度，同时将该移出内容从页面中提取出来并缓存至内存中。根据移出内容的高度生成与该高度相同的空白内容，并以该空白内容替换页面中被缓存至内存中的移出内容。由于移出内容已经不再存于页面中，因此客户端也就无需再渲染此移出内容，从而降低了客户端的页面渲染压力，也同时避免了由于页面中渲染内容过多而造成页面浏览卡顿的现象。

附图说明

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

图1为本发明实施例提供的页面加载方法实施例一的流程图；

图2为本发明实施例提供的页面加载方法实施例二的流程图；

图3为本发明实施例提供的页面加载方法实施例三的流程图；

图4为本发明实施例提供的页面加载方法实施例四的流程图；

图5为本发明实施例提供的页面加载装置实施例一的结构示意图；

图6为本发明实施例提供的页面加载装置实施例二的结构示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

在本发明实施例中使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本发明。在本发明实施例和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义，“多种”一般包含至少两种，但是不排除包含至少一种的情况。

应当理解，本文中使用的术语“和/或”仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本文中字符“/”，一般表示前后关联对象是一种“或”的关系。

应当理解，尽管在本发明实施例中可能采用术语第一、第二、第三等来描述XXX，但这些XXX不应限于这些术语。这些术语仅用来将XXX彼此区分开。例如，在不脱离本发明实施例范围的情况下，第一XXX也可以被称为第二XXX，类似地，第二XXX也可以被称为第一XXX。

取决于语境，如在此所使用的词语“如果”、“若”可以被解释成为“在……时”或“当……时”或“响应于确定”或“响应于检测”。类似地，取决于语境，短语“如果确定”或“如果检测(陈述的条件或事件)”可以被解释成为“当确定时”或“响应于确定”或“当检测(陈述的条件或事件)时”或“响应于检测(陈述的条件或事件)”。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的商品或者***不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种商品或者***所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的商品或者***中还存在另外的相同要素。

图1为本发明实施例提供的页面加载方法实施例一的流程图，本实施例提供的该页面加载方法的执行主体可以为客户端，如图1所示，该方法包括如下步骤：

S101，响应于用户向第一方向对页面执行的滑动操作，将页面中移出显示界面区域的内容缓存至内存中。

S102，生成与移出内容高度相同的空白内容。

S103，以空白内容替换移出内容。

在用户通过客户端浏览页面时，由于用于显示页面的显示界面大小是有限的，因此当页面中包含的内容很多时，往往不能在一屏中完整地展示页面中的所有内容。而用户为了可以获取更多的内容，会在终端设备显示屏幕上进行滑动从而触发针对当前浏览页面的向第一方向的滑动操作。触发第一方向滑动操作后，显示界面区域中会显示出一部分新的内容展示给用户，同时显示界面区域中也会相应地移出一部分已经展示给用户的内容。页面中的内容可以包括文字、静态图片、动态图片或者视频等等。

为了后文描述的方便，可以将移出显示界面区域的内容称为移出内容。基于此，在用户触发了向第一方向对页面执行的滑动操作后，则会产生移出内容，客户端将此移出内容从当前页面中取出，缓存于内存中，并确定该移出内容的高度。可选地，客户端可以是针对用户触发的第一方向滑动操作，随即获得本次滑动操作对应的移出内容的高度，并将此移出内容从当前页面中取出，缓存于内存中。

可选地，客户端可以通过以下方式获取移出内容的高度。

服务器可以根据客户端发送的针对某一页面的浏览请求，将该页面中的全部内容数据反馈给客户端。客户端通过接收并渲染此页面的内容数据后即可使用户浏览该页面。其中内容数据可以包括该页面的页面布局文件，此页面布局文件中记录有页面中所有内容的位置坐标以及内容标识等等。客户端记录当前页面中位于显示界面区域预设位置的内容1所对应的内容标识。当用户触发第一方向的滑动操作后，客户端同样会记录滑动后页面中位于显示界面区域同一预设位置的内容2所对应的内容标识。客户端通过记录的内容1、2的内容标识可以在页面布局文件中查找到与该内容标识对应的位置坐标，通过计算二者位置坐标的差值即可获得移出显示界面区域的内容的高度，此内容的高度可以用像素来表示。

客户端根据此移出内容的高度生成与其高度相同的空白内容，并以此空白内容替换移出内容，也即是将移出内容用与其高度相同的空白内容进行替换。

本实施例中，响应于用户向第一方向对页面执行的滑动操作，客户端获取由滑动操作而产生的移出内容的高度，同时将该移出内容从页面中提取出来并缓存至内存中。根据移出内容的高度生成与其高度相同的空白内容，并将该空白内容存放于页面中，用以替换缓存至内存中的移出内容。由于移出内容已经不再存于页面中，因此客户端也就无需再渲染此移出内容，从而降低了客户端的页面渲染压力，也同时避免了由于页面中渲染内容过多而造成页面浏览卡顿的现象。

图2为本发明实施例提供的页面加载方法实施例二的流程图，如图2所示，该方法可以包括如下步骤：

S201，响应于用户向第一方向对页面执行的滑动操作，若页面中移出显示界面区域的内容已经达到预设阈值，则将已经达到预设阈值的移出内容缓存到内存中，预设阈值包括：预设高度阈值或预设数据量阈值。

响应于用户触发的第一方向的滑动操作后，客户端获取截至此次滑动操作的已经移出的内容所对应的累计内容高度或者累计数据量，用以与预设高度阈值或预设数据量阈值进行比较。当移出内容对应的累计内容高度或者累计数据量大于或等于预设阈值时，客户端将移出内容缓存至内存中。

可选地，客户端可以采用实施例一中涉及的方法来获得移出内容的累计内容高度，在此不再赘述。

可选地，客户端可以通过以下方式获得移出内容的累计数据量。

客户端从服务器接收的当前浏览的页面对应的页面布局文件中不仅包括该页面中各个内容的位置坐标、内容标识，还会包括页面中各个内容的数据量。与获得移出内容的内容高度相似的，客户端记录当前页面中位于显示界面区域预设位置的内容1所对应的内容标识。当用户触发第一方向的滑动操作后，客户端同样会记录滑动后页面中位于显示界面区域同一预设位置的内容2所对应的内容标识。客户端通过记录的内容1、2的内容标识在页面布局文件中查找与该内容标识对应的位置坐标，进而，再利用页面布局文件获取位置坐标位于内容1与内容2之间的每个内容所对应的数据量，通过计算得到截至此次的第一方向滑动操作产生的移出内容的数据量。

S202，生成与移出内容高度相同的空白内容。

S203，以空白内容替换移出内容。

上述步骤S202-S203的执行过程与前述实施例的相应步骤相似，可以参见如图1所示实施例中的相关描述，在此不再赘述。

本实施例中，每当移出内容到达预设阈值时，客户端将达到预设阈值的移出内容缓存至客户端的内存中。在此预设阈值的移出内容是由多次滑动操作产生的情况下，将此预设阈值的移出内容缓存至内存中可以有效减少客户端生成空白内容的次数，减轻客户端的处理压力。

图3为本发明实施例提供的页面加载方法实施例三的流程图，如图3所示，该方法可以包括如下步骤：

S301，响应于用户向第一方向对页面执行的滑动操作，若预设时间内用户未触发向第二方向对页面执行的滑动操作，则将页面中移出显示界面区域的内容缓存至内存中，第二方向与第一方向相反。

在用户触发了第一方向的滑动操作后，客户端响应并记录此第一方向滑动操作的触发时间，此时客户端并不会立即将移出内容缓存至内存中，而是会进一步判断用户在预设时间内是否触发了第二方向的滑动操作。其中，用户触发的第二方向滑动操作后，已经给用户展示过的一部分页面中内容会重新展示于显示界面区域中。因此，很容易理解地，第二方向的滑动操作是第一方向滑动操作的反向操作。在用户触发了第二方向的滑动操作后，客户端同样会记录该第二方向滑动操作的触发时间，从而根据第二方向滑动操作以及第一方向滑动操作触发的触发时间获得两种方向的滑动操作触发时间的时间间隔。进而，判断此时间间隔是否达到预设时间，若时间间隔大于预设时间，此时客户端才会将移出内容缓存至内存中。

S302，生成与移出内容高度相同的空白内容。

S303，以空白内容替换移出内容。

上述步骤S302-S303的执行过程与前述实施例的相应步骤相似，可以参见如图1所示实施例中的相关描述，在此不赘述。

本实施例中，客户端需要根据相邻的第一方向滑动操作与第二方向滑动操作之间的触发时间的时间间隔来判断是否将移出内容缓存至内存中。在确定用户在预设时间内没有触发第二方向滑动操作后，再进行移出内容的缓存，这样能够有效避免用户在反复触发第一方向滑动操作以及第二方向滑动操作时，造成客户端反复生成空白内容，从而增大客户端的数据处理压力。

图4为本发明实施例提供的页面加载方法实施例四的流程图，如图4所示，该方法还包括如下步骤：

S401，响应于用户向第一方向对页面执行的滑动操作，将所述页面中移出显示界面区域的内容缓存至内存中。

S402，生成与移出内容高度相同的空白内容。

上述步骤的执行过程与前述实施例的相应步骤相似，可以参见如图1所示实施例中的相关描述，在此不赘述。

S403，为移出内容和空白内容生成对应的标识。

客户端响应于用户向第一方向对页面执行的滑动操作，将由此第一方向的滑动操作而产生的移出内容作为一个内容整体，为此内容整体生成一个移出内容标识，同时为与此移出内容具有相同高度的空白内容生成一个空白内容标识。可选地，移出内容标识与空白内容标识可以是具有相同的标识，此标识可以是编号的形式。可选地，移出内容标识与空白内容标识之间也可以具有预设的对应关系。

S404，以空白内容替换移出内容。

上述步骤的执行过程与前述实施例的相应步骤相似，可以参见如图1所示实施例中的相关描述，在此不赘述。

用户触发了第一方向的滑动操作，可以浏览更多页面中的内容。在实际应用中，通常还会出现用户因想要再次浏览已经移出显示界面区域的内容，而触发第二方向的滑动操作的情况。对于此种情况，该页面加载方法还可以包括如下步骤：

S405，监测用户向第二方向的滑动操作，若空白内容的位置与显示界面区域的边界位置之间的距离小于预设距离，则确定需要显示空白内容，其中，边界与第二方向对应，第二方向与第一方向相反。

S406，若需要显示空白内容，则根据需显示空白内容对应的标识从内存中获取移出内容。

S407，以移出内容替换空白内容。

当客户端监测到用户触发了第二方向滑动操作，可选地，与实施例一、二中相关内容类似地，客户端可以通过从服务器获取当前浏览的页面所对应的页面布局文件。再根据此页面布局文件获取页面中空白内容的位置坐标以及当前位于显示界面区域边界的内容所对应的位置坐标，其中，空白内容的位置坐标包括空白内容的上边界位置坐标以及下边界位置坐标，上边界与第二方向对应，下边界与第一方向对应。若空白内容的下边界位置坐标与显示界面区域的边界位置坐标的距离之差小于预设距离，则表明空白内容即将被显示。此时客户端会根据此即将显示的空白内容所对应的空白内容标识获取对应的移出内容的标识，进而在移出内容显示之前预先获得移出内容，并将移出内容从内存中取出，预先渲染显示于显示界面区域中，以使此移出内容替换即将显示的空白内容。

本实施例中，通过监测用户触发的第二方向滑动操作，将即将显示的空白内容对应的移出内容预先从内存中取回并渲染到当前浏览的页面中，使用户在触发第二方向滑动操作时，可以顺畅地对移出内容进行重新浏览，从而避免在用户触发第二方向滑动操作后再获取并渲染移出内容而出现的页面浏览卡顿的情况。

图5为本发明实施例提供的页面加载装置实施例一的结构示意图，如图5所示，该页面加载装置包括：缓存模块11、生成模块12、替换模块13。

缓存模块11，用于响应于用户向第一方向对页面执行的滑动操作，将页面中移出显示界面区域的内容缓存至内存中。

生成模块12，用于生成与移出内容高度相同的空白内容。

替换模块13，用于以空白内容替换移出内容。

可选地，缓存模块11，具体用于响应于用户向第一方向对页面执行的滑动操作，若页面中移出显示界面区域的内容已经达到预设阈值，则将已经达到预设阈值的移出内容缓存到内存中，预设阈值包括：预设高度阈值或预设数据量阈值。

可选地，缓存模块11，具体还用于响应于用户向第一方向对页面执行的滑动操作，若预设时间内用户未触发向第二方向对页面执行的滑动操作，则将页面中移出显示界面区域的内容缓存至内存中，第二方向与第一方向相反。

图5所示装置可以执行图1-3所示任一实施例的方法，本实施例未详细描述的部分，可参考对图1-3所示任一实施例的相关说明。该技术方案的执行过程和技术效果参见图1-3所示任一实施例中的描述，在此不再赘述。

图6为本发明实施例提供的页面加载装置实施例二的结构示意图，如图6所示，在图5所示实施例基础上，该页面加载装置还包括：获取模块21。

获取模块21，用于若需要显示空白内容，则根据标识从内存中获取移出内容。

生成模块12，还用于为移出内容和空白内容生成对应的标识。

替换模块13，还用于以移出内容替换空白内容。

可选地，该页面加载装置还包括：监测模块22。

监测模块21，用于监测用户向第二方向的滑动操作，若空白内容的位置与显示界面区域的边界位置之间的距离小于预设距离，则确定需要显示空白内容，其中，边界与第二方向对应，第二方向与第一方向相反。

图6所示装置可以执行图4所示实施例的方法，本实施例未详细描述的部分，可参考对图4所示实施例的相关说明。该技术方案的执行过程和技术效果参见图4所示实施例中的描述，在此不再赘述。

以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助加必需的通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以产品的形式体现出来，该计算机产品可以存储在计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机装置(可以是个人计算机，服务器，或者网络装置等)执行各个实施例或者实施例的某些部分所述的方法。

最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (10)

1.一种页面加载方法，其特征在于，包括：

响应于用户向第一方向对页面执行的滑动操作，将所述页面中移出显示界面区域的内容缓存至内存中；

生成与移出内容高度相同的空白内容；

以所述空白内容替换所述移出内容。

2.根据权利要求1所述的方法，其特征在于，所述响应于用户向第一方向对页面执行的滑动操作，将所述页面中移出显示界面区域的内容缓存至内存中，包括：

响应于用户向第一方向对页面执行的滑动操作，若所述页面中移出所述显示界面区域的内容已经达到预设阈值，则将已经达到所述预设阈值的移出内容缓存到内存中，所述预设阈值包括：预设高度阈值或预设数据量阈值。

3.根据权利要求1所述的方法，其特征在于，所述响应于用户向第一方向对页面执行的滑动操作，将所述页面中移出显示界面区域的内容缓存至内存中，包括：

响应于用户向第一方向对页面执行的滑动操作，若预设时间内所述用户未触发向第二方向对所述页面执行的滑动操作，则将所述页面中移出显示界面区域的内容缓存至内存中，所述第二方向与所述第一方向相反。

4.根据权利要求1所述的方法，其特征在于，所述方法还包括：

为所述移出内容和所述空白内容生成对应的标识。

5.根据权利要求4所述的方法，其特征在于，所述方法还包括：

若需要显示所述空白内容，则根据所述标识从所述内存中获取所述移出内容；

以所述移出内容替换所述空白内容。

6.根据权利要求5所述的方法，其特征在于，所述方法还包括：

监测用户向第二方向的滑动操作，若所述空白内容的位置与所述显示界面区域的边界位置之间的距离小于预设距离，则确定需要显示所述空白内容，其中，所述边界与所述第二方向对应，所述第二方向与所述第一方向相反。

7.一种页面加载装置，其特征在于，包括：

缓存模块，用于响应于用户向第一方向对页面执行的滑动操作，将所述页面中移出显示界面区域的内容缓存至内存中；

生成模块，用于生成与移出内容高度相同的空白内容；

替换模块，用于以所述空白内容替换所述移出内容。

8.根据权利要求6所述的装置，其特征在于，所述缓存模块具体用于：

响应于用户向第一方向对页面执行的滑动操作，若所述页面中移出所述显示界面区域的内容已经达到预设阈值，则将已经达到所述预设阈值的移出内容缓存到内存中，所述预设阈值包括：预设高度阈值或预设数据量阈值。

9.根据权利要求6所述的装置，其特征在于，所述缓存模块具体还用于：

响应于用户向第一方向对页面执行的滑动操作，若预设时间内所述用户未触发向第二方向对所述页面执行的滑动操作，则将所述页面中移出显示界面区域的内容缓存至内存中，所述第二方向与所述第一方向相反。

10.根据权利要求9所述的装置，其特征在于，所述装置还包括：

监测模块，用于监测用户向第二方向的滑动操作，若所述空白内容的位置与所述显示界面区域的边界位置之间的距离小于预设距离，则确定需要显示所述空白内容，其中，所述边界与所述第二方向对应，所述第二方向与所述第一方向相反。