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

　　js抓取网页内容(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 渲染。

　　在这个例子中，如果源代码中找不到页面上的标题“Youfu Computer Network-Front-end Siege Engine”，可以断定是js渲染，而这个数据是通过AJAX获取的。

　　2 分析请求

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

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

　　这一步需要一点耐心，但也不是不守规矩。首先可以帮助我们的是上面的分类过滤器（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