js 抓取网页内容(网页要么使用机制渲染的机制(一))

　　js 抓取网页内容(网页要么使用机制渲染的机制(一))

　　原文出处：周先生的博客

　　一、前言

　　在数据采集的过程中，我们遇到的很多网页都采用了比较单一的页面渲染方式。例如：

　　对于使用第一种机制渲染的网页，我们可以直接使用 BeautifulSoup 或正则表达式或 xpath 来定位和解析元素。

　　对于使用第二种机制渲染的网页，我们直接抓包找到对应的数据接口，然后使用json模块解析取数据。

　　大多数网页使用第一种机制或第二种机制。但是，也有一些特殊情况。页面上的数据使用一个JS模板渲染，调用两个数据接口。第一个数据接口收录了大部分的数据字段，第二个数据接口只收录一个动态的如果不仔细分析核心字段，就有可能在第一个数据中不断地搜索第二个数据接口中存在的字段数据界面，但它永远不会被找到。下面我们来回顾一下这个数据定位过程。

　　二、分析页面

　　首先，我们来到目标页面。在目标页面中，我们需要的数据在下图位置：

　　可以发现这是一个表类型的数据结构。按照常规思路，我们首先检查网页源代码，判断数据是否由后端直接渲染成HTML：

　　源码中的几行代码说明这个页面的数据是前端获取并渲染的，所以我们需要从网页响应中找到对应的接口。

　　三、查找数据接口

　　回到目标页面，按键盘上的“F12”键打开浏览器调试窗口（以Chrome为例），切换到“网络”选项卡，点击“XHR”，刷新当前页面，然后我们将获取请求目标页面时产生的所有XHR请求：

　　经过仔细分析，我们似乎找到了目标数据对应的数据接口：

　　界面中json字段的数据基本可以对应页表中的数据，但是还有一个字段找不到，就是status字段。怎么做？秉承“页面上的数据会在响应中返回”的信念，我们搜索页面响应的资源。切换到浏览器调试窗口中的“源”选项卡，选择“搜索所有文件”：

　　找到处理这个数据接口的JS文件。

　　四、分析JS

　　我们对这个JS进行了格式化，发现状态栏的文字是由一个json映射出来的：

　　然后我们回到直接数据界面，继续寻找代表状态值的字段，但还是没有结果。于是回到刚才的JS，发现里面收录了一个JS渲染模板（JS文件的第一行）。我们提取出来重新格式化恢复，得到页面数据的HTML模板：

　　在这个JS渲染模板中，我们还有一个重要的发现：状态栏的默认数据是-，不是直接从界面的数据中渲染出来的，而是通过viewId字段和adgroupid 字段。展示。

　　-

　　通过检查定位元素，我们发现它在HTML结构中的表现如下图所示：

　　根据经验，我们判断 displayOnlineState 的值是状态的名称。我们继续搜索响应的 XHR 内容。果然，在另一个界面找到了displayOnlineState对应的值：

　　并且可以对应之前的状态json键值对。这样我们就找到了页面中所有数据的来源，并且可以请求解析相应的接口。