網(wǎng)頁爬蟲 JavaScript 頁面渲染技術與應用

廖雨寒 楊彥松 張斌

睿哲科技股份有限公司

一、背景

隨著網(wǎng)絡的迅速發(fā)展，萬維網(wǎng)成為大量信息的載體，如何有效地提取并利用這些信息成為一個巨大的挑戰(zhàn)，網(wǎng)絡爬蟲（web crawler）隨之而生。但是現(xiàn)在的網(wǎng)站很少有純靜態(tài)網(wǎng)頁，大部分網(wǎng)站都通過JavaScript渲染、ajax異步等實現(xiàn)網(wǎng)頁數(shù)據(jù)加載。對于目前的爬蟲框架來說，基本都是爬取到的未渲染過的HTML源碼，所以對于爬蟲來說沒真正做到瀏覽器的所見即所爬。對于scrapy來說，官方有一個scrapy－splash項目支持頁面渲染解析，然而scrapy－splash在高并發(fā)狀態(tài)下極其不穩(wěn)定。一種方案是通過webkit瀏覽器引擎直接渲染，另一種方案是通過調用瀏覽器渲染。通過幾種方案比較，最終選擇了Google Chrome Devtools Protocol開發(fā)渲染功能。

二、渲染方案可行性分析

1．Scrapy－Splash

Scrapy－splash是scrapy官方團隊提供的一個解決js渲染問題的方案。Splash是處理網(wǎng)頁渲染的模塊，它內部使用的開源的webkit瀏覽器引擎，通過HTTP API來使用渲染服務。在scrapy中通過DownloaderMiddleware處理網(wǎng)頁請求，實際是去請求splash接口并得到渲染后的數(shù)據(jù)。

Splash優(yōu)點：

可以并行處理多個網(wǎng)頁

獲取HTML結果和／或截取屏幕截圖

關掉加載圖片或使用 Adblock Plus規(guī)則使得渲染速度更快

使用JavaScript處理網(wǎng)頁內容

使用Lua腳本

能夠獲得具體的HAR格式的渲染信息

然而在實際使用scrapy－splash的過程中，也遇到過一些splash的問題：

對于一些特殊網(wǎng)站，并不能很好的處理重定向，比如一些需要通過js渲染Cookie的頁面，需要通過location對象重定向好幾次才能到真正的頁面，但是splash只是處理了第一次的渲染Cookie后并沒有實現(xiàn)跳轉

在并發(fā)的情況下，獲取到的數(shù)據(jù)有時候是沒有內容的

2．Scrapy－QtWebkit

Splash是采用Webkit引擎實現(xiàn)的網(wǎng)頁渲染，可直接采用Webkit對接Scrapy實現(xiàn)渲染網(wǎng)頁。在Qt庫中有相應的QtWebkit模塊，但是在Qt5．6版本以上QtWebkit就被淘汰了，代替它的是QtWebEngine，因此，選擇QtWebKit時，建議使用Qt4或者Qt5．6之前的版本。

Webkit大致通過View－－＞Page－－＞Frame的流程來加載網(wǎng)頁。通過這些模塊，對于上面splash遇到重定向問題和空頁面問題都能得到解決。

Webkit優(yōu)點：

細粒度處理網(wǎng)頁渲染

資源加載可控

直接交與webkit處理更效率

Webkit缺點：

內存資源占用較大

高并發(fā)處理網(wǎng)頁過多容易引起C底層錯誤

三、Google Chrome Devtools Protocol

以上兩種方案，都存在各自的缺點， 那有沒有可能直接通過調用瀏覽器加載網(wǎng)頁呢？事實上selenium可以操作瀏覽器。selenium操作chrome是使用chromedriver，chromedriver底層應用的是Chrome Devtools Protocol，因此，何不直接使用Chrome Devtools Protocol。

Chrome Devtools Protocol介紹

在Chrome／Chromium瀏覽器中，按F12會彈出調試工具，它是通過Chrome Devtools Protocol的協(xié)議來進行數(shù)據(jù)通訊。Chrome Devtools Protocol用來與瀏覽器頁面（pages）交互和調試的協(xié)議通道。它采用websocket來與頁面建立通信通道，由發(fā)送給頁面的Commands和它所產(chǎn)生的Events組成。

在Chrome Devtools Protocol中，有很多不同的功能模塊域（domains），類似于Chrome開發(fā)這工具的個功能模塊。

然而對于此例的爬蟲來說，只需要用到Network，Page，Runtime等幾個功能模塊域：

Network允許跟蹤頁面的網(wǎng)絡活動，它公開http， file， data，網(wǎng)絡請求和響應等數(shù)據(jù)信息

Page會檢查與頁面相關的動作和事件

Runtime主要用作運行JavaScript操作代碼

啟動調試實例

要使用Chrome Devtools Protocol，需要開啟調試。我們的項目運行在服務器中，所以需要開啟無頭模式 －－h(huán)eadless －－disable－gpu －－no－sandbox。

chrome．exe －－remote－debugging－port＝9222 －－h(huán)eadless －－disable－gpu －－no－sandbox

如果需要遠程調試，可以加上參數(shù)－－remote－debugging－address＝＇0．0．0．0＇。

操作Chrome Devtools Protocol

通過以上命令可以啟動一個Chrome調試實例，通過HTTP調用接口：

http：／／loacalhost：9222／json

會得到接口返回的JSON數(shù)據(jù)：

［

｛

＂description＂： ＂＂，

＂devtoolsFrontendUrl＂： ＂／devtools／inspector．html？ws＝localhost：9222／devtools／page／A6C1F7B23DFF222A87143ACB37CBF7C4＂，

＂id＂： ＂A6C1F7B23DFF222A87143ACB37CBF7C4＂，

＂title＂： ＂about：blank＂，

＂type＂： ＂page＂，

＂url＂： ＂about：blank＂，

＂webSocketDebuggerUrl＂： ＂ws：／／localhost：9222／devtools／page／A6C1F7B23DFF222A87143ACB37CBF7C4＂

｝

］

默認開啟實例后會有一個空的標簽頁（Tab），要創(chuàng)建新的Tab，只需要通過調用接口

http：／／loacalhost：9222／json／new

或者在后面直接添加網(wǎng)址，Tab將會創(chuàng)建并加載網(wǎng)頁

http：／／loacalhost：9222／json／new？http：／／www．example．com／

在每個Tab中有一個webSocketDebuggerUrl字段，它提供了一個WebSocket接口與Chrome交互。比如要啟用Page模塊域，通過WebSocket發(fā)送以下命令開啟：

｛＂id＂：1， ＂method＂：＂Page．enable＂， ＂params＂：｛｝｝

關閉Tab

http：／／loacalhost：9222／json／close／A6C1F7B23DFF222A87143ACB37CBF7C4

四、Scrapy實現(xiàn)Chrome Protocol下載渲染頁面

Scrapy是一個爬蟲框架，它使用了Twisted異步網(wǎng)絡庫來處理網(wǎng)絡通訊，他的大致架構流程如圖

圖 1 Scrapy框架

在圖1中我們看到scrapy處理網(wǎng)絡請求的是Downloader模塊，他通過DownloaderHandler下載處理器完成下載網(wǎng)絡請求，下載處理器使用的是Twisted網(wǎng)絡庫實現(xiàn)的，對于Chrome Protocol來說我們通過接口操作命令實現(xiàn)網(wǎng)頁加載本質上是Chrome加載網(wǎng)頁，也就是說下載處理是通過Chrome Protocol接口操作Chrome瀏覽器請求加載并渲染網(wǎng)頁，因此我們需要拿到渲染后的網(wǎng)頁HTML源碼，需要改寫DownloaderHandler。

然而原生操作Chrome Protocol太繁瑣，我們需要封裝它。在Github上有多種語言實現(xiàn)了Chrome Devtools Protocol的封裝。對于Python來說，我們使用Pychrome庫來操作Chrome Protocol，可以直接用pip安裝模塊：

pip install pychrome

當然要使用該模塊得要啟動Chrome調試實例，通過實例的地址和端口號連接：

browser ＝ pychrome．Browser（url＝＂http：／／＜your＿ip＞：9222＂）

通過new＿tab（）方法創(chuàng)建tab標簽頁，通過tab．start（）啟動當前tab的websocket鏈接，例如需要啟動Network功能域，通過調用tab．Network．enable（）來啟動，通過tab．Page．navigate（url＝＂http：／／www．example．com＂）加載網(wǎng)頁，該頁面加載時的一切網(wǎng)絡活動都可以通過接收websocket響應得到json數(shù)據(jù)。

這時會有一個問題，何時才算是真正渲染完成頁面？

圖 2 JS渲染流程

在圖2中是瀏覽器從輸入網(wǎng)址到頁面加載完成的處理流程，loadEventEnd是真正加載完成，但是在一些使用ajax異步請求的網(wǎng)頁使用loadEventEnd并不能很好的判斷為渲染結束，所以這里我們使用JavaScript命令獲取readyState狀態(tài)判斷頁面是否加載完成：

document．readyState

readyState一共有五種狀態(tài)：

uninitialized － XML 對象被產(chǎn)生，但沒有任何文件被加載

loading － 加載程序進行中，但文件尚未開始解析

loaded － 部分的文件已經(jīng)加載且進行解析，但對象模型尚未生效

interactive － 僅對已加載的部分文件有效，在此情況下，對象模型是有效但只讀的

complete － 文件已完全加載，代表加載成功

通過document．readyState ＝＝ complate來判斷數(shù)據(jù)的加載進度。當加載完成時通過javascript命令獲取渲染后的HTML源碼：

document．documentElement．outerHTML

在這里我們就可以使用Pychrome替代scrapy的twisted下載處理。

五、結語

使用chrome devtools protocol來操作chrome瀏覽器來渲染頁面，能基本完成渲染頁面的需求，一些需要與瀏覽器交互的頁面也大致能使用JavaScript操作命令，重點是使用chrome操作頁面渲染會很占用資源，因此不宜過多的開啟渲染進程，多線程下載盡量重用Tab標簽頁，因為每多創(chuàng)建一個Tab相當于開了一個進程，最后，爬蟲結束時，應該調用相關接口關閉所有Tab，釋放資源。