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

廖雨寒 楊彥松 張斌

睿哲科技股份有限公司

一、背景

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

二、渲染方案可行性分析

1．Scrapy－Splash

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

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

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

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

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

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

使用Lua腳本

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

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

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

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

2．Scrapy－QtWebkit

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

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

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

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

資源加載可控

直接交與webkit處理更效率

Webkit缺點(diǎn)：

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

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

三、Google Chrome Devtools Protocol

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

Chrome Devtools Protocol介紹

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

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

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

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

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

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

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

要使用Chrome Devtools Protocol，需要開啟調(diào)試。我們的項(xiàng)目運(yùn)行在服務(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

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

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＂

｝

］

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

http：／／loacalhost：9222／json／new

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

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

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

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

關(guān)閉Tab

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

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

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

圖 1 Scrapy框架

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

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

pip install pychrome

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

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

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

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

圖 2 JS渲染流程

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

document．readyState

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

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

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

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

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

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

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

document．documentElement．outerHTML

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

五、結(jié)語

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