起的頁面截圖上。標記的位置為差異在頁面截圖上對應(yīng)發(fā)生的位置。例如，第二時刻的頁面與第一時刻的頁面相比，增加了一個網(wǎng)頁元素，則在第二時刻對應(yīng)的頁面截圖上用帶顏色的標記在增加元素的位置進行標記。
[0049]在頁面截圖上標記差異也就是在頁面截圖上展現(xiàn)差異內(nèi)容，本發(fā)明實施例稱為差異展現(xiàn)。
[0050]上述步驟為實現(xiàn)本發(fā)明實施例提供的網(wǎng)頁變化監(jiān)控方法所采取的數(shù)據(jù)處理步驟，其中，本發(fā)明實施的主要細節(jié)在于元素信息快照存儲、快照對比及差異展現(xiàn)，下面分別對這三個方面進行詳細地說明。
[0051]一、網(wǎng)頁快照存儲
[0052]圖2示出了根據(jù)本發(fā)明實施例的網(wǎng)頁快照存儲的流程，如圖2所示，本發(fā)明實施例提供的網(wǎng)頁快照存儲的流程包括以下步驟:
[0053]步驟S210:使用命令行瀏覽器訪問網(wǎng)頁。
[0054]由于需要在訪問網(wǎng)頁的同時操作網(wǎng)頁中的元素，因此，本發(fā)明使用命令行瀏覽器瀏覽網(wǎng)頁，通過向命令行瀏覽器注入腳本控制命令行瀏覽器訪問網(wǎng)頁，本發(fā)明實施例優(yōu)選采用phantomjs瀏覽器，但也可以采用其它命令行瀏覽器。
[0055]步驟S220:向命令行瀏覽器注入腳本。
[0056]在網(wǎng)頁加載完成后，向命令行瀏覽器注入腳本，用于操作網(wǎng)頁中的元素。
[0057]步驟S230:訪問指定的DOM節(jié)點，記錄元素屬性信息、元素樣式、元素標簽、元素內(nèi)容及元素占位信息。
[0058]元素屬性信息包括元素屬性、元素屬性值(元素的html屬性，比如icUclass等)和元素屬性名；
[0059]元素樣式包括背景色、邊框、投影等等；
[0060]元素占位信息包括元素的X坐標、Y坐標、寬度和高度；
[0061]元素標簽為html標簽名稱，比如body、div、h1、h2等；
[0062]元素內(nèi)容即子元素的集合。
[0063]指定節(jié)點是頁面中所有的DOM節(jié)點或者是對所有的DOM節(jié)點進行過濾處理后的DOM節(jié)點，由于DOM節(jié)點的元素最終會呈現(xiàn)在頁面上，因此，想屏蔽頁面上的內(nèi)容可以通過過濾該DOM節(jié)點實現(xiàn)，由腳本控制命令行瀏覽器指定訪問哪些DOM節(jié)點，命令行瀏覽器訪問的DOM節(jié)點為指定的DOM節(jié)點，而命令行瀏覽器未訪問的DOM節(jié)點為過濾掉的DOM節(jié)點。
[0064]步驟S240:將元素樣式拼接成一個字符串，根據(jù)MD5算法對該字符串求哈希值。
[0065]由于頁面有大量的元素，如果把每個元素信息完整記錄下來存儲量太大，所以本發(fā)明在存儲元素信息的時候，把元素信息中的元素樣式拼接成一個字符串，然后用md5算法(即:消息摘要算法)對這個字符串求摘要信息(也就是求哈希值)，得到一個32字節(jié)的字符串，該字符串就能夠存儲在JSON結(jié)構(gòu)中，這樣可以節(jié)省存儲空間，如果元素信息發(fā)生了變化，那么必然會導致該字符串發(fā)生改變，就可以在對比的過程中標記元素樣式發(fā)生了改變。
[0066]步驟S250:將所述元素的標簽、占位信息、屬性及屬性值以及所述哈希值進行序列化后存儲為JSON結(jié)構(gòu)。
[0067]就是將元素信息存在為JSON結(jié)構(gòu)。
[0068]步驟S260:判斷元素是否有子元素；如果有，執(zhí)行步驟S230 ;如果沒有，執(zhí)行步驟S270。
[0069]如果元素有子元素，則訪問子元素的DOM節(jié)點，記錄元素屬性信息、元素樣式、元素標簽及元素占位信息，將元素樣式拼接成一個字符串，根據(jù)MD5算法對該字符串求摘要信息，再將元素屬性信息、哈希值、元素標簽及元素占位信息序列化存儲為JSON結(jié)構(gòu)。
[0070]步驟S270:將JSON數(shù)據(jù)的數(shù)據(jù)存儲到文件系統(tǒng)中。
[0071]在完成所有節(jié)點遍歷后，將獲取的JSON結(jié)構(gòu)的元素信息存儲到文件系統(tǒng)中，文件系統(tǒng)中的元素信息為JSON結(jié)構(gòu)。
[0072]另外，文件系統(tǒng)指的是用戶操作系統(tǒng)的文件系統(tǒng)。
[0073]頁面截圖可以通過多種方式實現(xiàn)，本發(fā)明不做詳細說明。
[0074]上述步驟S210?S260為實施網(wǎng)頁快照存儲的所采取的數(shù)據(jù)處理步驟，能夠?qū)W(wǎng)頁元素進行快照存儲，實現(xiàn)監(jiān)控、對比同一網(wǎng)頁的歷史變化的功能，還可以實現(xiàn)屏蔽網(wǎng)頁上指定內(nèi)容的功能。
[0075]二、快照對比
[0076]網(wǎng)頁快照存儲后，在網(wǎng)頁內(nèi)容發(fā)生變化時，需要對網(wǎng)頁不同時刻的內(nèi)容進行對比，也就是對比網(wǎng)頁快照，圖3示出了根據(jù)本發(fā)明實施例的快照對比的流程，如圖3所示，本發(fā)明實施例提供的快照對比的流程包括以下步驟:
[0077]S310:輸入兩個歷史時間點，根據(jù)兩個歷史時間點讀取兩組快照數(shù)據(jù)。
[0078]以下將以tl時刻和t2時刻作為歷史時間點，對比tl時刻的快照數(shù)據(jù)與t2時刻的快照數(shù)據(jù)之間的差異內(nèi)容，其中，tl時刻據(jù)當前時間較遠，t2時刻據(jù)當前時間較近。
[0079]讀取快照數(shù)據(jù)就是JSON結(jié)構(gòu)的元素信息，由于JSON結(jié)構(gòu)的元素信息是經(jīng)過序列化存儲為快照數(shù)據(jù)，所以在讀取JSON結(jié)構(gòu)的字符串前，需要反序列化快照數(shù)據(jù)，得到JSON結(jié)構(gòu)的元素信息，之后讀取操作。
[0080]S320:判斷兩個元素樣式是否一致，如果一致，執(zhí)行步驟S340 ;如果不一致，執(zhí)行步驟S330。
[0081]首先判斷元素信息中的元素樣式是否相同，即獲得的32字節(jié)字符串，如果兩個JSON結(jié)構(gòu)的字符串一樣，說明元素樣式未作修改，如果兩個JSON結(jié)構(gòu)的字符串不一樣，說明元素樣式已被修改。
[0082]步驟S330:記錄元素樣式修改差異。
[0083]S340:判斷兩個元素是否有子元素，如果有，執(zhí)行步驟S350 ;如果沒有，執(zhí)行步驟S370。
[0084]S350:利用LCS算法求出兩個元素的子元素中標簽和元素屬性一致的最長公共子序列。
[0085]LCS算法即最長公共子序列算法(Longest Common Subsequence),其為現(xiàn)有技術(shù)，本發(fā)明不做詳細地說明。
[0086]兩個元素的子元素中標簽和元素屬性一致的最長公共子序列即為tl時刻和t2時刻兩個快照數(shù)據(jù)共有的未改變的子元素集合，也就是tl時刻和t2時刻頁面截圖中為未改變的部分。
[0087]計算兩個子元素中標簽和元素屬性一致的最長公共子序列就是為了判斷網(wǎng)頁在是否刪除了一些元素或新增了一些元素或?qū)υ剡M行了修改。
[0088]步驟S360:根據(jù)兩個子元素中標簽和元素屬性一致的最長公共子序列標記出兩個子元素的差異內(nèi)容。
[0089]如果最長公共子序列中的子元素是文本子元素，則判斷文本內(nèi)容是否有變化，如果有變化，說明文本內(nèi)容發(fā)生改變，如果沒有變化，則說明文本內(nèi)容未發(fā)生改變；如果最長公共子序列中的子元素是其他子元素，則將tl時刻的快照數(shù)據(jù)中非公共子序列的子序列的子元素標記為刪除元素，將t2時刻的快照數(shù)據(jù)中非公共子序列的子序列的子元素標記為新增元素。
[0090]元素修改包括元素內(nèi)容的修改和元素樣式的修改，元素內(nèi)容就是文本子元素中的字符串。
[0091]一個網(wǎng)頁的改變一共分為三種類別，每一個類別對應(yīng)一種情況，也就是說，一個網(wǎng)頁的可視內(nèi)容如果發(fā)生改變，一定在這三種情況內(nèi):
[0092]1.刪除了某些元素，對應(yīng)于刪除元素；
[0093]2.新增了某些元素，對應(yīng)于新增元素；
[0094]3.沒刪除也沒新增的元素中有些發(fā)生了改變:元素內(nèi)容的改變或者元素樣式的改變。
[0095]三種類別中，元素新增、刪除元素和元素修改(包括內(nèi)容和樣式的修改，可能同時發(fā)生，但也沒有固定順序)是互斥的類別，也就是說，如果一個元素是新增的，那么它必然不是刪除的或修改的；如果是刪除的元素，也必然不是新增或者修改的，刪除的元素標記在tl時刻的頁面截圖中，新增的元素標記在t2時刻的頁面截圖中，修改的元素標記在t2時刻的頁面截圖中。
[0096]步驟S370:輸出所有差異的元素集合。
[0097]返回全部有修改的元素的集合。
[0098]二、差異展現(xiàn)
[0099]由上述網(wǎng)頁快照存儲和快照對比階段可以得到網(wǎng)頁歷史時間點上的結(jié)構(gòu)、樣式以及內(nèi)容的差異，由于存儲的網(wǎng)頁快照數(shù)據(jù)記錄了所有元素的占位信息(坐標、寬高)，并記錄了當時的頁面截圖，因此可以拼接兩個時間點的頁面截圖，并將網(wǎng)頁變化的三種差異(新增元素、刪除元素、修改元素)標記在拼接后的截圖上，具體地，可以通過不同的顏色將三種差異標記在截圖上，也可以通過其它方式在截圖上標記出三種差異。
[0100]圖4a?圖4d示出了為根據(jù)本發(fā)明實施例的差異展現(xiàn)的結(jié)果，圖中的左側(cè)相當于tl時刻的頁面截圖，右側(cè)的是相當于t2時刻的頁面截圖；如圖4a所示