VIPS:基于视觉的Web页面分页算法[转]

VIPS:基于视觉的Web页面分页算法

1.问题的提出

目前，随着互联网的高速发展，Web已经成为这个世界上最大的信息来源。Web 作为信息技术的载体已成为人们重要的工作、学习、生活、娱乐工具。Web的发展给人类生活带来了巨大的方便，人们可以跨越时间和空间界限来共享大量信息。 但是如何去获取这些Web信息为我们所用则是大家面临的共同问题。在最基本的层次上，整个Web网络就是由无数的Web页面而构成，因此如果获取了这些 Web页面就相当于获取了Web信息内容。事实上，目前的很多Web信息获取技术都是基于这种理论。

但是把整个页面作为一个基本的信息获取单位并不是太合理，尽管用户通常会把一些相关的内容放在同一页面中，但是大多数情况下，一个页面中通常会包含不止一类的主题，比如在新浪的页面中，可能包含体育类信息，可能包含健康类信息，也可能包含广告、导航链接等信息。这些信息分布在整个页面的不同位置。因此，如果要更准确的获取Web信息，我们必须能够对给定的Web页面进行更进一步的语义提取。

Web页面的语义提取在很多方面都有应用。比如，在Web信息访问中，为了克服关键字搜索所带来的局限性，许多研究者开始使用数据库技术，构建包装器将Web数据进行结构化处理。在构建包装器的过程中，将Web文档分割为一定数目的数据块是首要的工作。目前的工作大多数停留在使用自适应的方法上。如果我们能够获取Web页面的语义内容结构信息，那么构建包装器的过程就非常的简单，当然语义信息也就很容易提取出来。

语义块的提取另外一个应用场合就是搜索引擎。对于搜索引擎而言，链接分析是一个极为重要的工作。目前，对于大部分的搜索引擎而言，链接分析算法的基本前提假设就是如果两个页面之间存在链接关系，那么这两个页面整体上肯定存在着一定的关系。但是在大部分情况下，从页面A到页面B的链接仅仅意味着页面A的某部分与页面B的某部分之间可能存在一定的关系。目前的很多算法比如PageRank以及HITS都是基于前面的假设。把链接关系定义在两个完整的页面之间与定义在两个页面的某部分之间相比，则更粗糙一些。因此对于搜索引擎而言，如果要更准确的获取链接的关系，把一个完整页面分割为多个语义块是一个必须的工作。 目前已经有一些工作针对这方面进行展开。不过这些工作都是基于DOM树分析页面的结构。但是DOM树并不能完全反映页面的语义结构，因此这种做法还存在一定的缺陷。

Web页面的语义分块另外一个潜在的用途就是移动终端访问互联网。目前大部分的Web页面都是针对台式机而设计的，由于移动设备通常屏幕较小，计算能力有限，因此这些页面并不适合移动设备直接访问。目前通常通过两种手段来解决这种问题：或者通过服务器进行页面转换或者使用网页缩略图。前者首先将用户访问的页面进行分页和转换，然后将分页的结果提交给移动设备；后者则是将整个Web页面生成缩略页面，整个页面被分割为数目不等的区域，用户如果对特定区域感兴趣，则可以再次访问该区域的内容。通过这两个策略，基本可以完成移动终端访问互联网的任务，但是核心内容还是如何对页面进行语义分割。

如果对Web页面进行有效的分页，目前已经很多工作展开。[Chakrabarti etal.2002]致力于从HTML DOM树中提取出结构化信息。不过由于HTML语法的灵活性，目前大部分的网页都没有完全遵循W3C规范，这样可能会导致DOM树结构的错误。更重要的是，DOM树最早引入是为了在浏览器中进行布局显示而不是进行Web页面的语义结构描述。比如，即使DOM树中两个结点具有同一个父结点，那么这两个结点在语义上也不一定就是有联系。反之，两个在语义上有关系的结点却可能分布在DOM树的不同之处。因此仅仅通过分析DOM树并不能完全获取Web页面的语义信息。

从人类的角度来看，当一个用户观察Web页面的时候，它总是会自然而然的把一个语义块作为一个单一对象来看待，而不会管Web页面的内部结构是如何描述的。 通常情况下，在分辨语义块的时候，用户会使用一些视觉因素来进行帮助，比如背景颜色、字体颜色和大小、边框、逻辑块和逻辑块之间的间距等等。因此如果充分的使用Web页面的视觉提示，并结合DOM树进行页面语义分块，则可以弥补仅使用DOM树所带来的一些缺憾。

在论文中，我们提出了VIPS(Vision-based page segmentation)算法用以提取给定网页的语义结构。这种语义结构是层次性的结构，在该结构中，每一个结点代表一个语义块。每一个语义块都定义一 个DOC值来描述该语义块内部内容的关联性。DOC的值越大，则表明语义块内部的内容，它们之间的联系越紧，反之越松散。VIPS算法充分利用了Web页面的布局特征：它首先从DOM树中提取出所有的合适的页面块，然后根据这些页面块检测出它们之间的所有的分割条，包括水平和垂直方向。最后基于这些分割条，Web页面的语义结构将被重新构建。对于每一个语义块又可以使用VIPS算法继续分割为更小的语义块。因此整个VIPS算法是自顶向下，非常高效的。

2.相关工作

忽略不介绍。

3.Web页面的基于视觉的内容结构描述

与[chen et al. 2001]类似，VIPS算法中首先也定义了“基本对象”的概念，通常DOM树上的叶子结点被定义为基本对象，因为这些结点已经不能再被继续分割了。在本论文中，我们首先引入了基于视觉的内容结构，它里面的每一个结点我们称之为“块”，这些块或者是一个基本对象或者是一些基本对象的组合。有一点需要注意的是，基于视觉的内容结构中的块与DOM树中的结点没有绝对的对应关系。

与[Tang et al.1999]中文档的描述结构类似，VIPS算法中Web页面的结构定义如下。

对于每一个页面而言，我们可以将其看作一个三元组Ω=(Ο，Φ，δ)，其中

Ο=(Ω1，Ω2，…ΩN)，表示给定页面上的所有的语义块的集合，这些语义块之间没有重叠覆盖，而每一个语义块Ωi又可以被定义为前面所描述的三元组Ωi = (Οi，Φi，δi)，如此迭代循环；

Φ=( ϕ1，ϕ2，…ϕT )，表示当前页面上的所有的分隔条的集合。事实上，一旦确定了一个页面上的两个语义块，那么这两个语义块之间的分隔条也就被确定了。当然，VIPS中的分隔条并不是真正存在的分隔条，而是虚拟的。分隔条包括水平分隔条，也包括垂直分隔条。每一个分隔条都具有一定的宽度和高度。

δ=(ζ1，ζ2，…，ζM)则描述了Ω集合中两个语义块之间的关系，这种关系可以用下面的式子描述：δ =Ο×O→Φ∪{NULL}。其中的每个ζ都是一个形如(Ωi，Ωj)二元组，其表示块Ωi和Ωj之间存在一个分割条。

上图演示了Yahoo页面的基于视觉的Web页面内容结构。它同时给出了页面的布局结构和基于视觉的内容结构。在第一层，整个原有的页面被分割为四个大的可视对象VB1-VB4，同时在这四个对象之间检测出了三个分隔条ϕ1 –ϕ3(原来有五个，最上面的和最下面的被舍弃)。检测出的四个可视对象并不是这轮分割的最终的局部。最终得到的语义块必须根据检测出的四个可视对象和三个分隔条进一步构建而成，其中可能需要合并一些语义块，舍弃一些分隔条等等。

比如，对于VB2，从它的内部又可以检测出三个子对象和两个分隔条，如图1所示。

对于每一个Block，VIPS算法都定义一个DoC(Degree of Coherence)与之对应。该值的大小反映了当前语义块内部内容联系的紧密程度。它具有下面两个重要的特性：

1) DoC的值越大，则语义块内部的内容之间的联系紧密程度就越大，它们之间就关系就越连续，反之越小。

2) 在层次数上，语义块的子块的DoC的值肯定要比父块的值大。

在 VIPS算法中，DoC的值位于1到10之间。不过这个范围是可以更改的。在对Web页面进行语义分割之前，我们首先设定一个预定义DoC值 PDoC(Permitted Degree of Coherence)，通过该值来限定分割的语义块的粗糙程度。当语义块的DoC值达到PDoC之后，迭代分割就停止。PDoC越小，则分割的语义块就越粗糙，反之，分割的语义块就越精细。比如在图1中，如果给出一个适当的PDoC的值，VB2_1块将变的不再允许分割。不同的应用程序可以设置不同的 PDoC值来达到自己的要求。

基于视觉的页面分割最主要的目的就是对给定的页面进行语义分割，因此分割后生成的基于视觉的内容结构中的结点通常总是一定的语义单位，包含一定的语义。比如在图1(a)中，我们可以看到VB2_1_1表示Yahoo宠物商店的目录链接，而VB2_2_1和VB2_2_2则表明了两种不同的comics。

4.VIPS算法描述

这部分我们将详细介绍VIPS算法。整体来说，页面的基于视觉的内容结构是结合DOM树以及一些视觉提示信息而得到的。整个分页过程可以用图2描述。它具有三个步骤：页面块提取、分隔条提取以及语义块重构。这三个步骤联合一起作为一次语义块检测的完整步骤。Web页面首先被分割为几次比较大的语义块，同时这几个语义块所组成的层次结构将被记录下来。对于检测出来的每一个大的语义块分页过程又可以继续进行，直到语义块的DoC值达到预先设定的PdoC为止。

在每次迭代循环中，当前逻辑块的DOM树结构以及它的视觉信息都将被获取。然后，从DOM树的根结点开始，逻辑块检测过程将基于视觉信息开始从DOM树中开始检测页面块。每一个DOM结点(图3b中的结点1,2,3,4,5,6,7)都会被检查它能够构成一个单独的页面块。如果不能，比如图3b中的 1，3，4结点，那么它的子结点将被执行同样的检查。对于每一个提取出来的页面块，比如图3b中的2，5，6，7结点，我们都会根据当前页面块的内部可视属性赋予一个DoC值。当本次迭代过程中所有的页面块都被检测出来之后，它们将被保存到页面块池中。基于这些页面块，分隔条检测过程将开始工作。这些页面块之间的所有的水平分隔条和垂直分隔条最终将被识别出来并且赋予一定的宽度和高度。基于这些分隔条，页面的布局层次将被重新构建——一些页面块将被合并，形成语义块。最终，本次迭代过程中的所有语义块都被检测出来。

迭代过程是否需要继续进行取决于本层次的语义块中是否存在DoC值小于PdoC的语义块。对于那些DoC>=PdoC的语义块，分隔过程将停止，否则分隔过程将继续。比如再下图中，语义块C的DoC值小于PdoC，那么该语义块将被作为新的子Web页面，继续执行分割算法，最终又被分割为两部分：C1 和C2，如图4a和4b所示：

当所有的语义块被提取出来后，最终整个Web页面的基于视觉的内容结构也就构建完成。在上面的例子中，我们最终获取的内容层次结构如图5所示。在下面的部分我们将详细的描述语义块的检测、分隔条的检测以及内容结构重建过程。

4.1语义块提取

在这步骤中，我们的目标是提取出当前子页面中所包含的所有的可视语义块。通常情况下，DOM树中的每一个结点都可以表示一个可视语义块。不过，在HTML中，一些标签比如<TABLE> 和<P>通常用来进行数据组织，因此不适合表示单独的可视语义块。对于这种结点，对他们的提取将被它们的孩子结点替代。而且由于HTML语法的灵活性，很多的Web页面并没有严格遵循W3C的HTML规范，这导致DOM树并不能总是能反映不同的DOM结点之间的关系。

对于提取出来的每一个可视语义块，我们将根据它的内部的视觉差异设置它的DoC值。整个迭代提取过程可以用下面的算法描述：

如何判断给定的结点能否被继续分割，我们给出下面的几个方面进行判断：

1) DOM结点本身的属性。比如当前DOM结点的标签，结点的背景色，当前结点所代表的页面块的大小，形状。

2) 当前DOM结点的孩子结点。比如孩子结点的标签，孩子结点所代表的区域的背景色，前景色，区域的大小以及不同类型的孩子的数目等等。

基于WWW HTML规范4.0，我们将DOM结点分为两大类：inline结点和line-break结点。

所谓Inline结点是指：如果该结点的标签能够影响文字的外观同时不会引起换行的话，那么这类结点我们称之为Inline结点，比如<B>、<BIG>、<EM>、<FONT>、<I>、<STRONG>、<U> 等等，这类结点通常仅仅影响文字的外观而不会影响文字的布局。

所谓Line-break结点，则就是除了inline结点之外的所有结点。

另外，基于各种结点在浏览器中的显示以及结点的孩子结点属性，我们给出下面的定义：

1) 有效结点(Valid node)：如果一个结点能够在浏览器中表现出来，那么这个结点就是有效结点。通常有效结点的长度和宽度都不为零。另外如果一个结点内部没有任何有用的信息，我们也称之为无效结点。比如图7中的第二个和第四个TR结点都是无效结点；

2) 文本结点：这类结点通常是指HTML中的文字，通常它们不被任何标签所包围；

3) 虚拟文本结点(这个定义是递归定义)。

¢ 如果一个结点是文本结点，那么它自然就是虚拟文本结点；

¢ 如果一个结点是inline结点，并且它的所有子结点要么是文本结点，要么是虚拟文本结点，那么这个结点也就是虚拟文本结点。

如果一段文字加上了<B>、<BIG>、<I>等标签之后，该文字只是在浏览器中的显示外观发生了变化而已，并不影响这段文字本质上为文字的属性，VIPS中将之称之为虚拟文本结点，并不难理解。

可视语义块的提取算法DivideDomtree如图6所示。在该算法中一些很重要的信息可以用于产生推测规则：

¢ 标签提示

1) 一些标签比如<HR>通常用来从视觉上分隔不同主题的内容。因此如果DOM结点中包含这些标签，那么我们倾向于认为该结点允许被继续分割。

2) 如果inline结点的孩子结点存在line-break结点，那么该结点将被倾向于被分割。

¢ 色彩提示

如果当前结点的孩子结点中有一个结点的背景色与它的背景色不同，那么我们倾向于分割该DOM结点。同时，具有不同背景色的节点在本次循环中不再被分割。分割由下一次迭代完成。

¢ 文本提示

如果当前结点的大部分孩子结点都是文本结点或者是虚拟文本结点，那么我们倾向于不再继续分割该结点。

¢ 尺寸提示

我们通常可以对不同的结点类型预定义一个门槛尺寸(结点的大小与整个页面大小的比较)，如果结点的相对尺寸小于门槛大小，那么分割就停止。

基于上面的这些提示信息，我们给出一些推理规则用以判断当前的结点是否应该被分割。如果一个结点不需要再分割，那么该结点块将被提取出来，同时设置相应得DoC值，并保存到页面块池中。推理规则如下表所示：

规则 1

如果当前结点不是文本结点，同时它又没有任何有效的孩子结点，那么该结点将不被分割，并且从结点集合中删除。

规则 2

如果当前结点只有一个有效的孩子结点，同时该孩子结点不是文本结点，那么当前结点将被分割。

规则 3

如果当前的DOM结点是整个子DOM树的根结点(与页面块对应)，同时只有一个子DOM树与当前的页面块关联，那么分割该结点。

规则 4

如果当前结点的所有的孩子结点都是文本结点或者是虚拟文本结点，那么不分割该节点。如果当前所有孩子结点的字体大小和字体重量都是相同的，那么该页面块的DoC设置为10，否则设置为9。

规则 5

如果当前DOM结点的孩子结点中有一个line-break结点，那么该结点将被继续分割。

规则 6

如果当前结点的孩子结点中存在<HR>结点，那么该结点将被继续分割。

规则 7

如果所有孩子节点的尺寸之和大于DOM树节点的尺寸，那么分割该节点。

规则 8

如果当前结点的背景色与它的所有子结点中的某个的背景色不相同，那么该结点将被分割，同时具有不同颜色的子结点在本次迭代中不分割，分割在下轮迭代中进行。与此同时，孩子结点的DoC的值根据标签和尺寸的不同设置为6-8。

规则 9

如果结点至少具有一个文本或者虚拟文本子结点，同时结点的相对大小小于门槛大小，那么这个结点不再分割，同时根据标签的不同，DoC的值设置为5-8。

规则 10

如果当前结点的所有子结点中最大的尺寸也小于门槛大小，那么该结点将不再分割，同时DoC值根据HTML标签和结点大小设置。

规则 11

如果前一个兄弟结点没有被分割，那么该结点也不会被继续分割。

规则 12

分割该结点

规则13

不要分割该结点，同时基于当前结点的标签和大小设置DoC值

对于不同的DOM结点，我们使用不同的推理规则：

让我们考虑图1的情况。在第一次页面块提取得过程中，最终VB1，VB2_1，VB2_2，VB2_3以及VB3和VB4被提取出来，然后放进了语义块池中。下面我们将详细描述VB2_1，VB2_2以及VB2_3提取的过程。

图7(b)显示的是一个表格，该表格是整个Web页面的一部分。它的DOM树结构显示在左边的部分。在页面块的提取过程中，当遇到<TABLE>结点的时候，它只有一个有效的孩子结点<TR>。根据规则2，我们进入<TR>标签。该<TR>结点具有五个<TD>孩子结点，但是它们中只有三个是有效结点。而且第一个孩子结点的背景颜色与父亲结点的颜色不同。根据规则8，该<TR>结点将被分割，而第一 个<TD>结点在本次迭代中部进行分割。第一个<TR>结点被保存到页面块池中。第二个和第四个<TR>结点为无效结点，因此它们将被删除。对于第三个和第五个<TD>结点，根据推理规则11，在本次迭代中不再分割，因此最终我们得到三个页面块 VB2_1，VB2_2和VB2_3。

4.2分隔条检测

当所有的页面块被提取出来之后，它们都被保存在页面块池中以便进行分隔条检测。在VIPS算法中，分隔条是Web页面中的垂直的或者水平的行。从视觉的角度而言，分隔条在描述页面的不同语义信息方面具有很好的指示作用。

在VIPS中，一个可视的分隔条可以用二维向量(Ps，Pe)描述，其中，Ps是分隔条的起始坐标，而Pe则是分隔条的终止坐标。坐标的单位全部为像素pixel。根据Ps和Pe，很容易计算当前分隔条的宽度和高度。

4.2.1 分隔条检测

分隔条的检测算法如下描述：

1) 初始化分隔条列表。最早的分隔条列表中仅仅存在一个分隔条，它的起始和终止坐标为(Pbe,Pee)，分别对应整个Web页面的起始坐标和终止坐标。

2) 对于页面块池中的每一个页面块，它与分隔条的关系包括下面三种：

l 页面块被包含在分隔条中，此时，该分隔条将从页面块的边缘裂变为多个分隔条；

l 页面块与分隔条发生部分重合，那么根据页面块的边界重新调整分隔条的参数；

l 页面块跨越分隔条，那么此时移除该分隔条。

3) 移除页面边缘的四个分隔条

图8演示了分隔条的检测过程。为了简单期间，我们仅仅演示水平分隔条的检测过程。开始的时候我们之后一个大的分隔条，它的起始和终止位置就是整个页面的起始和终止位置。当我们将第一个页面块放入到池中的时候，由于该页面块被包含在分隔条内部，此时原有的分隔条将裂变为S1和S2。同理当第二个和第三个页面块放入到池中的时候，四个分隔条S1，S2，S3和 S4被检测出来。

当第四个页面块放入到池中的时候，它跨越了S3分隔条，同时与S2分隔条有部分重合，此时S3分隔条将被删除，同时S2将被调整，从图中可以看出，调整后，S3明显的变细了。

4.2.2 设置分隔条的权重

分隔条通常用于区别不同语义的页面块，因此基于给定分隔条两边的语义块的在视觉上的差异，我们可以设置分隔条的权重。如果分隔条的权重越重，该分隔条最终成为分隔条的可能性就越大。

下面的规则可以用来设置分隔条的权重：

1) 分隔条两边的页面块的距离越远，该分隔条的权重就越高。

2) 如果某个分隔条是通过检测HTML标签获取的，比如<HR>，那么该分隔条的权重就越高。

3) 如果分隔条两侧的页面块的背景色是不相同的，那么该分隔条的权重将相应增高。

4) 对于水平分隔条而言，如果分隔条两侧的页面块的字体属性，比如字体大小，字体重量是不同的，那么该分隔条的权重将增加。而且如果分隔条上侧的页面块的字体小于分隔条下侧的页面块的字体，那么分隔条的权重将增加。

5) 对于水平分隔条而言，当分隔条两侧的页面块的结构非常相似，比如文本，那么该分隔条的权重将递减。

考虑图7中的第三个<TD>。与该结点对 应的子页面如图9(b)所示，同时它的DOM树结构如图9(a)所示。我们可以看到根据我们的定义，该DOM树中的很多结点都是无效的，它们无法在浏览器 中显示出来，在页面块的提取过程忠，这些结点将被忽略。当这些页面块提取出来之后，六个页面块将保存到池中，同时五个水平分隔条也被检测出来。同时，基于 上面的五个分隔条规则，这些分隔条的权重将被设置。在本例中，页面块2和3之间的分割条要比页面块1和页面块2之间的分割条权重高，这是因为字体不同的原 因。同样的原因，4和5之间的分隔条权重也高一些。最终的分隔条以及它们的权重如图9(c)所示。

4.2.3 内容结构构建

当分隔条被检测出来，同时权重设置完毕后，相应的内容重建过程就可以开始了。构建过程从最小权重的分隔条开始，该分隔条两侧的页面块将合并在一起组成一个新的页面块。该合并过程不停的进行迭代，直到遇到权重 最高的分隔条为止。对于每一个新的语义块，相应的DoC也被相应设置。

当页面块最终合并成为语义块之后，本轮的迭代也就结束了。对于这些语义块，每一个语义块的DoC都会与PdoC进行对比，如果DoC的值小于PdoC，那么新的迭代过程将重新开始：页面块检测，分隔条检测以及内容结构重构。当所有的语义块的DoC的值都不大于PdoC，迭代过程将停止。同时针对整个Web页面的内容结构将构建出来。

以图9为例，在第一轮迭代中，第一，三以及五个分隔条 将被选择出来，同时页面块1和2被合并为新的语义块VB2_2_2_1。同样的合并发生在页面块3和4上，它们被合并为新的语义块VB2_2_2_2，页 面块5和6最终合并为VB2_2_2_3。新的语义块VB2_2_2_1，VB2_2_2_2以及VB2_2_2_3是语义块VB2_2_2的子结点。对 于每一个页面结点，比如VB2_2_2_2_1_1，VB2_2_2_1_1以及VB2_2_2_2_1它们的DoC的值将被检查，以便确定是否满足 PdoC的值。最终的内容结构构建完毕。