CN104750851A - 网页内容的延迟加载方法及*** - Google Patents

Abstract

本发明提供网页内容的延迟加载方法及***。本发明提供的网页内容的延迟加载方法，包括：发起步骤：通过无线移动终端的浏览器向浏览加速服务器发起浏览加速请求；获取和分析步骤：在接收到所述浏览加速请求之后，通过所述浏览加速服务器从互联网服务器获取网页内容并对所述网页内容进行分析，生成返回信息；返回步骤：通过所述浏览加速服务器将所述返回信息返回至所述无线移动终端；加载和展现步骤：根据浏览进度以及所述返回信息，通过所述无线移动终端的浏览器延迟加载并展现所述网页内容。本发明能够缩短无线移动终端在网页浏览中的加载延迟并减少流量浪费。本发明还有利于提升无线移动终端设备的电池续航性能。

Description

网页内容的延迟加载方法及***

技术领域

本发明涉及无线网络通信技术领域，尤其涉及一种网页内容的延迟加载方法及***。

背景技术

随着互联网技术、特别是无线移动互联网技术的普及和发展，越来越多的用户开始使用无线移动终端(包括但不限于：手机、个人数字助理PDA、平板电脑等)上网获取信息。

同时，由于提供网页服务的技术相对成熟，具有开发周期短、技术门槛低、维护成本低、用户获取方便且有利于移动终端的隐私和安全保护等特点，因此，大多数互联网信息提供商均青睐于提供网页服务，其中网页内容一般包括文本、图片、视频、音频等。

通常，用户在使用无线移动终端的浏览器上网时，除了需要通过无线网络加载内容数据之外，还需要加载网页的样式信息，使得网页具有一定的格式以及排版，从而能够符合用户的阅读使用习惯。但是无线网络传输速度相对缓慢并且运营商单位流量的价格更贵，目前的互联网网站更多是针对个人电脑的访问而设计，在移动终端上体验不佳，这些因素都影响了用户使用无线终端上网浏览的用户体验。

以下简单介绍利用无线移动终端的浏览器访问互联网网页的相关术语和相关技术。

DOM：即文档对象模型(Document Object Model)，是万维网联盟W3C推荐的处理可扩展标志语言的标准编程接口。DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。可以把DOM认为是页面上数据和结构的一个树形表示，不过页面当然可能并不是以这种树的方式具体实现。根据W3C DOM规范，DOM是HTML与XML的应用编程接口(API)，DOM将整个页面映射为一个由层次节点组成的文件。根据DOM，HTML文档中的每个成分都是一个节点。节点彼此都有等级和包含关系。HTML文档中的所有节点组成了一个文档树(或节点树)。HTML文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。

CSS：即层叠样式表(Cascading Style Sheets)。级联样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言)等内容样式的计算机语言。CSS是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。

JavaScript(JS)：一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML(标准通用标记语言下的一个应用)网页上使用，用来给HTML网页增加动态功能。

另外，利用无线移动终端的浏览器打开互联网网页的过程大体上包括以下步骤：

加载网页文件、解析DOM树、JavaScript运行、CSS解析和网页渲染、网页的展现和交互。

具体而言，在利用无线移动终端的浏览器打开互联网网页时，浏览器向WEB服务器发出一个请求(即发送一个网页文件)。然后，WEB服务器向无线移动终端返回一个网页文件，在返回的网页文件中包括页面加载的初始内容的HTML描述。

无线移动终端的浏览器在收到返回的网页文件后将会使用HTML规范，将该网页文件解析为DOM树。在DOM树中包含一些特别的DOM节点，它们描述为一些特定类别的内容外链，比如描述网页需要的JavaScript文件外链，描述网页中嵌入显示的图片、视频文件外链，描述网页内容展现样式描述的CSS文件外链等。浏览器会在DOM树解析中立即发起对这些内容的网络请求。

当DOM树的解析中遇到JavaScript节点，浏览器会立即执行其中所描述的JavaScript程序代码段。这些程序同样可能对已有的DOM树进行修改，从而影响网页的内容展现。

在DOM树构造完成后，浏览器会使用网页内描述的CSS信息，对DOM树上所有的内容进行排版和样式的处理。这些内容和样式最终通过浏览器的图形界面得以描绘展现。

在网页加载完成后，网页内容不仅可读，而且包含一定的用户交互。网页浏览用户可以通过鼠标、键盘、屏幕触摸等向网页输入信息，网页中的一些DOM节点或JavaScript程序会响应这些输入，并修改网页的内容展现和网页的运行状态。网页的状态得以持续，直至网页被浏览器关闭。

目前使用无线移动终端(例如，手机)访问互联网网页至少存在以下问题。

1、屏幕尺寸的限制问题；

目前互联网上针对普通个人电脑设计的PC站点相对于针对手机设计的移动站点而言，优势在于信息价值更大。这种优势体现在PC站点的用户习惯、内容数量、内容质量和更新速度等方面。但是针对个人电脑设计的PC站点的网页排版版式往往不适合手机浏览。由于页面宽度固定且宽度过大、字体偏小等原因，在手机上阅读PC站点的网页非常不方便。

2、网速和单位流量成本问题；

对于针对个人电脑设计的PC站点，其接入网络一般为固定网络。相比于移动网络，固定网络在网络带宽、网络传输时延、单位数据流量成本和价格方面具有明显优势。因此，PC站点网页设计通常在页面中包括大量的非网页主体内容，访问时普遍需要消耗较大的数据流量。

3、电池续航问题。

考虑到个人电脑处理能力一般比手机更强，同时个人电脑一般具有固定电源或大功率移动电源，因此PC站点的网页运行时比手机网站网页需要更多的CPU消耗以及更多的电量消耗。

在使用手机访问PC站点网页时，可以通过浏览加速服务器来解决上述问题或减小上述问题的不利影响。通过浏览加速服务器加速可以提升手机访问互联网网页的速度并且减少网页访问中电池电量消耗。同时为了便于用户阅读，浏览加速服务器可以针对手机的屏幕尺寸，进行内容的重新排版。

现有浏览加速服务器加速技术从两个层次进行优化。

1.网页加载相关资源文件的过滤、合并和压缩。

在浏览器所进行的网页加载过程中，浏览器需要首先获取网页地址所对应的页面文件(简称为：主链)。在所获取的页面文件中包含众多的链接用于页面内容的处理和页面渲染(简称为：外链)，比如常见的CSS外链、JS外链、图片资源等。一个复杂的网页所需要加载的外链很多，通过对这些外链的合并、过滤和压缩，可以提升页面加载速度，并能在一定程度上达到降低网络流量消耗的目的。

2.页面内容的过滤和排版适配。

通过对页面内容的分析，过滤掉部分不常使用的网页内容。比如常见的广告、过多的站点阅读引导等。通过对页面内容的重排，可以让处理后的页面宽度适应当前终端屏幕，让内容便于在小尺寸屏幕的设备上阅读。

但是，现有技术往往基于整页的加载。被浏览网页针对PC而设计，页面非常可能很大，过大的网页在服务器优化后一次性下载到手机客户端，所需要加载的网页内容同样会很大，因此加速效果受限。同时由于页面过大，大部分的内容可能在网页关闭前不会被阅读到，因此会造成很大比例的数据流量的浪费。

公开于本背景技术部分的信息仅仅旨在加深对本发明的一般背景技术的理解，而不应当被视为承认或以任何形式暗示该信息构成已经为本领域技术人员所公知的现有技术。

发明内容

本发明旨在至少解决上述技术问题之一。

本发明提供一种网页内容的延迟加载方法，包括以下步骤：

发起步骤：通过无线移动终端的浏览器向浏览加速服务器发起浏览加速请求；

获取和分析步骤：在接收到所述浏览加速请求之后，通过所述浏览加速服务器从互联网服务器获取网页内容并对所述网页内容进行分析，生成返回信息；

返回步骤：通过所述浏览加速服务器将所述返回信息返回至所述无线移动终端；

加载和展现步骤：根据浏览进度以及所述返回信息，通过所述无线移动终端的浏览器延迟加载并展现所述网页内容。

另一方面，本发明提高一种网页内容的延迟加载***，包括：

发起模块，用于通过无线移动终端的浏览器向浏览加速服务器发起浏览加速请求；

获取和分析模块，用于在接收到所述浏览加速请求之后，通过所述浏览加速服务器从互联网服务器获取网页内容并对所述网页内容进行分析，生成返回信息；

返回模块，用于通过所述浏览加速服务器将所述返回信息返回至所述无线移动终端；

加载和展现模块，用于根据浏览进度以及所述返回信息，通过所述无线移动终端的浏览器延迟加载并展现所述网页内容。

本发明提出一种页面内容逐步加载的浏览方式和实现技术。通过对网页内容的分析，将网页划分为多个内容块。根据网页实际被浏览的需要，序列化逐步加载各个内容块。由于网页加载是在用户的浏览过程中逐步完成，因此可以大大缩短点击后用户需要的加载等待时间。

本发明实现了浏览器对所加载网页的内容延迟加载技术。本发明根据实际浏览进度，逐步加载、适配调整和渲染显示网页内容。本发明特别适用通过手机进行互联网网页的浏览。

本发明可以优化缩短移动客户端在网页浏览中的加载延迟和流量浪费。本发明将网页加载需要的解析、渲染运算分布化进行，降低网页加载时移动客户端所需要的运算量，从而有利于提升移动终端设备的电池续航性能。

通过纳入本文的附图以及随后与附图一起用于说明本发明的某些原理的具体实施方式，本发明的方法和***所具有的其它特征和优点将变得清楚或更为具体地得以说明。

附图说明

图1是根据本发明实施例的网页内容的延迟加载方法的简化流程图。

图2是根据本发明实施例的移动客户端与浏览加速服务器的交互逻辑的流程图。

图3是根据本发明实施例的网页分块的流程图。

图4是根据本发明实施例的网页分块的示意效果图。

具体实施方式

现在将详细地参考本发明的各个实施方案，这些实施方案的实例被显示在附图中并描述如下。尽管本发明将与示例性实施方案相结合进行描述，但是应当意识到，本说明书并非旨在将本发明限制为那些示例性实施方案。相反，本发明旨在不但覆盖这些示例性实施方案，而且覆盖可以被包括在由所附权利要求所限定的本发明的精神和范围之内的各种选择形式、修改形式、等效形式及其它实施方案。

图1是根据本发明实施例的网页内容的延迟加载方法的简化流程图。

根据本发明实施例的网页内容的延迟加载方法包括以下步骤：

步骤S101，移动设备的浏览器向浏览加速服务器发起浏览加速请求；

步骤S102，浏览加速服务器在收到浏览加速请求后，对网页进行获取和内容分析，将网页划分成一系列内容块，缓存这些内容，并生成返回信息；

步骤S103，浏览加速服务器将包括网页总体结构信息的返回信息返回给浏览器；

步骤S104，浏览器根据用户的浏览进度和返回信息，以内容块为单位，逐步加载和展现网页内容，直至页面内容被全部下载显示。

上述步骤S104可能包括移动设备的浏览器与浏览加速服务器之间的多次交互和信息传递，例如，移动设备的浏览器可以根据浏览进度需要一次或多次向浏览加速服务器请求网页的部分块的内容，浏览加速服务器相应地提取被请求的块内容，并将被请求的块内容返回至移动设备。

换言之，根据本发明的一个实施例，在实施本发明的方法时，首先可以通过无线移动终端(例如，移动设备、移动客户端或手机、个人数字助理PDA、平板电脑等)的浏览器向浏览加速服务器发起浏览加速请求。在接收到浏览加速请求之后，浏览加速服务器从互联网服务器获取网页内容并对网页内容进行分析，生成返回信息。例如，根据网页内容的总体结构，可以将网页内容分成若干内容块。返回信息至少包括内容块信息，内容块信息包括内容块的排序。然后，浏览加速服务器将返回信息返回至无线移动终端。根据浏览进度以及返回信息，无线移动终端的浏览器延迟加载并展现网页内容。例如，根据网页内容的总体结构，网页内容被分成若干内容块，若干内容块按一定逻辑顺序形成一系列内容块(即，序列化)，无线移动终端的浏览器可以延迟加载部分内容块，从而逐步展现网页内容。

关于本发明的网页分块、排序及结果，在下文中参见图3和图4进行具体说明。

另外，步骤S103返回的总体结构信息(整页框架信息)中可以携带一个额外的菜单组件，以及一个在网页上浮动显示的按钮，点击该按钮可以触发菜单组件的显示。在该组件中可以提供一些网站网页浏览中需要的便捷操作。比如：提供网站主导航一键显示功能，提供互联网网页上的上下页翻页快捷功能，提供将当前网页收藏到服务器端保存的书签功能，以及由被访问网站所开发、定制的针对手机浏览的便捷功能等。

另外，浏览加速服务器持续保存网页内容的访问状态，如果无线移动终端的浏览器对网页内容的加载暂停或中断，则在无线移动终端的浏览器下次访问网页内容时，浏览加速服务器使用所保存的访问状态，使得无线移动终端的浏览器能够基于所保存的访问状态继续访问。

另外，在返回给浏览器的返回信息中，除了网页的总体结构信息之外，还可以同时包括一部分的网页内容块。从而，浏览器在第一次收到返回信息之后就可以加载并展现部分网页内容。

本发明涉及的网页内容至少包括文本、图片、视频、音频等等。

图2是根据本发明实施例的移动客户端与浏览加速服务器的交互逻辑的流程图。如图2所示，根据本发明实施例的移动客户端与浏览加速服务器的交互包括如下步骤。

步骤S201，在移动客户端，浏览器接受请求，需要打开一个网页；

步骤S202，移动客户端向浏览加速服务器发起网页浏览请求，并携带客户端相关***信息；

步骤S203，在浏览加速服务器，浏览加速服务器接受并验证请求；

步骤S204，浏览加速服务器从互联网服务器请求资源网页；

步骤S205，浏览加速服务器模拟客户端环境进行网页的加载、解析和内容渲染；

步骤S206，浏览加速服务器对解析后的网页进行分块计算；

步骤S207，浏览加速服务器将页面相关的全局信息返回至移动客户端；

步骤S208，移动客户端保存页面相关的全局信息，并发起块内容的请求；

步骤S209，移动客户端向浏览加速服务器请求网页的部分块的内容；

步骤S210，浏览加速服务器提取被请求的块内容；

步骤S211，浏览加速服务器将被请求的块内容返回至移动客户端；

步骤S212，移动客户端对返回的块内容根据终端设备的要求进行适配调整，并在浏览器网页上展现；

步骤S213，根据浏览进度需要重复步骤S209-S212，直到页面加载完全。

根据步骤S213，页面内容块的延迟加载同时包含对这些内容块中包含的资源文件的延迟加载，从而实现更大的流量节省并且减少移动客户端(如手机)瞬间高强度运算需求。

图2所示的流程图仅仅是本发明的一个实施例。本发明并不一定要求移动客户端与浏览加速服务器的多次交互。例如，在第一次返回给客户端浏览器的数据中，除了网页的总体结构信息外，还可以同时包括一部分的网页内容块，这样浏览器在显示第一部分的网页内容前不再需要向浏览器加速服务器发起数据请求，即，浏览器通过1次请求(网页浏览请求)就可以加载并展现网页内容。

图3是根据本发明实施例的网页分块的流程图。

在浏览加速服务器端，只有使用合理的网页内容分块技术来划分网页，才能得到网页延迟加载所需要的内容块(序列化加载的最小单元)，延迟加载处理后网页的内容结构才会尽可能少的被破坏，从而保证延迟加载后网页有较好的可读性。

合理的网页划分一方面需要兼顾网页设计中交互层面网页内容分隔的整体框架结构，使得划分出的内容块具有视觉层面的模块性；另一方面同时需要兼顾页面内容的关联性，有内容依赖关系的元素在页面分块中尽可能不被拆分。

本发明的网页分块技术采用多种分块算法的结合，实现分块结果尽可能与网页中的内容块相一致。根据本发明的一个实施例，网页分块的主要流程包括以下步骤：

1)S301：网页文件的解析和内容排版、渲染计算；基于WEB标准的网页加载，浏览器进行网页的加载、解析。为了优化浏览加速服务端的运行效率，网页解析时可以关闭部分不必要的浏览器特性。比如：关闭服务端浏览器的网页图片、视频的加载显示功能，关闭部分的JavaScript功能。

2)S302：基于DOM树的网页元素的位置计算；遍历步骤S301所生成的DOM树，计算每个DOM节点在网页中的宽度、高度和坐标位置。

3)S303：基于DOM树的网页元素的视觉边距计算；遍历DOM树，基于上下层DOM节点间的位置覆盖关系，计算每个DOM节点的上、下、左、右视觉空白边距。

4)S304：在DOM树上，自顶向下根据视觉边距进行内容的拆分，拆分出网页单元内容块；在上述步骤S303之后，进一步计算出网页内的主要视觉分隔栏。以这些分隔栏为基础，将网页划分为若干内容块。

5)S305：合并具有强依赖关系的内容块；对各个内容块进行内容特征的识别，识别出常见的页面内容。比如：文章标题、文章正文、翻页块、导航栏等。根据内容阅读的需要，合并相关内容块。

6)S306：输出分块结果。以上述最终的分块结果的每个块为基本单位，输出网页的内容。

图4是根据本发明实施例的网页分块的示意效果图。

根据参照图3描述的上述分块步骤，分别计算出整页的分隔栏如图4中虚线所示。以这些虚线为基础，将整页划分为图示的块1至块12。图4示意性地说明了根据本发明的网页分块的效果，其中的具体网页内容并不构成对本发明的限定。

本发明的块排序技术能够额外提高本发明的效果。

在针对个人电脑的PC网站网页设计中，由于屏幕宽度较大，可能存在左右平列的多列内容，其中包括主体内容列也可能包括非主体内容的列，由于是并排展现，这些内容被序列化后在手机上加载时有可能主体在前或者主体在后。如果主体在后，则影响用户对网页主体内容的阅读。另一种情况，在PC网站网页中主体内容之前有一定数量的其它内容，如广告区域、网站导航栏等。由于手机宽度的限制，这些内容被序列化并压缩到手机屏幕宽度后，高度会变得很大，从而影响手机用户对网页主体内容的阅读。

通过块排序技术能够解决上述情况下的网页主体内容之前存在过多非主体内容的问题。例如，可以根据网页内所识别块的重要度来进行块顺序调整的依据。例如，块排序可以采用以下两种方式中的任一种方式或以下两种方式的结合来实现：基于DOM树下位置为左右并列或上下并列的多个节点的顺序调整；以及基于内容类型识别，将特定内容块调整位置到与其相关联内容块的附近。

另一方面，在手机端，将根据网页实际被浏览的需要，延迟加载互联网网页被划分出的所述内容块。采用多种方法判断是否需要触发更多内容块的加载：

1.可以根据当前浏览中的纵向的滚动位置与浏览器已加载内容的累计高度的比较来进行判断。当阅读位置距离已加载内容的尾部已经很近时，触发后续内容块的加载。

2.在网页的大的段落处设置确认节点，由浏览用户在页面内点击确认后触发继续的自动加载。

前面对本发明具体示例性实施方案所呈现的描述是出于说明和描述的目的。前面的描述并不想要成为毫无遗漏的，也不是想要把本发明限制为所公开的精确形式，显然，根据上述教导很多改变和变化都是可能的。选择示例性实施方案并进行描述是为了解释本发明的特定原理及其实际应用，从而使得本领域的其它技术人员能够实现并利用本发明的各种示例性实施方案及其各种选择形式和修改形式。本发明的范围意在由所附权利要求书及其等效形式所限定。

Claims (10)

1.一种网页内容的延迟加载方法，包括以下步骤：

发起步骤：通过无线移动终端的浏览器向浏览加速服务器发起浏览加速请求；

获取和分析步骤：在接收到所述浏览加速请求之后，通过所述浏览加速服务器从互联网服务器获取网页内容并对所述网页内容进行分析，生成返回信息；

返回步骤：通过所述浏览加速服务器将所述返回信息返回至所述无线移动终端；

加载和展现步骤：根据浏览进度以及所述返回信息，通过所述无线移动终端的浏览器延迟加载并展现所述网页内容。

2.根据权利要求1所述的网页内容的延迟加载方法，其特征在于，所述网页内容至少包括文本、图片、视频或音频。

3.根据权利要求1所述的网页内容的延迟加载方法，其特征在于，对所述网页内容进行分析包括根据所述网页内容的总体结构将所述网页内容分为若干内容块，所述返回信息至少包括内容块信息，所述内容块信息包括所述内容块的排序。

4.根据权利要求1所述的网页内容的延迟加载方法，其特征在于，所述返回信息包括功能菜单命令，所述功能菜单命令使得所述无线移动终端的浏览器能够生成功能菜单，实现浏览所述网页内容所需的快捷工具和/或来自所述互联网服务器的针对所述无线移动终端的定制功能。

5.根据权利要求1所述的网页内容的延迟加载方法，其特征在于，所述浏览加速服务器持续保存所述网页内容的访问状态，如果所述无线移动终端的浏览器对所述网页内容的加载暂停或中断，则在所述无线移动终端的浏览器下次访问所述网页内容时，所述浏览加速服务器使用所保存的访问状态，使得所述无线移动终端的浏览器能够基于所保存的访问状态继续访问。

6.一种网页内容的延迟加载***，包括：

发起模块，用于通过无线移动终端的浏览器向浏览加速服务器发起浏览加速请求；

获取和分析模块，用于在接收到所述浏览加速请求之后，通过所述浏览加速服务器从互联网服务器获取网页内容并对所述网页内容进行分析，生成返回信息；

返回模块，用于通过所述浏览加速服务器将所述返回信息返回至所述无线移动终端；

加载和展现模块，用于根据浏览进度以及所述返回信息，通过所述无线移动终端的浏览器延迟加载并展现所述网页内容。

7.根据权利要求6所述的网页内容的延迟加载***，其特征在

于，所述网页内容至少包括文本、图片、视频或音频。

8.根据权利要求6所述的网页内容的延迟加载***，其特征在于，对所述网页内容进行分析包括根据所述网页内容的总体结构将所述网页内容分为若干内容块，所述返回信息至少包括内容块信息，所述内容块信息包括所述内容块的排序。

9.根据权利要求6所述的网页内容的延迟加载***，其特征在于，所述返回信息包括功能菜单命令，所述功能菜单命令使得所述无线移动终端的浏览器能够生成功能菜单，实现浏览所述网页内容所需的快捷工具和/或来自所述互联网服务器的针对所述无线移动终端的定制功能。

10.根据权利要求6所述的网页内容的延迟加载***，其特征在于，所述浏览加速服务器持续保存所述网页内容的访问状态，如果所述无线移动终端的浏览器对所述网页内容的加载暂停或中断，则在所述无线移动终端的浏览器下次访问所述网页内容时，所述浏览加速服务器使用所保存的访问状态，使得所述无线移动终端的浏览器能够基于所保存的访问状态继续访问。