Question

在之前章节中，我们爬取的都是静态页面中的信息，静态页面的内容始终不变，爬取相对容易，但在现实中，目前绝大多数网站的页面都是动态页面，动态页面中的部分内容是浏览器运行页面中的JavaScript脚本动态生成的，爬取相对困难，这一章来学习如何爬取动态页面。

先来看一个简单的动态页面的例子，在浏览器中打开http://quotes.toscrape.com/js，显示如图11-1所示。

页面中有10条名人名言，每一条都包含在一个<div class="quote">元素中，如图11-2所示。现在，我们在scrapy shell环境下尝试爬取页面中的名人名言：

$ scrapy shell http://quotes.toscrape.com/js/
...
>>> response.css('div.quote')
[]

从结果看出，爬取失败了，在页面中没有找到任何包含名人名言的<div class="quote">元素。这些<div class="quote">就是动态内容，从服务器下载的页面中并不包含它们（所以我们爬取失败），浏览器执行了页面中的一段JavaScript代码后，它们才被生成出来，如图11-3所示。

图11-1

图11-2

图11-3

图中的JavaScript代码如下：

var data = [
{
 "tags": [
  "change",
  "deep-thoughts",
  "thinking",
  "world"
 ],
 "author": {
  "name": "Albert Einstein",
  "goodreads_link": "/author/show/9810.Albert_Einstein",
  "slug": "Albert-Einstein"
 },
 "text": "\u201cThe world as we have created it is a process of our thinking. \
      It cannot be changed without changing our thinking.\u201d"
},
{
 "tags": [
  "abilities",
  "choices"
 ],
 "author": {
  "name": "J.K. Rowling",
  "goodreads_link": "/author/show/1077326.J_K_Rowling",
  "slug": "J-K-Rowling"
 },
 "text": "\u201cIt is our choices, Harry, that show what we truly are, \
      far more than our abilities.\u201d"
},
... 省略部分内容 ...
{
 "tags": [
  "humor",
  "obvious",
  "simile"
 ],
 "author": {
  "name": "Steve Martin",
  "goodreads_link": "/author/show/7103.Steve_Martin",
  "slug": "Steve-Martin"
 },
 "text": "\u201cA day without sunshine is like, you know, night.\u201d"
}
];
for (var i in data) {
 var d = data[i];
 var tags = $.map(d['tags'], function(t) {
  return "<a class='tag'>" + t + "</a>";
 }).join(" ");
 document.write("<div class='quote'><span class='text'>" +
  d['text'] + "</span><span>by <small class='author'>" +
  d['author']['name'] + "</small></span><div class='tags'>Tags: " +
  tags + "</div></div>");
}

阅读代码可以了解页面动态生成的细节，所有名人名言信息被保存在数组data中，最后的for循环迭代data中的每项信息，使用document.write生成每条名人名言对应的<div class="quote">元素。

上面是动态网页中最简单的一个例子，数据被硬编码于JavaScript代码中，实际中更常见的是JavaScript通过HTTP请求跟网站动态交互获取数据（AJAX），然后使用数据更新HTML页面。爬取此类动态网页需要先执行页面中的JavaScript代码渲染页面，再进行爬取。下面我们介绍如何使用JavaScript渲染引擎渲染页面。