Go使用chromedp库操作headless-chrome爬取"JS画出来的"网站

随着类似Vue、Angular这类通过JS将web页面"画"出来的前端框架的流行，爬取网页不再像以前那样随便发个GET请求，解析HTML就能搞定了。对于使用这类框架制作的SPA(Single Page Web Application)网站来说，必须使用一个全功能浏览器将JS脚本执行一遍才能获得想要的数据，除此之外别无他法。这里我们介绍如何使用Go语言的chromedp库来操作headless-chrome模拟浏览器操作，然后抓取网页数据的方案。

"无头"Chrome与远程调式协议

所谓headless-chrome，是Chrome浏览器的无GUI的命令行版浏览器。虽然没有UI，但是功能上跟我们日常使用的Chrome是没有任何区别的。从Chrome的59版本开始，无头浏览器就已经在安装Chrome的时候自动装好了。例如在MacOS上，我们可以直接通过终端调用chrome将HTML代码直接输出到控制台：

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --headless --disable-gpu --dump-dom https://www.sogou.com

有了这东西以后其实就能做很多事了，如果你只是想爬取JS生成的网页内容，通过shell脚本，或者其他任何编程语言，都可以使用这种方式获取到完整的html，然后再进一步解析获取数。但是如果你想模拟一下用户的操作，比如表单提交、截图等操作，这就不好办了。这就需要chrome能够提供一种远程交互协议, 然后允许各编程语言通过次协议进行通讯，这就是远程调试协议Remote Debugging Protocol。

幸运的是我们并不需要学习协议的具体内容，Go有一个chromedp第三方库，允许我们以更简单的编程的方式通过远程调试协议操作Chrome，github地址：https://github.com/chromedp/chromedp

使用方法和注意事项

现在网上很多例子都是只爬取一个页面的例子，然而实际中我们经常需要按一定规则爬取整个网站，这时候就涉及到Chrome实例的复用问题，总不能跟其他博客说的那样每爬取一个网页都要销毁、打开Chrome吧，效率太低了。

在爬取之前，我们需要做一些重要的设置，比如要自定义User-Agent，因为默认情况下headless-chrome会很实在的在UA中标记出来自己是headless的，这样就有可能被目标网站拒绝。其次是要禁用图片加载，因为通过测试发现，如果网页中有动态GIF, chromedp会卡住，原因未知。禁止图片加载即可解决问题。设置的方式如下：

	options := []chromedp.ExecAllocatorOption{
		chromedp.Flag("headless", false), // debug使用
		chromedp.Flag("blink-settings", "imagesEnabled=false"),
		chromedp.UserAgent(`Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36`),
	}
	options = append(chromedp.DefaultExecAllocatorOptions[:], options...)

Chrome初始化代码如下：

c, _ := chromedp.NewExecAllocator(context.Background(), options...)

	// create context
	chromeCtx, cancel := chromedp.NewContext(c, chromedp.WithLogf(log.Printf))
	// 执行一个空task, 用提前创建Chrome实例
	chromedp.Run(chromeCtx, make([]chromedp.Action, 0, 1)...)

可以看到chromedp是严重依赖于go的context包的，如果不熟悉context的使用最好先去研究一下。

注意这里我们初始化完context以后，先调用Run()方法传递了一个空的Action列表，这是为了让chrome在实际执行爬取任务之前先完成Chrome进程的创建和初始化工作，否则就会延迟到爬取的时候才会初始化，因为chromedp当前的API设计逻辑是只会在第一次调用Run()的时候创建headless-chrome进程。

完成初始化后，还有一个重要的设置就是一定要设置超时时间，否则很容易卡住：

// 给每个页面的爬取设置超时时间
	timeoutCtx, cancel := context.WithTimeout(chromeContext, 20 * time.Second)
	defer cancel()

然后，就可以向无头浏览器发送指令了：

log.Printf("Chrome visit page %s\n", link)

	var htmlContent string
	err := chromedp.Run(timeoutCtx,
		chromedp.Navigate(link),
		chromedp.WaitVisible(waitExpression),
		chromedp.OuterHTML(`document.querySelector("body")`, &htmlContent, chromedp.ByJSPath),
	)

这部分代码表示命令chrome访问指定url, 然后等待指定的HTML标签出现(通过waitExpression参数指定)，最后获取到标签里的全部HTML代码保存到htmlContent中。至此我们就获得了JS渲染后的完整HTML，后续就可以用goquery之类的库解析数据了。

注意waitExpression并不是我们熟知的JQuery选择器，我们可以通过自己打开Chrome -> Inspect -> 找到你想等待的标签 -> 右键菜单 -> copy -> copy selector 来直接获取，并不需要研究学习。例如：

body > div.aw-container-wrap

表示body标签下的第一个携带aw-container-wrap class属性的div。

在实际应用中连续爬取多个网页，只需要每次在chromeCtx的基础上，派生一个带有超时功能的子Context即可：

timeoutCtx, cancel := context.WithTimeout(chromeContext, 20 * time.Second)

这样就不会销毁Chrome进程再重新创建一遍了。

有了这个神器，爬天爬地爬空气都不怕，只是慢了点而已。