廖雨寒 楊彥松 張斌

睿哲科技股份有限公司

一、背景

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

二、渲染方案可行性分析

1．Scrapy－Splash

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

Splash優(yōu)點(diǎn)：

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

獲取HTML結(jié)果和／或截取屏幕截圖

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

使用JavaScript處理網(wǎng)頁(yè)內(nèi)容

使用Lua腳本

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

然而在實(shí)際使用scrapy－splash的過(guò)程中，也遇到過(guò)一些splash的問(wèn)題：

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

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

2．Scrapy－QtWebkit

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

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

Webkit優(yōu)點(diǎn)：

細(xì)粒度處理網(wǎng)頁(yè)渲染

資源加載可控

直接交與webkit處理更效率

Webkit缺點(diǎn)：

內(nèi)存資源占用較大

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

三、Google Chrome Devtools Protocol

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

Chrome Devtools Protocol介紹

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

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

然而對(duì)于此例的爬蟲(chóng)來(lái)說(shuō)，只需要用到Network，Page，Runtime等幾個(gè)功能模塊域：

Network允許跟蹤頁(yè)面的網(wǎng)絡(luò)活動(dòng)，它公開(kāi)http， file， data，網(wǎng)絡(luò)請(qǐng)求和響應(yīng)等數(shù)據(jù)信息

Page會(huì)檢查與頁(yè)面相關(guān)的動(dòng)作和事件

Runtime主要用作運(yùn)行JavaScript操作代碼

啟動(dòng)調(diào)試實(shí)例

要使用Chrome Devtools Protocol，需要開(kāi)啟調(diào)試。我們的項(xiàng)目運(yùn)行在服務(wù)器中，所以需要開(kāi)啟無(wú)頭模式 －－h(huán)eadless －－disable－gpu －－no－sandbox。

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

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

操作Chrome Devtools Protocol

通過(guò)以上命令可以啟動(dòng)一個(gè)Chrome調(diào)試實(shí)例，通過(guò)HTTP調(diào)用接口：

http：／／loacalhost：9222／json

會(huì)得到接口返回的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＂

｝

］

默認(rèn)開(kāi)啟實(shí)例后會(huì)有一個(gè)空的標(biāo)簽頁(yè)（Tab），要?jiǎng)?chuàng)建新的Tab，只需要通過(guò)調(diào)用接口

http：／／loacalhost：9222／json／new

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

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

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

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

關(guān)閉Tab

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

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

Scrapy是一個(gè)爬蟲(chóng)框架，它使用了Twisted異步網(wǎng)絡(luò)庫(kù)來(lái)處理網(wǎng)絡(luò)通訊，他的大致架構(gòu)流程如圖

圖 1 Scrapy框架

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

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

pip install pychrome

當(dāng)然要使用該模塊得要啟動(dòng)Chrome調(diào)試實(shí)例，通過(guò)實(shí)例的地址和端口號(hào)連接：

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

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

這時(shí)會(huì)有一個(gè)問(wèn)題，何時(shí)才算是真正渲染完成頁(yè)面？

圖 2 JS渲染流程

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

document．readyState

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

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

loading － 加載程序進(jìn)行中，但文件尚未開(kāi)始解析

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

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

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

通過(guò)document．readyState ＝＝ complate來(lái)判斷數(shù)據(jù)的加載進(jìn)度。當(dāng)加載完成時(shí)通過(guò)javascript命令獲取渲染后的HTML源碼：

document．documentElement．outerHTML

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

五、結(jié)語(yǔ)

使用chrome devtools protocol來(lái)操作chrome瀏覽器來(lái)渲染頁(yè)面，能基本完成渲染頁(yè)面的需求，一些需要與瀏覽器交互的頁(yè)面也大致能使用JavaScript操作命令，重點(diǎn)是使用chrome操作頁(yè)面渲染會(huì)很占用資源，因此不宜過(guò)多的開(kāi)啟渲染進(jìn)程，多線程下載盡量重用Tab標(biāo)簽頁(yè)，因?yàn)槊慷鄤?chuàng)建一個(gè)Tab相當(dāng)于開(kāi)了一個(gè)進(jìn)程，最后，爬蟲(chóng)結(jié)束時(shí)，應(yīng)該調(diào)用相關(guān)接口關(guān)閉所有Tab，釋放資源。