JavaScript解析：讓搜尋引擎看到更真實的網頁

仲介交易 SEO診斷 淘寶客 雲主機 技術大廳

長期以來，站長們選擇使用JavaScript來實現網頁的動態行為，這樣做的原因是多種多樣的，如加快頁面的回應速度、降低網站流量、隱藏連結或者嵌入廣告等。 由於早期的搜尋引擎沒有相應的處理能力，導致在索引這類網頁上往往出現問題，可能無法收錄有價值的資源，也可能出現作弊。

引入JavaScript解析的目的，正是為了解決上述兩方面的問題，其結果也就是使搜尋引擎可以更為清晰的瞭解使用者實際打開該網頁時看到的效果。 比如有些網站會將使用者評論、評分等資訊從網頁HTML中抽離，利用JavaScript甚至AJAX等方法在頁面被打開的時候動態顯示出來，早期的搜尋引擎此時能處理到的頁面內容就是缺失的，由此會進一步影響對該頁面索引價值的判斷。

要引入JavaScript解析，需要考慮本身的設計與實現、解析速度和對系統其它方面影響等因素，本文通過一些典型的案例來分析如何設計並實現一套網頁JavaScript解析系統， 並簡要介紹這樣的系統對於搜尋引擎其它部分的作用和影響。

一、發現頁面連結

一般來說，頁面連結都是以HTML中的A標籤形式存在，連結URL標記在href屬性中，但實際存在著一些網站會選擇更為「動態」的方式，較為常見的方式有兩種：一種是動態寫入或調整A標籤， 另一種是在使用者點擊的時候觸發事件改變預設的連結打開方式。

1. 動態寫入或調整連結標籤

抽象的說，網頁要實現這樣的效果，乃至後文描述的其它效果，與把大象放入冰箱極為類似，分為三步：找到要寫入/修改的目標(找到大象)，準備好要寫入/修改的內容(打開冰箱門)，執行寫入/修改(把它放進去)。

這三步操作映射到JavaScript上，就是先後調用三組標準的瀏覽器功能函數：頁面元素定位、資料準備以及頁面修改。 那麼，JavaScript解析的工作就是同樣提供出這樣的函數，隨著被站長的JavaScript代碼調用自然的發現相應的內容和行為。

分析至此，所需實現的函數也就基本確定了，其中較為簡單的包括：

document.getElementById // 定位

document.getElementsByTagName // 定位

document.getElementsByClassName // 定位

node. [firstChild/nextSibling/previousSibling/parentNode] // 定位

document. [createElement/createTextNode] // 創建連結

node. [appendChild/insertBefore/innerHTML=?] 寫入內容

element.getAttribute, element.setAttribute // 設置屬性

element.href = ? 設置屬性

至於要寫入的內容，可能是以陣列等形式保存在JavaScript種，也可能是使用AJAX動態載入。 前者屬於JavaScript語言的內置功能，此處不再複述;後者是一個單獨的話題，會在後文專門討論。

2. 點擊時觸發事件改變預設的連結打開方式

頁面這樣做的原因不一，有的是為了隱藏連結，有的是為了實現快顯視窗，有的則是為了程式拼接URL，還有的是做檢查看是否應該打開連結等等。 但所有這些原因都對應著同樣的實現方法：添加click事件。

添加click事件的方法有三種：

將A標籤的href屬性設置為「javascript:func(...)」 的形式

設置A標籤的onclick屬性，設置為onclick=」js_code」 的形式

呼叫事件綁定函數，如my_link_node.addEventListener(‘click’, func, false)

支援這三種方法本身是較為簡單的，需要注意的地方在於如何觸發這樣的click事件，以及如何在觸發之後截獲目的URL。

對於觸發事件而言，首先需要收集到所有可能的click事件，而後再依次觸發。 但對於每一個要觸發的click而言，實際觸發之前必須先檢查其是否還存在，這是由於在其之前的click事件很可能已經把當前這個click刪除掉了。

要做到截獲URL，首先要實現相關的頁面跳轉函數，既location.href = ?，window.open等。 而後通過設置一系列標誌，將本次點擊和頁面跳轉關連起來，如此也就得到了目標URL。

二、動態頁面內容

頁面動態內容是一種提升頁面載入速度、增強網站技術靈活性的手段，可以將那些會改變的內容(如評論、評分等)抽離，使頁面分為靜態和動態兩部分：靜態內容可以使用緩存等方法加快頁面顯示速度、降低網站流量; 動態內容則有格式簡單好生成的優勢，同時也能節省流量。

另一方面，動態內容也是載入廣告和內容作弊的重要方法，最常見的就是寫入iframe，這對於早期搜尋引擎而言有極大的隱蔽性。

在技術層次上，動態頁面內容所需要的工作與上一節「動態寫入或調整A標籤」在很大程度上是相同的，這裡需要增加的是經典的「document.write」方法。

該方法是最早的JavaScript功能之一，用於向頁面直接寫入一段HTML代碼，至今仍在廣泛使用。 對於該方法，早期的搜尋引擎都有所支援，但方法基本限於字元匹配，僅能支援最直接的寫入一個JavaScript字串的方式，對於稍微複雜的文本拼接顯得無能為力。 但對於JavaScript解析而言，這段代碼終究是要符合語言規範的，因此就能做到完整支援，處理文本拼接、條件判斷和混淆代碼等各種情況。

這裡還需要討論的一點是嵌套的document.write，也就是通過document.write寫入一個SCRIPT標籤，該標籤內部是另一段document.write。 這類問題在跳轉作弊頁面中屢見不鮮，對其支援就不只需要JavaScript解析，還需要HTML解析器能夠支援處理嵌套的HTML寫入功能，這裡就不加以分析了。

通過上述方法，無論是網頁的主體資訊，還是廣告或其它輔助資訊，都會被暴露出來，從而更好的理解站長意圖。

三、網頁跳轉

網頁跳轉在有些情況下是達到頁面效果的必要選擇，但同樣會用於作弊。 在技術上，多以下面兩種方式出現：

直接調用頁面跳轉函數

針對搜尋引擎的UA、referer等調用頁面跳轉函數

這裡要實現識別，最核心的就是實現頁面跳轉函數：location物件。 由於這是技術上唯一的JavaScript跳轉函數，所以無論頁面的JavaScript如何撰寫如何混淆，最終都會調用該函數。 因此，儘管不同頁面的跳轉代碼看上去五花八門，但識別出來卻是簡單的。

四、關於AJAX

AJAX是極為常見的網頁技術，根本上說就是在網頁顯示期間，動態的從互聯網上獲取一段資料(可能是HTML也可能是其它)，經過處理後加以顯示。

對於該技術，根本的工作並不在於XMLHttpRequest物件的實現，而是在於對搜尋引擎爬蟲架構的影響。 眾所周知，爬蟲抓取頁面，遍歷其連結，再依次抓取的形式設計的，其工作主要集中在調度和控制抓取壓力上，抓取器本身較為簡單，通常不具備抓取後即時執行JavaScript並抓取AJAX資料的能力，因此需要技術升級方可支援AJAX。

對抓取器的分析超出了本文的範圍，有興趣的讀者可以查看其它相關文獻。

總結

通過前面的案例分析，我們總結出了實現JavaScript解析所需要的基本工作，此外再增加一定的基礎性建設就能構成一套較為完整的系統了。 這裡我們再次整理一下，將其分為三個部分：

1. 在HTML解析器中嵌入JavaScript語言引擎，語言引擎可以選擇V8、SpiderMonkey等成熟的開源方案。

2. 實現所需的功能函數，具體可參考W3C的相關HTML和DOM規範。

3. 作為一個直接推論，需要收錄所謂的.js檔，這是JavaScript解析所需要「解析」的原始程式碼。

本文仲介紹的功能僅是一部分較為常見的JavaScript功能，要讓搜素引擎真正看到實際的頁面還需要進一步實現其它需要的功能，此外還需要配合對HTML、CSS、圖片等資源的支援。

最後，對於希望使用JavaScript的站長來說，本文給出如下建議：

1. 不要使用過於複雜的JavaScript技術，這不利於搜尋引擎的收錄

2. 不要阻止對.js檔的收錄，否則會限制JavaScript解析的能力

3. 合理的劃分網站的靜態部分和動態部分