网页变化监控方法及装置的制造方法
【技术领域】
[0001]本发明涉及移动互联网技术领域，更为具体地，涉及一种网页变化监控方法及装置。
【背景技术】
[0002]互联网以快速迭代著称，web应用会每周进行多次产品发布及运营内容更新，因此，企业对产品进行网页监控成为企业网页管理的重点之一。
[0003]目前，大多数企业对产品进行页面监控及对比的方法都是基于页面截图后的图片像素对比实现的，其误报率高，也不能针对网页上的随机内容区域进行排除，非常的不灵活。因此，对网页的历史修改做快照，并对两次历史快照间的差异进行对比，标记差异位置，成为企业对产品进行监控的迫切需求。
[0004]因此，如何能够准确地监控、对比同一网页的变化成为当前企业网页监控的主要问题。
【发明内容】
[0005]鉴于上述问题，本发明的目的是提供一种网页变化监控方法及装置，通过对网页在不同时刻的页面数据进行结构化记录和对比，从而找出网页在不同时刻的差异，同时，将找出的差异标记在网页的截图上，从而提高网页差异对比的准确性，更便于网页监控。
[0006]本发明提供的网页变化监控方法，包括:
[0007]分别记录同一网页在不同时刻加载后的页面数据，并对同一网页不同时刻加载后的页面进行截图保存；其中，将同一网页不同时刻加载后的页面数据记录为相应地特定数据结构；
[0008]通过对比不同时刻记录的特定数据结构，确定同一网页在不同时刻加载后的页面数据之间的差异；
[0009]将该差异分别标记在不同时刻的页面截图上。
[0010]本发明提供的网页变化监控装置，包括:
[0011]页面数据记录单元，用于分别记录同一网页在不同时刻加载后的页面数据；其中，将同一网页不同时刻加载后的页面数据记录为相应地特定数据结构；
[0012]页面截图单元，用于对同一网页不同时刻加载后的页面进行截图保存；
[0013]差异确定单元，用于对比不同时刻记录的特定数据结构，确定同一网页在不同时刻加载后的页面数据之间的差异；
[0014]差异标记单元，用于将该差异分别标记在不同时刻的页面截图上。
[0015]上述根据本发明提供的网页变化监控方法及装置，通过对同一网页不同时刻加载后的页面进行截图，以及将同一网页不同时刻加载后的页面数据记录为特定数据结构，并对任意两个时刻的特定数据结构进行对比，找出差异的部分，将差异的部分对应标记在两个时刻的截图上，能够准确地对比同一网页在不同时刻发生的变化，便于网页监控。
[0016]为了实现上述以及相关目的，本发明的一个或多个方面包括后面将详细说明并在权利要求中特别指出的特征。下面的说明以及附图详细说明了本发明的某些示例性方面。然而，这些方面指示的仅仅是可使用本发明的原理的各种方式中的一些方式。此外，本发明旨在包括所有这些方面以及它们的等同物。
【附图说明】
[0017]通过参考以下结合附图的说明及权利要求书的内容，并且随着对本发明的更全面理解，本发明的其它目的及结果将更加明白及易于理解。在附图中:
[0018]图1为根据本发明实施例的网页变化监控方法的流程示意图；
[0019]图2为根据本发明实施例的网页快照存储的流程示意图；
[0020]图3为根据本发明实施例的快照对比的流程示意图；
[0021]图4a?图4d分别为根据本发明实施例的差异展现结果图；
[0022]图5为根据本发明实施例的网页变化监控装置的逻辑结构图；
[0023]图6为根据本发明实施例的网页变化监控装置一个【具体实施方式】的逻辑结构图；
[0024]图7为根据本发明实施例的设备终端的逻辑结构图。
[0025]在所有附图中相同的标号指示相似或相应的特征或功能。
【具体实施方式】
[0026]在下面的描述中，出于说明的目的，为了提供对一个或多个实施例的全面理解，阐述了许多具体细节。然而，很明显，也可以在没有这些具体细节的情况下实现这些实施例。在其它例子中，为了便于描述一个或多个实施例，公知的结构和设备以方框图的形式示出。
[0027]对于同一网页的变化，现有的网页对比方法是基于页面截图后的图片像素对比实现的，其误报率高。针对此问题，本发明将网页的页面数据的数据结构记录为特定数据结构，通过对比特定数据结构之间的差异标记出哪些页面数据进行了修改，修改的页面数据即为网页变化的内容，可以降低网页对比的误报率。
[0028]其中，页面数据就是网页元素，也就是指组成网页内容的元素，网页元素包括，文字、图片、首频、动趣、视频、文字等等。
[0029]以下将结合附图对本发明的具体实施例进行详细描述。
[0030]图1示出了根据本发明实施例的网页变化监控方法的流程。
[0031]如图1所示，本发明实施例提供的网页变化监控方法，包括:
[0032]步骤SllO:分别记录同一网页在不同时刻加载后的页面数据，并对同一网页不同时刻加载后的页面进行截图保存；其中，将同一网页不同时刻加载后的页面数据记录为相应地特定数据结构。
[0033]其中，同一网页是指同一个URL的网页，页面数据就是指网页元素，网页元素的数据结构为DOM结构(Document Object Model,文件对象模型)，将同一网页不同时刻加载后的页面数据记录为相应地特定数据结构，也就是将网页元素的DOM结构记录为特定数据结构，而将网页元素的DOM结构记录为特定数据结构的流程与页面截图的流程不分先后顺序。
[0034]这里，记录网页的页面数据的时刻和进行页面截图的时刻是一一对应的时刻。例如，分别在第一时刻和第二时刻记录网页的页面数据，同时对该网页在第一时刻和第二时刻的网页分别进行截图保存。
[0035]另外，网页元素包括元素样式、元素属性信息、元素内容、元素标签及元素占位信肩、O
[0036]由于DOM结构的元素数据量大，在进行元素对比时计算量过于庞大，因此本发明将网页元素的DOM结构记录为特定数据结构，以便减少元素对比时的计算量，本发明实施例中的特定数据结构为JSON结构(Javascript Object Notat1n,轻量级的数据交换格式)，但也可以将网页元素的DOM结构记录成其它的特定数据结构。
[0037]由于JSON结构的元素无法存储在硬盘中，因此需要将JSON结构的元素序列化为硬盘能够存储的格式，存储在硬盘中，本发明实施例将网页元素的DOM结构记录为JSON结构并序列化存储的过程称为网页快照存储，存储在硬盘中的元素为快照数据，其内容包括元素样式的哈希值、元素属性信息、元素内容、元素标签及元素占位信息。
[0038]步骤S120:通过对比不同时刻记录的特定数据结构，确定同一网页在不同时刻加载后的页面数据之间的差异。
[0039]对比不同时刻记录的特定数据结构，就是寻找不同时刻的JSON结构的网页元素之间不相同的部分，也就是对比不同时刻的快照数据，从而确定出同一网页在不同时刻加载后的页面数据之间的差异。
[0040]由于存储在硬盘中的快照数据无法进行对比，所以在对比不同时刻的快照数据间的差异之前，需要将不同时刻的快照数据反序列化为特定数据结构，本发明实施例将对比不同时刻的快照数据的过程称为快照对比。
[0041]不同时刻快照数据间的差异包括新增元素、删除元素、样式修改和文本内容改变，上述四种变化表示不同时刻中同一个网页的元素间差异，分别为:
[0042]新增元素表示同一个网页在不同时刻相比增加了一个元素；
[0043]删除元素表示同一个网页不同时刻相比删除了一个元素；
[0044]样式修改表示同一个网页在不同时刻相比没有增加或删除元素，而是元素样式发生了改变；
[0045]文本内容改变表示同一个网页在不同时刻中只有元素的文本内容发生了改变。
[0046]步骤S130:将该差异分别标记在不同时刻的页面截图上。
[0047]将不同时刻记录的网页数据结构对比之后，可以得出该网页在不同时刻的差异。所述页面截图用于直观地展示所述差异。具体地，可以在所述页面截图上标注出差异的类型和所述差异在页面上发生的位置。
[0048]为了便于对比不同时刻的页面截图，将不同时刻的页面截图拼接在一起,再将不同时刻的页面数据间的差异标记在拼接在一起的页面截图上，也就是将不同时刻同一网页中元素之间不相同的部分标记在拼接在一起的页面截图上，标记的方式多种多样，具体地，按照差异的类型用不同颜色标记在拼接在一