nodejs爬虫笔记(四)---利用nightmare解决加载更多问题

目标：

　　解决页面加载更多问题。笔记三中，我们只爬取到网页的部分信息，而点击加载更多后的页面内容是没有提取到的。开始我的想法是找到加载更多的数据接口（可参照：http://www.jianshu.com/p/3fdb6ab47aef），但是我又发现一个问题，当我打开一个订阅号页面时，找到数据接口如下图，点击response会发现里面有相应的内容，对其进行解析时得到的内容却是空的，也就是说我得不到页面的信息。而且我发现有些网页的数据接口是加密的，根本访问不到。因此，我又只能换种思路，看能不能模仿浏览器进行点击，等加载更多没有的时候我再去解析页面，是不是就能够获取到所有页面信息呢。我开始找到了PhantomJS这个模块，但是运行的时候速度有点慢，后面和同学一起又找到了一个更好的模块---nightmare。

一、nightmare

1、简单介绍

　　nightmare是PhantomJS的高级封装，让你能够实现浏览器自动化任务。PhantomJS 是一个基于WebKit的服务器端 JavaScript API。它全面支持web而不需浏览器支持，其快速，原生支持各种Web标准： DOM 处理, CSS 选择器, JSON, Canvas, 和 SVG。PhantomJS可以用于页面自动化，网络监测，网页截屏，以及无界面测试等。下面再贴一段官网介绍。我们可以看到速度是phantomJs的两倍，这正是我们想要的。

2、应用时需要注意的地方

　　首先肯定是要安装啦，安装介绍我就不废话了，可以参考nightmare官方文档，还有一些常用的api,如type输入操作，click点击操作等等。具体可以参考»。下面我只提一下几个需要注意的地方：

　　（1）evaluate方法，方法的参数函数的执行环境是浏览器环境，而不是脚本的运行环境，因此，其内部无法访问到脚本内定义的全局变量,但是可以通过evaluate的后续参数，来作为第一参数函数的参数传入，虽说如此，但是！！！这种方法不能传一些特殊对象，比如原型链上的内容，是不会带上的，而且即使说node环境有Date对象，浏览器也有Date对象，也不能直接传入一个Date的实例，传入之后，也用不了Date的内置方法。例如：下面的例子中我将定义的数组arr传入给了evaluate方法。

var arr = [];

nightmare
//加载页面
.goto('http://www.baidu.com')
//等待选择器加载完毕，可以用数值（表示等待时间，单位毫秒）
.wait('body')
//浏览器内页面执行
.evaluate(function(arr){
  //这里外部的变量hello以参数的形式传了进来，可以用content获得。
  var p = document.querySelector('#cp').innerText;
  arr.push(p);
  return arr;
}, arr)
//结束操作
.end()
//前面都是操作队列，需要有then方法才会触发执行上述队列的操作
.then(function(res){//函数参数为evaluate的返回值
  console.log(res);
})
//处理异常情况
.catch(function (error) {
  console.error('failed:', error);
});

　　（2）在使用 nightmare 的时候，如果在忘记了在代码的最后调用 then 方法，会发现 nightmare 不会执行任何操作。例如执行下面这段代码，在打开浏览窗口之后不会有任何操作结果。

nightmare
    .goto('https://github.com')
    .wait(1000)
    .evaluate(function(){})
    .end()

　　

　　（3）循环利用nightmare ，可以参照：nightmare async operations loops。

　　（4）如果想利用JQuery解析页面，得在evaluate方法前面利用inject()方法插入本地jquery.js文件，如：

.inject('js', 'jquery.min.js')

二、以音乐为例，模拟加载更多。

　　打开页面，我们可以发现页面底部有一个加载更多的按钮，而当我们等页面加载完成，加载更多这个按钮便会消失，因而我们可以利用nightmare的wait()方法，等待页面加载完毕后再去进行解析。

　　通过nightmare的API可以看到wait()方法如下，这说明wait会一直等待，直到返回ture，才会执行下面的操作（默认等待时间30s），因而结合YouTube页面加载的特性，可以考虑如果页面正在加载，我们返回false，如果页面底部还有加载更多，我们模拟点击按钮，同样返回false，直到检查到页面底部没有加载更多按钮时，我们才返回true，此时我们的页面就全部加载完成了，再去对页面进行解析就可以获取到加载更多以后的内容。

　　新建crawler.js文件，编辑如下代码：

var Nightmare = require('nightmare');
var nightmare = Nightmare({
    show: true,
    pollInterval: 50
});

nightmare
    .goto('https://www.youtube.com/channel/UC-9-kyTW8ZkZNDHQJ6FgpwQ')
    //.inject('js', 'jquery-2.1.1.min.js')
    .wait(function() {
        var loadMoreText = document.querySelector('.load-more-text');
        if (loadMoreText == null) return true;
        if (/hid/.test(loadMoreText.classList.value)) return false;
        document.querySelector('.browse-items-load-more-button').click();
        return false;
    })
    .evaluate(function() {
//获取订阅号Id
var $channelName = $('#c4-primary-header-contents .branded-page-header-title a').attr('href');
var $channelId = $channelName.match(/channel\/([a-zA-Z0-9_-]+)/);

var category = [];
$('#browse-items-primary .branded-page-module-title').each(function(){
  var $category = $(this).find('a').first();
  var item = {
    categoryName : $category.text().trim(),
    url : 'https://www.youtube.com' + $category.attr('href')
  };
  //根据URL判断为订阅号还是视频分类
  if(item.url.indexOf('list')!==-1){
    if(Array.isArray($channelId)){
      item.channelId = $channelId[1];
    }
  }else{
    var s = item.url.match(/channel\/([a-zA-Z0-9_-]+)/);
    if(Array.isArray(s)){
      item.id = s[1];
    }
  }
  //获取youtube某个订阅号下的视频分类
  if(item.categoryName!==''&&item.hasOwnProperty('channelId')){
    category.push(item);
  }
});
return category;
})
.end()
.then(function(result) {
　　 console.log(result);
　　 console.log(result.length);
})
.catch(function(err) {
　　console.log(err);
})

　　

　运行代码后会发现这个订阅号下的所有视频分类都会显示出来，到这里我们的任务就完成了。

三、总结

　　通过这个简单的例子，我发现了nightmare的强悍之处，但是不适合用于处理大量页面，因为这样运行时间会很长，可以将其用于获取相关列表的url等信息，获取下来后到具体的页面可以采取其他模块，如node-crawler。采用笔记三的思路，我爬取YouTube时，先通过订阅号获取到每个订阅号下面的分类列表，再通过分类列表获取到视频列表，然后再到具体的视频。我通过测试5个订阅号，获取到视频列表大概花去5分钟的时间，视频数量大约为15000个，这个速度还可以。但是当我进入具体视频时，页面就变成了一万多个，解析一个差不多会花掉两秒的样子，这样的话速度太慢了。因而到第三层可以考虑采用其他模块解析，源码请点击。