WO2016078479A1

WO2016078479A1 - Method and device for monitoring web page changes

Info

Publication number: WO2016078479A1
Application number: PCT/CN2015/090969
Authority: WO
Inventors: 梁捷; 张云龙; 钟国英; 刘洋
Original assignee: 广州市动景计算机科技有限公司
Priority date: 2014-11-17
Filing date: 2015-09-28
Publication date: 2016-05-26
Also published as: CN105630843A; CN105630843B

Abstract

A method and a device for monitoring web page changes is provided; the method comprises: separately recording loaded page data for a same web page at different times, and taking screen captures of and saving loaded pages from said same web page at different times; recording as specific data structures the data structures of the loaded page data for said same web page at different times; by comparing the specific data structures recorded at different times, determining differences between loaded page data for said same web page at different times; marking each of said differences on the page screen captures from different times. Use of the method and device for monitoring web page changes allows for the accurate monitoring and comparison of changes that have occurred to a same web page at different times.

Description

Webpage change monitoring method and device

The present application claims priority to Chinese Patent Application No. 2014-10652444.3, filed on Jan.

Technical field

The present invention relates to the field of mobile internet technologies, and in particular, to a webpage change monitoring method and apparatus.

Background technique

The Internet is known for its rapid iterations. Web applications perform product releases and operational content updates several times a week. Therefore, enterprise web monitoring of products has become one of the focuses of corporate web management.

At present, most companies' methods of page monitoring and comparison of products are based on the comparison of image pixels after screenshots, and the false positive rate is high. Therefore, taking snapshots of historical changes of web pages and comparing the differences between the two historical snapshots, marking the difference locations, has become an urgent need for enterprises to monitor products.

Therefore, how to accurately monitor and compare the changes of the same web page has become the main problem of current corporate webpage monitoring.

Summary of the invention

In view of the above problems, an object of the present invention is to provide a webpage change monitoring method and apparatus, which can find out the difference of webpages at different moments by structurally recording and comparing webpage data at different times, and at the same time, will find out The difference is marked on the screenshot of the webpage, which improves the accuracy of the webpage difference comparison and makes it easier to monitor the webpage.

The webpage change monitoring method provided by the invention includes:

Recording the page data of the same webpage after being loaded at different times, and saving the screenshots of the same webpage at different times; wherein the page data loaded at different times of the same webpage is recorded as a corresponding specific data structure;

By comparing the specific data structures recorded at different times, the difference between the page data loaded by the same webpage at different times is determined;

The differences are marked separately on page screenshots at different times.

Optionally, the process of recording page data loaded at different times on the same webpage into corresponding specific data structures includes:

Accessing the specified DOM node and its child nodes in the loaded page at different times, recording the element label, element place information, element style, element attribute, and attribute value of the elements in each node, and splicing the element style into characters String and hash the string;

The element label, the element place information, the element attribute and the attribute value, and the hash value of the element are serialized and stored as a specific data structure.

Optionally, the designated node is a DOM node in the page or a DOM node that filters all the DOM nodes.

Optionally, by comparing the specific data structures recorded at different moments, determining differences between page data after loading the same webpage at different times includes:

The LCS algorithm compares the specific data structures recorded at different times to determine the difference between the page data loaded by the same web page at different times.

Optionally, the step of marking the difference respectively on the screenshot of the page at different moments comprises:

The difference is marked on a screenshot of the page at different times based on the type of difference and the location of the difference on the page.

The webpage change monitoring device provided by the invention includes:

a page data recording unit, configured to separately record page data loaded by the same webpage at different times; wherein the page data loaded at different times of the same webpage is recorded as a corresponding specific data structure;

The page screenshot unit is configured to save a screenshot of a page loaded at different times on the same webpage;

a difference determining unit, configured to compare a specific data structure recorded at different moments, and determine a difference between page data after loading the same webpage at different times;

A difference marking unit for marking the differences on page screenshots at different times.

Optionally, the page data recording unit includes:

a DOM node access module, configured to access a specified DOM node and its child nodes in the page loaded at different times;

An element information recording module, configured to record element style, element attribute information, element content, element place information, and element label in the specified DOM node;

An element style splicing module for splicing an element style into a string and seeking a hash value for the string;

The element information storage module is configured to serialize the element label, the element place information, the element attribute and the attribute value of the element, and the hash value, and store the data as a specific data structure.

Optionally, the designated node accessed by the DOM node access module is all DOM nodes in the page or a DOM node that filters all the DOM nodes.

Optionally, the difference determining unit determines, according to the specific data structure recorded at different times according to the LCS algorithm, the difference between the page data loaded by the same webpage at different times.

Optionally, the difference marking unit marks the difference on a page screenshot of different moments according to the type of the difference and the position of the difference on the page.

The present invention provides a computer readable medium having program code executable by a processor, the program code causing a processor to perform the following steps:

The differences are marked separately on page screenshots at different times.

The method and device for monitoring webpage change according to the present invention, by taking a screenshot of a page loaded at different times on the same webpage, and recording the page data loaded at different times of the same webpage as a specific data structure, and for any two moments The specific data structure is compared, and the difference is found. The difference is marked on the screenshot of the two moments, which can accurately compare the changes of the same webpage at different times, which is convenient for webpage monitoring.

In order to achieve the above and related ends, one or more aspects of the present invention include the features which are described in detail below and particularly pointed out in the claims. The following description and the annexed drawings set forth in detail However, these aspects are indicative of only some of the various ways in which the principles of the invention may be employed. Furthermore, the invention is intended to cover all such aspects and their equivalents.

DRAWINGS

In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings used in the embodiments or the description of the prior art will be briefly described below, and it will be apparent to those skilled in the art that In other words, other drawings can be obtained based on these drawings without paying for creative labor.

FIG. 1 is a schematic flowchart of a webpage change monitoring method according to an embodiment of the present invention; FIG.

2 is a schematic flowchart of a webpage snapshot storage according to an embodiment of the present invention;

3 is a schematic flow chart of snapshot comparison according to an embodiment of the present invention;

4a to 4d are diagrams showing a difference presentation result according to an embodiment of the present invention;

FIG. 5 is a logical structural diagram of a webpage change monitoring apparatus according to an embodiment of the present invention; FIG.

FIG. 6 is a logical structural diagram of a specific embodiment of a webpage change monitoring apparatus according to an embodiment of the present invention; FIG.

FIG. 7 is a logical structural diagram of a device terminal according to an embodiment of the present invention.

The same reference numerals are used throughout the drawings to refer to the

detailed description

Various aspects of the disclosure are described below. It should be understood that the teachings herein may be embodied in a variety of forms and that any specific structure, function, or both disclosed herein are merely representative. Based on the teachings herein, one of ordinary skill in the art will appreciate that one aspect disclosed herein can be implemented independently of any other aspects, and two or more of these aspects can be combined in various ways. For example, an apparatus or a method of practice can be implemented using any number of the aspects set forth herein. In addition, such an apparatus may be implemented or practiced using other structures, functions, or structures and functions in addition to or in one or more aspects than those set forth herein. Furthermore, any aspect described herein can include at least one element of the claims.

For the change of the same webpage, the existing webpage comparison method is implemented based on the pixel comparison of the image after the screenshot, and the false positive rate is high. To solve this problem, the present invention records the data structure of the page data of the webpage as a specific data structure, and marks which page data is modified by comparing the differences between the specific data structures, and the modified page data is the content of the webpage change, Reduce the false positive rate of web page comparisons.

Wherein, the page data is a webpage element, that is, an element constituting the content of the webpage, and the webpage element includes Text, images, audio, animation, video, text, and more.

Specific embodiments of the present invention will be described in detail below with reference to the drawings.

FIG. 1 shows a flow of a webpage change monitoring method according to an embodiment of the present invention.

As shown in FIG. 1 , a webpage change monitoring method provided by an embodiment of the present invention includes:

Step S110: Record page data loaded by the same webpage at different times, and save the screenshots of the same webpage at different times; wherein the page data loaded at different times of the same webpage is recorded as a corresponding specific data structure.

The same webpage refers to a webpage with the same URL, and the page data refers to a webpage element. The data structure of the webpage element is a DOM structure (Document Object Model), and the page data loaded at different times of the same webpage is recorded as corresponding. The specific data structure, that is, the DOM structure of the web page element is recorded as a specific data structure, and the process of recording the DOM structure of the web page element into a specific data structure is in no particular order.

Here, the time at which the page data of the web page is recorded and the time at which the page is taken are one-to-one correspondence. For example, the page data of the webpage is recorded at the first moment and the second moment, respectively, and the webpages of the webpage at the first moment and the second moment are respectively saved as screenshots.

In addition, web page elements include element styles, element attribute information, element content, element labels, and element placeholder information.

Since the amount of element data of the DOM structure is large, the calculation amount is too large when the element comparison is performed. Therefore, the present invention records the DOM structure of the web page element as a specific data structure, so as to reduce the amount of calculation when the elements are compared, which is specific in the embodiment of the present invention. The data structure is a JSON structure (Javascript Object Notation, a lightweight data exchange format), but the DOM structure of a web page element can also be recorded as other specific data structures.

Since the elements of the JSON structure cannot be stored in the hard disk, the elements of the JSON structure need to be serialized into a format that can be stored by the hard disk and stored in the hard disk. In the embodiment of the present invention, the DOM structure of the webpage element is recorded as a JSON structure and serialized storage. The process is called web page snapshot storage, and the elements stored in the hard disk are snapshot data, and the content includes element type hash value, element attribute information, element content, element label, and element placeholder information.

Step S120: Determine the difference between the page data after the same webpage is loaded at different times by comparing the specific data structures recorded at different moments.

Comparing the specific data structures recorded at different moments, is to find the different parts of the JSON structure of the webpage elements at different times, that is, to compare the snapshot data at different moments, thereby determining the page data between the same webpage loaded at different times. The difference.

The snapshot data stored in the hard disk cannot be compared. Therefore, before the difference between the snapshot data at different times is compared, the snapshot data at different times needs to be deserialized into a specific data structure. The process of data is called snapshot comparison.

Differences between snapshot data at different times include new elements, deleted elements, style modifications, and text content changes. The above four changes represent the differences between elements of the same web page at different times, respectively:

The new element indicates that the same web page has an element added at different times;

Deleting an element means that an element is deleted at a different time than the same page;

Style modification means that the same web page does not add or delete elements at different times, but the element style has changed;

Text content changes indicate that only the text content of an element has changed in the same web page at different times.

Step S130: Mark the difference on the screenshot of the page at different times.

After comparing the data structures of the web pages recorded at different times, the difference of the web pages at different times can be obtained. The page screenshots are used to visually show the differences. Specifically, the type of the difference and the position at which the difference occurs on the page can be noted on the screenshot of the page.

In order to compare the screenshots of the pages at different times, the screenshots of the pages at different moments are stitched together, and the differences between the page data at different moments are marked on the screen shots of the stitched together, that is, between the elements in the same webpage at different times. The different part marks are marked on the spliced page screenshots. In particular, in one of the mark methods, the different types of marks are used to mark the spliced page shots according to the type of difference. The location of the tag is the location where the difference corresponds to the page screenshot. For example, the page at the second moment adds a webpage element compared to the page at the first moment, and the marked image is marked with a colored mark on the corresponding screenshot of the second moment. Alternatively, mark the difference on the screenshot by a marker box (such as a dashed box).

Marking the difference on the page screenshot is to show the difference content on the page screenshot, and the embodiment of the present invention is called the difference presentation.

The above steps are data processing steps taken to implement the webpage change monitoring method provided by the embodiment of the present invention. The main details of the implementation of the present invention are element information snapshot storage, snapshot comparison and difference presentation. These three aspects are respectively described in detail below.

First, the web page snapshot storage

FIG. 2 is a flowchart of a webpage snapshot storage according to an embodiment of the present invention. As shown in FIG. 2, the flow of webpage snapshot storage provided by the embodiment of the present invention includes the following steps:

Step S210: Access the webpage by using a command line browser.

The phantomjs browser is preferably used in the embodiment of the present invention. The present invention uses a command line browser to browse a web page and injects a script to control the command line browser to access the web page. , but other command line browsers are also available.

Step S220: Inject a script into the command line browser.

After the page is loaded, inject a script into the command line browser to manipulate the elements in the web page.

Step S230: Access the specified DOM node, and record element attribute information, element style, element label, element content, and element placeholder information. The accessing the specified DOM node generally refers to accessing the specified DOM node in the webpage page loaded at different moments.

The element attribute information includes an element attribute, an element attribute value (the element's html attribute, such as id, class, etc.) and an element attribute name;

Element styles include background color, borders, projections, etc.

The element placeholder information includes the X coordinate, the Y coordinate, the width, and the height of the element;

The element tag is the html tag name, such as body, div, h1, h2, etc.

The element content is a collection of child elements.

The specified DOM node is all DOM nodes in the page or DOM nodes that are filtered by all DOM nodes. Since the elements of the DOM node will eventually be presented on the page, the content on the page may be filtered by filtering. The DOM node is implemented by the script control command line browser to specify which DOM nodes are accessed. The DOM node accessed by the command line browser is the designated DOM node, and the DOM node not accessed by the command line browser is the filtered DOM node. By filtering the DOM nodes that do not need to be accessed, the random content areas on the webpage can be excluded, and the flexibility of webpage change monitoring can be improved. Moreover, after filtering out the DOM node that does not need to be accessed, the storage capacity of the webpage snapshot storage can be reduced, and the amount of data targeted by the snapshot comparison and the difference presentation can be reduced, and the efficiency of webpage change monitoring can be improved.

Step S240: splicing the element patterns into a string, and obtaining a hash value for the string according to the MD5 algorithm.

Since the page has a large number of elements, if the information of each element is completely recorded and the storage amount is too large, the present invention splicing the element patterns in the element information into a string when storing the element information, and then using the md5 algorithm (ie, : message digest algorithm) to get summary information (that is, to find a hash value) for this string, to get a 32-byte string, the string can be stored in the JSON structure, which can save storage space, if the element information A change has occurred, which inevitably causes the string to change, and the markup element style has changed during the comparison.

Step S250: Serializing the element label, the element placeholder information, the element attribute and the attribute value, and the hash value of the element into a specific data structure, and the specific data structure is usually a JSON structure. That is, the element information is stored as a JSON structure.

Step S260: determining whether the element has a child element; if yes, executing step S230; if not, executing step S270.

If the element has a child element, the DOM node of the child element is accessed, the element attribute information, the element style, the element label, and the element placeholder information are recorded, and the element style is spliced into a string, and the string information is summarized according to the MD5 algorithm. Get the hash value of the string, and then serialize the element attribute information, hash value, element label, and element placeholder information into a JSON structure.

Through steps S230 to S260, the specified DOM node and its child nodes in the page loaded at different times can be accessed, and the element label, element place information, element style, element attribute, and attribute value of the elements in each node are recorded. Splicing the element pattern into a string and hashing the string, and serializing the element label, element place information, element attribute and attribute value, and the hash value of the element, and storing the hash value For a specific data structure.

Step S270: storing the data of the specific data structure into the file system, and if the specific data structure is a JSON structure, storing the data of the JSON data into the file system.

After all the nodes are traversed, the element information of the obtained JSON structure is stored in the file system, and the element information in the file system is a JSON structure.

In addition, the file system refers to the file system of the user's operating system.

The screenshot of the page can be implemented in various ways, and the present invention will not be described in detail.

The above steps S210-S260 are steps taken to implement the data processing of the webpage snapshot storage, and can be performed on the network. The page element performs snapshot storage to implement the function of monitoring and comparing the historical changes of the same webpage, and also realizing the function of shielding the specified content on the webpage. By blocking the specified content on the webpage, the random content area on the webpage can be excluded, and the flexibility of webpage change monitoring can be improved. Moreover, after the specified content on the webpage is blocked, the storage amount of the webpage snapshot storage can be reduced, and the amount of data for the snapshot comparison and the difference presentation is reduced, and the efficiency of the webpage change monitoring is improved.

Second, the snapshot comparison

After the webpage snapshot is stored, when the webpage content is changed, the content of the webpage at different times needs to be compared, that is, the webpage snapshot is compared. FIG. 3 shows a flow of snapshot comparison according to an embodiment of the present invention, as shown in FIG. The flow of snapshot comparison provided by the embodiment of the present invention includes the following steps:

S310: Input two historical time points, and read two sets of snapshot data according to two historical time points.

The following takes the time t1 and the time t2 as the historical time points, and compares the difference between the snapshot data at time t1 and the snapshot data at time t2, wherein the time t1 is far from the current time, and the time t2 is closer according to the current time.

Reading the snapshot data is the element information of the JSON structure. Since the element information of the JSON structure is serialized and stored as snapshot data, before reading the string of the JSON structure, the snapshot data needs to be deserialized to obtain the element information of the JSON structure. , then read the operation.

S320: Determine whether the two element styles are consistent. If they are consistent, perform step S340; if not, perform step S330.

First, determine whether the element styles in the element information are the same, that is, the obtained 32-byte string. If the strings of the two JSON structures are the same, the element style is not modified. If the strings of the two JSON structures are different, the description elements are The style has been modified.

Step S330: Record element style modification difference.

S340: Determine whether the two elements have child elements, if yes, execute step S350; if not, execute step S370.

S350: Using the LCS algorithm to find the longest common subsequence of the element label and the element attribute in the child elements of the two elements.

The LCS algorithm is the Longest Common Subsequence, which is a prior art and will not be described in detail.

The longest common subsequence of element labels and element attributes in the child elements of two elements is the time t1 and At t2, the set of unaltered child elements shared by the two snapshot data, that is, the unaltered part in the screenshot of the page at time t1 and time t2.

The longest common subsequence that computes the element label and element attributes in the two child elements is to determine whether the page has deleted some elements or added some elements or modified the elements.

Step S360: Mark the difference content of the two sub-elements according to the longest common sub-sequence in which the element label and the element attribute of the two sub-elements are consistent.

If the child element in the longest common subsequence is a text sub-element, it is judged whether the text content has changed. If there is a change, the text content is changed. If there is no change, the text content has not changed; if the longest common sub- If the child element in the sequence is another child element, the child element of the subsequence of the non-common subsequence in the snapshot data at time t1 is marked as a delete element, and the child element of the subsequence of the non-common subsequence in the snapshot data at time t2 is recorded. Mark as a new element.

Element modifications include modification of element content and modification of element styles, which are strings in text child elements.

A web page change is divided into three categories, each of which corresponds to a situation, that is, if the visual content of a web page changes, it must be in these three situations:

1. Some elements are deleted, corresponding to deleting elements;

2. Some new elements have been added, corresponding to new elements;

3. Some of the elements that have not been deleted or added have changed: changes in the content of the element or changes in the style of the element.

Among the three categories, element additions, deletions, and element modifications (including modifications to content and styles, which may occur simultaneously, but no fixed order) are mutually exclusive categories, that is, if an element is new, Then it must not be deleted or modified; if it is a deleted element, it must not be added or modified, the deleted element is marked in the screenshot of the page at time t1, and the newly added element is marked in the screenshot of the page at time t2. The modified element is marked in the screenshot of the page at time t2.

Step S370: Output a set of elements of all differences.

Returns a collection of all modified elements. Through the above steps, the LCS algorithm can compare the specific data structures recorded at different times to determine the difference between the page data loaded by the same webpage at different times.

Third, the difference shows

The difference between the structure, the style, and the content at the historical time point of the webpage can be obtained by the above-mentioned web page snapshot storage and snapshot comparison stage. In order to reflect the difference, the page screenshot of the difference is marked at different times according to the type of the difference and the position of the difference on the page. on. Since the stored webpage snapshot data records the place information (coordinates, width and height) of all the elements, and records the screenshot of the page at that time, it is possible to stitch the screenshots of the two time points and change the three differences of the webpage (new Marking elements, deleting elements, and modifying elements are marked on the stitched screenshot. Specifically, the three differences can be marked on the screenshot by different colors, or three differences can be marked on the screenshot by other means. For example, mark the difference on the screenshot by a marker box (such as a dashed box).

4a-4d show the result of the difference presentation according to the embodiment of the present invention, the left side of the figure is equivalent to the screenshot of the page at time t1, and the right side is the screenshot of the page corresponding to the time t2; as shown in FIG. 4a For the difference between the new elements of the webpage, the new elements in the webpage are marked with a dashed box on the right side. The new element is “i am new here”; as shown in Figure 4b, the difference of the elements is deleted for the webpage. The result is displayed. The left side of the figure marks the deleted element of the webpage with a dotted frame, and the deleted element is “Hello”; as shown in FIG. 4c, the result of the difference of the element style is modified for the webpage, and the webpage is marked with a dotted frame on the right side of the figure. The modified element style has modified the hello world style, including tilting the font and adding an underscore; as shown in Figure 4d, the difference between the element texts is modified for the web page, and the right side of the figure is marked with the dotted box to mark the modified element text of the web page. Originally known as "Baidu" and "Sina", it was changed to "100-degree" and "new-wave".

The foregoing describes in detail the webpage change monitoring method provided by the embodiment of the present invention. When the webpage snapshot is stored at different moments, a page screenshot image file (png or jpeg) and a JSON file (data structure of the record element information) are obtained. ), save these two files to the computer hard disk, compare the saved JSON files at different times when comparing snapshots, and mark them on two screenshots if there are differences.

Corresponding to the webpage change monitoring method described above, the present invention provides a webpage change monitoring apparatus. FIG. 5 shows a logical structure of a webpage change monitoring apparatus according to an embodiment of the present invention.

As shown in FIG. 5, the webpage change monitoring apparatus 500 provided by the embodiment of the present invention includes a page screenshot unit 510, a page data recording unit 520, a difference determining unit 530, and a difference marking unit 540.

The page screenshot unit 510 is configured to save a screenshot of a page loaded at different times on the same webpage.

The page data recording unit 520 is configured to separately record page data loaded by the same web page at different times; wherein the page data loaded at different times of the same web page is recorded as a corresponding specific data structure.

The difference determining unit 530 is configured to compare the specific data structures recorded at different time points, and determine the difference between the page data after the same web page is loaded at different times.

The difference marking unit 540 is used to mark the difference on the screenshot of the page at different times.

FIG. 6 shows a logical structure of a specific embodiment of a webpage change monitoring apparatus according to an embodiment of the present invention. As shown in FIG. 6, the page data recording unit 520 includes a DOM node access module 521, an element information recording module 522, an element style splicing module 523, and an element information storage module 524.

The DOM node accessing module 521 is configured to access the specified DOM node and its child nodes in the webpage loaded at different moments; the element information recording module 522 is configured to record the element style, the element attribute information, the element content, and the element occupying in the DOM node. Bit information and element label; element style splicing module 523 is used to splicing the recorded element style into a string, and hashing the string; element information storage module 524 is used to set element label, element place information, element Attributes and attribute values and hash values are serialized and stored as a specific data structure. Wherein, the specific data structure usually adopts a JSON structure.

In addition, the designated node accessed by the DOM node access module is all DOM nodes in the page or DOM nodes that are filtered by all DOM nodes.

In addition, the difference determining unit 530 determines the difference between the page data after the same web page is loaded at different times according to the LCS algorithm comparing the specific data structures recorded at different times.

Moreover, the difference marking unit 540 marks the difference on the page screenshot at different times according to the type of the difference and the position of the difference on the page.

The present invention further provides a device terminal. Referring to FIG. 7, the device terminal 700 includes a file system 710 and a webpage change monitoring device 500 for storing page screenshots and snapshot data. The webpage change monitoring device includes:

A difference tag unit for marking the difference on a screenshot of the page at different times.

The webpage change monitoring device has the structure described in FIG. 6, and the details are not described herein.

Corresponding to the web page change monitoring method described above, the present invention provides a computer readable medium having program code executable by a processor, the program code causing the processor to perform the following steps:

The differences are marked separately on page screenshots at different times.

The above content describes in detail the webpage change monitoring method and apparatus provided by the present invention, by taking screenshots of webpage content at different time points, and recording element information of webpages at different time points into a specific data structure, which is different time of the same webpage. The snapshot data on the point is recorded, and the snapshot data at any two time points is compared to find the difference, and the difference between the two snapshot data is marked on the screenshot of the two time points, which can accurately monitor Compare the changes on the same page.

Furthermore, the method according to the invention can also be implemented as a computer program executed by a processor (such as a CPU) in the terminal and stored in the memory of the terminal. The above-described functions defined in the method of the present invention are performed when the computer program is executed by the processor.

Furthermore, the method steps and system units described above may also be implemented with a controller and a computer readable storage device for storing a computer program that causes the controller to implement the steps or unit functions described above.

The various illustrative logical blocks, modules, circuits, and algorithm steps described in connection with the disclosure herein may be implemented as electronic hardware, computer software, or combinations of both. To clearly illustrate this interchangeability of hardware and software, various illustrative components, blocks, modules, circuits, and steps have been described. Whether such functionality is implemented as software or as hardware depends on the particular application and design constraints imposed on the overall system. A person skilled in the art can implement the described functions in various ways for each specific application, but such implementation decisions should not be construed as causing a departure from the scope of the invention.

While the foregoing disclosure shows exemplary embodiments of the present invention, it should be understood that various changes and modifications may be made without departing from the scope of the invention. The functions, steps and/or actions of the method claims according to the embodiments of the invention described herein are not required to be performed in any particular order. In addition, although elements of the invention may be described or claimed in the form of an individual, many are contemplated, unless explicitly limited to the singular.

Although described in accordance with various embodiments of the present invention as described above with reference to the drawings, the present technology It should be understood that various modifications may be made to the various embodiments of the present invention described above without departing from the scope of the invention. Therefore, the scope of the invention should be determined by the content of the appended claims.

Claims

A webpage change monitoring method, comprising:

Recording the page data of the same webpage after being loaded at different times, and saving the screenshots of the same webpage at different times; wherein the page data loaded at different times of the same webpage is recorded as a corresponding specific data structure;

By comparing the specific data structures recorded at different times, the difference between the page data loaded by the same webpage at different times is determined;

The differences are marked separately on page screenshots at different times.
The method for monitoring webpage change according to claim 1, wherein the process of recording page data loaded at different times of the same webpage into corresponding specific data structures comprises:

Accessing the specified DOM node and its child nodes in the loaded page at different times, recording the element label, element place information, element style, element attribute, and attribute value of the elements in each node, and splicing the element style into characters String and hash the string;

The element label, the element place information, the element attribute and the attribute value, and the hash value of the element are serialized and stored as a specific data structure.
The webpage change monitoring method according to claim 2, wherein the designated node is all DOM nodes in the page or a DOM node that filters all DOM nodes.
The webpage change monitoring method according to claim 1, wherein the comparing the difference between the page data after loading the same webpage at different times by comparing the specific data structures recorded at different moments comprises:

The LCS algorithm compares the specific data structures recorded at different times to determine the difference between the page data loaded by the same web page at different times.
The webpage change monitoring method according to claim 1, wherein the step of marking the difference respectively on the screenshot of the page at different times comprises:

Marking the difference in different according to the type of the difference and the position of the difference on the page The screenshot of the moment is on the page.
A webpage change monitoring device, comprising:

a page data recording unit, configured to separately record page data loaded by the same webpage at different times; wherein the page data loaded at different times of the same webpage is recorded as a corresponding specific data structure;

The page screenshot unit is configured to save a screenshot of a page loaded at different times on the same webpage;

a difference determining unit, configured to compare a specific data structure recorded at different moments, and determine a difference between page data after loading the same webpage at different times;

A difference marking unit for marking the differences on page screenshots at different times.
A web page change monitoring device according to claim 6, wherein:

The page data recording unit includes:

a DOM node access module, configured to access a specified DOM node and its child nodes in the page loaded at different times;

An element information recording module, configured to record element style, element attribute information, element content, element place information, and element label in the specified DOM node;

An element style splicing module for splicing an element style into a string and seeking a hash value for the string;

The element information storage module is configured to serialize the element label, the element place information, the element attribute and the attribute value of the element, and the hash value, and store the data as a specific data structure.
The webpage change monitoring apparatus according to claim 7, wherein the designated node accessed by the DOM node access module is all DOM nodes in the page or a DOM node that performs filtering processing on all DOM nodes. .
The webpage change monitoring apparatus according to claim 6, wherein the difference determining unit determines a difference between page data loaded by the same webpage at different times according to a specific data structure recorded at different times according to the LCS algorithm.
The webpage change monitoring apparatus according to claim 6, wherein the difference marking unit marks the difference on a page screenshot at different times according to the type of the difference and the position of the difference on the page.
A computer readable medium having processor-executable program code, the program code causing a processor to perform the steps of:

Recording the page data of the same webpage after being loaded at different times, and saving the screenshots of the same webpage at different times; wherein the page data loaded at different times of the same webpage is recorded as a corresponding specific data structure;

By comparing the specific data structures recorded at different times, the difference between the page data loaded by the same webpage at different times is determined;

The differences are marked separately on page screenshots at different times.