动态网页抓取(AngularJS-pageapplication框架如何判断前端渲染判断页面多)

　　动态网页抓取(AngularJS-pageapplication框架如何判断前端渲染判断页面多)

　　抓取前端渲染的页面

　　随着AJAX技术的不断普及和AngularJS等单页应用框架的出现，越来越多的页面使用js渲染。对于爬虫来说，这种页面比较烦人：只提取 HTML 内容，往往无法获取有效信息。那么如何处理这种页面呢？一般有两种方法：

　　爬取阶段，爬虫内置浏览器内核，爬取前执行js渲染页面。这方面的相应工具是 Selenium、HtmlUnit 或 PhantomJs。但这些工具都存在一定的效率问题，同时也不是那么稳定。优点是编写规则与静态页面相同。因为js渲染页面的数据也是从后端获取的，而且基本上都是通过AJAX获取的，所以分析AJAX请求，找到数据对应的请求也是可行的。而且相对于页面样式，这个界面是不太可能改变的。缺点是找到这个请求并模拟它是一个比较困难的过程，需要比较大量的分析经验。

　　比较这两种方法，我的观点是，对于一次性或小规模的需求，第一种方法省时省力。但对于长期、*敏*感*词*的需求，第二种更为可靠。对于某些网站，甚至还有一些 js 混淆技术。这时候第一种方法基本是万能的，第二种方法会很复杂。

　　这里我们以AngularJS中文社区{{global.metatitle}}为例。

　　1 如何判断前端渲染

　　判断页面是否为js渲染的方式比较简单。可以直接在浏览器中查看源码（Windows下Ctrl+U，Mac下command+alt+u）。如果没有找到有效信息，基本上就是js渲染了。

　　本例中在源码中找不到页面中的标题“优符计算机网-前端攻城师”，因此可以断定是js渲染，这个数据是通过AJAX获取的。

　　2 分析请求

　　现在我们到了最难的部分：找到这个数据请求。这一步帮助我们的工具，主要是浏览器中的开发者工具查看网络请求。

　　以Chome为例，我们打开“开发者工具”（Windows下F12，Mac下command+alt+i），然后刷新页面（也可能是一个下拉页面，总之所有的操作你觉得可能会触发新的数据）），那就记得保留场景，一一分析请求！

　　这一步需要一点耐心，但不是随机的。首先可以帮助我们的是上面的分类过滤器（All、Document 和其他选项）。如果是普通的 AJAX，会显示在 XHR 标签下，而 JSONP 请求会显示在 Scripts 标签下。这是两种更常见的数据类型。

　　然后你可以根据数据的大小来判断。一般来说，较大的结果更有可能是返回数据的接口。其余的基本上都是凭经验。比如这里的“latest?p=1&s=20”，一看就很可疑……

　　对于可疑地址，此时可以查看响应正文的内容。在这里的开发者工具中并不清楚。我们把/api/article/latest?p=1&s=20复制到地址栏再请求一次（如果用Chrome推荐安装一个jsonviewer，查看AJAX结果很方便）。查看结果，看起来我们找到了我们想要的东西。

　　同样的方法，我们进入帖子详情页面，找到具体内容的请求：/api/article/A0y2。

　　以上信息摘自webMagic