使用puppeteer爬蟲，檢查頁面靜態資源丟失

背景

由於近期在項目中出現過頁面中靜態資源丟失的狀況。其中圖片居多，由於頁面較多，每每都是客戶發現丟失了圖片，纔開始定位缺失的圖片資源，再進行補救。所以，基於 puppeteer寫了一個簡單的頁面抓取圖片資源進行排查的 node.js腳本。

優點

• 可配置
  經過配置排查的頁面的URL地址，根據順序逐個排查，把錯誤的靜態資源詳情持久化。
• 使用靈活
  本地能夠獨立配置使用，無需服務端支持。

不足

• 被動型
  人爲啓動腳本進行排查，也能夠添加定時任務，按時間段進行排查。不能主動監聽頁面缺失文件，不能第一時間找到錯誤靜態資源。

概念&流程

目前項目中的圖片資源主要是兩種使用方式：

• html的img標籤
• css文件的background-image

針對兩種使用方式，採起不一樣的策略：

• img標籤使用

以單一頁面爲單位，爬取HTML並經過puppeteer的page.evaluate()方法匹配出頁面上全部的<img>標籤中的src屬性寫成數組。經過node的https模塊循環對抓取的數組內src進行訪問，若是有404，即表明着該靜態資源缺失，並把該資源的詳情寫入錯誤圖片的log日誌中log/*/ERRIMGFILE.js。

• css文件使用

一樣以單一頁面爲單位，爬取HTML抓取頁面的<link>標籤的rel屬性寫成數組。(須要注意的是，通常來講頁面上的css引用都是經過<link>標籤的，可是反之則未必，好比頁面的一些icon也是使用link標籤引入的，所以咱們須要對抓取的link標籤進行篩選)。根據目前項目的特色，css文件有通過服務器壓縮合並請求的版本，所以須要對這類的樣式文件進行拆分使之成爲能夠外部能夠訪問的單一css文件。這裏我以汽車之家車商城主會場引用的服務器合併後的css爲例分析:

//x.autoimg.cn/com/co.ashx?path=|mall|2015|pc|js|swiper|swiper-3.4.2.min-6af34.css,|mall|topic|2017|9|hbyy|pc|css|game-8a737.css,|mall|2015|pc|css|index-all-d010e.css

分析得出，咱們須要的單一的css文件應該是以下這種形式的集合

//x.autoimg.cn/mall/2015/pc/js/swiper/swiper-3.4.2.min-6af34.css
//x.autoimg.cn/mall/2015/pc/css/index-all-d010e.css
//x.autoimg.cn/mall/topic/2017/9/hbyy/pc/css/game-8a737.css

那麼根據目標，咱們先將合併的css後半部分中的co.ashx?path=進行分解，獲得3個css文件的字符串，該字符串經過,拼接，而且在內部是用|分割的路徑，所以通過一些拆分和替換，再拼上前面的domain就獲得了一組可用來訪問的css路徑集合。

固然，頁面上除了這樣通過服務器處理的css外，還有一些單獨引用的，咱們也一併把這些路徑添加到上面處理事後的css路徑集合中。

如今所有的css路徑咱們拿到了，開始逐個文件的排查裏面用到的圖片。經過puppeteer提供的方法page.goto('css文件地址')打開一個新的頁面，分析頁面上的結構，抓取到該css的所有內容，經過正則匹配/\/\/.+?\.(jpg|png|gif)/g出裏面全部的圖片。

經過node的https模塊循環對數組內src進行訪問，若是有404，即表明着該靜態資源缺失，並把該資源的詳情寫入錯誤圖片的log日誌中log/*/ERRCSSIMGFILE.js。

目錄&文件的做用

• log/*/*.js存放腳本生成的log文件。

文件名	介紹
LOGFILE.js	存放腳本執行的操做。包含有：頁面共計引用的img標籤，頁面引用的css文件，所有css文件中引用的圖片，以及每一個css文件引用的圖片路徑。
ERRIMGFILE.js	存放錯誤的html<img>標籤引入資源。包含的字段有：錯誤資源條數；錯誤資源詳情的列表。
ERRCSSIMGFILE.js	存放錯誤的css文件引用的圖片資源。包含的字段有：錯誤資源條數；錯誤資源詳情的列表。

• config.json添加的排查任務頁面。

字段	介紹
taskAlias	任務別名：可輸入中文，做爲快速查看log日誌的索引。
taskName	任務名稱：不可輸入中文。
taskUrl	任務地址：腳本執行的路徑，爬蟲開始由該地址爬行抓取內容。

• config.js腳本的配置文件。

字段	介紹
cdnPath	靜態資源存放的域名。
cssPath	css文件存放的域名，帶有協議。
cssFilter	合併的css參數，主要用於匹配合並後的css
imgReg	匹配圖片資源規則。

針對CDN遷移，須要同步修改 cdnPath, cssPath等字段。

模擬的測試文件

基於tms搭建的測試地址

一個html頁面,html中引用多張圖片，須要有很多於2個的錯誤img資源，引用多份css文件，須要有一個合併的css文件。而且每一個合併的文件須要有多個錯誤img資源。

TODOS

• 經過配置文件對增長的頁面地址統一排查。
• 對新的CDN路徑分析，移植到新的CDN環境上。
• 增長一些更加友好的使用體驗。

參考資料

puppeteer中文文檔

源碼

GitHub:puppeteer-demo