java爬虫抓取动态网页(【悦创】反爬虫是什么首先，我要先跟你探讨)

　　java爬虫抓取动态网页(【悦创】反爬虫是什么首先，我要先跟你探讨)

　　大家好，我是悦创。

　　

　　在开始这一系列教程之前，我想和大家讨论一下：什么是反爬虫？

　　首先，目前还没有明确的反爬虫定义。（整个行业没有明确的定义。）因为各方角色不同，或者使用的编程语言或工具不同，对于反爬虫也有自己的看法。

　　所以，在我们的系列课程中，我需要大家保持一致的观点：

　　我们同意限制爬虫程序访问服务器资源和获取数据的行为称为反爬虫。

　　限制包括但不限于：请求限制、拒绝响应、客户端身份验证、文本混淆以及使用动态呈现技术。

　　这些限制按照起点可以分为主动反爬虫和被动反爬虫。

　　附言：

　　主动反爬虫是指为我们（爬虫工程师）特意准备的一些限制。

　　例如：IP限制、Cookies验证、登录页面验证码或注册页面验证码等。

　　被动反爬虫是指用户操作某个功能时触发的一种功能机制。

　　例如：下拉加载、悬停（预览）、以及一些网页数据计算等，这些都是提升用户体验的主要目的，但也造成了爬虫对这些数据获取的限制作用。

　　本课主要分为4个知识点。

　　Contents（反爬虫） 网页的基本组成 浏览器组件和功能 HTML DOM 和网页渲染过程 编程语言或工具与浏览器的区别1. 网页的基本组成

　　

　　这是浏览器打开网页后的截图。从截图中我们可以看到有：导航栏、logo、搜索框、记录号相关信息等，那么这个页面的主要元素就是文字和图片。当然，页面的元素远不止这些，比如优酷、网易或者爱奇艺、搜狗等，网站里面还有音视频。

　　接下来，我们来看看一个网页的基本结构：

　　

　　（图片来源-网络）

　　从左到右：HTML、JavaScript、CSS、媒体资产、其他（以及其他一些）

　　然后是：图片、视频、音频和字体，这些都是媒体或多媒体资源。（例如：代表图片的标签通常是img标签，然后里面的src指向具体的资源路径

　　Action: 打开浏览器观察资源加载情况

　　按着这些次序：

　　打开浏览器访问：打开浏览器的开发者工具（F12）切换到网络面板

　　

　　接下来刷新一些网页或者输入：Python搜索

　　

　　现在，让我们看看究竟加载了什么。

　　这时候我们会发现，当我们访问百度的网站时，加载的资源有：文档、css文件、图片（png、jpg）、js等。

　　2. 浏览器组件和函数

　　

　　我们常用的浏览器有五个组件和三个解释器。这五个组件是：用户界面、浏览器引擎、渲染引擎、数据存储和网络。三个解释器分别是：HTML解释器、JavaScript解释器解释器、CSS解释器。

　　所以浏览器之所以能够理解 HTML、CSS 和 JavaScript 代码并按照一定的规则进行输入，是这三个解释器的功劳。

　　在组件方面，用户界面组件的主要功能是显示操作界面。浏览器引擎的主要作用是：负责将用户的操作传递给相应的渲染引擎。渲染引擎的主要作用是调用，**这三个解释器来解释相应文档中的代码。然后根据解释器的结果重新键入页面。**数据存储组件的作用是： **在本地存储一些较小的数据，如Cookies、Storage对象等。 **Web组件：自动加载HTML文档中需要的其他资源。

　　刚才带大家了解了浏览器的五个组件和三个解释器。我们可以在脑海中填写浏览器的*敏*感*词*。也就是说，常用的浏览器实际上是由一堆组件组成的工具。

　　

　　然后每个组件执行自己的职责，例如：渲染组件，渲染引擎，它会调用三个解释器来解释和理解代码中的一些意图。

　　3. HTML DOM 和网页渲染过程

　　

　　HTML DOM 是文档对象模型，它是一个平台中立和语言中立的界面。它允许程序动态更新文档内容、文档结构和样式。换句话说：程序可以通过DOM改变页面上显示的内容。HTML文档中的每一个标签对都是一个DOM节点（比如title标签对应一个DOM节点，那么year标签也对应一个DOM节点）看看右上图，HTML我们平时看到的一层一层、一层一层嵌套的标签，其实就是一个父子关系的DOM节点。JavaScript 代码和 CSS 样式可以改变页面上文本或图片的位置、颜色或内容，但需要注意的是，它们改变的只是页面上显示的内容，而不是 HTML 文档本身。他们只是更改浏览器中的 DOM，这一点非常重要。（大家一定要明白）

　　操作：打开浏览器编辑 HTML

　　这里我们打开浏览器做一个小实验，这里我们使用W3school的在线编辑器运行HTML代码。

　　

这是段落。

这是段落。

这是段落。

段落元素由 p 标签定义

　　我们可以看一下上面的代码，它们被包裹在成对的 html 标签中。然后 body 标签包裹 HTML 代码，标签对包裹 CSS 样式，标签对包裹 JavaScript 代码。在 HTML 中，这就是注释：被注释注释掉的代码在代码中不起作用。

　　我们先运行以下代码：

　　

这是段落。

这是段落。

这是段落。

段落元素由 p 标签定义

　　我们来看看运行结果：

　　

　　我们可以看到右侧的内容显示区显示了HTML文档中定义的内容。

　　我接下来运行以下代码：

　　

.last{

color:red;

}

这是段落。

这是段落。

这是段落。

段落元素由 p 标签定义

　　

　　这时，我们可以看到最后一段文字的颜色发生了变化。

　　同样，让我们​​添加 JavaScript 代码来查看：

　　

.last{

color:red;

}

这是段落。

这是段落。

这是段落。

段落元素由 p 标签定义

first = document.getElementById("first");

first.innerHTML = "我说这是什么就是什么";

　　

　　我们发现右边内容区的第一行内容变了，那么问题来了：为什么内容区的文字和颜色变了，但是代码中的文字还是body标签中包裹的文字没有发生。任何变化？

　　左边的代码仍然是：**这是一个段落。**向我们展示的是：我所说的就是它的本来面目。现在想一想，想一想：为什么会这样？

　　其实这也正是我之前说的：它们其实是 JavaScript 和 CSS 的变化，也就是说浏览器中的 DOM 节点被 CSS 和 JavaScript 变化了，而最终变化的不是 HTML 代码，或者它的文件。内容，变化其实是浏览器中的DOM布局。需要注意的是，这种变化发生在浏览器的显示级别。事实上，HTML 完全没有变化。

　　

　　上面提到了页面的渲染过程，可以说明我们刚才做的实验的结果。

　　上图中的步骤将使您更加清晰。

　　从一开始，用户输入一个 URL（这是在用户界面组件中执行的操作），然后当用户按下 Enter 键时，他进入浏览器引擎的工作流程，然后根据 HTML 文档的内容进行加载。对应的资源（例如：图片、视频、音频、文本等），此时渲染引擎和三大解释器已经开始工作了，否则浏览器不知道需要加载什么样的资源，那么资源代码的加载和代码的解释是同步进行的。最后渲染引擎根据三大解释器的解释结果对DOM进行操作，即重新对页面内容进行排版，并将排版的结果呈现给用户（也就是我们看到的网页内容）。以上是浏览器的工作流程。.

　　4. 编程语言或工具与浏览器的区别

　　操作：用浏览器打开指定的URL

　　这里我们需要打开浏览器并访问一个网站（例如：GitChat）

　　

　　可以看到，在浏览器访问后，我们得到的是一个比例匀称、布局漂亮的页面。那我们试试代码或者使用工具请求同一个URL，看看得到什么样的结果，打开IDE，也就是Pycharm。

　　这里我们使用 requests 库向 GitChat 发出网络请求。并打印请求的内容。

　　# !/usr/bin/python3

# -*- coding: utf-8 -*-

# @Author：AI悦创 @DateTime ：2020/1/12 13:53 @Function ：功能 Development_tool ：PyCharm

# code is far away from bugs with the god animal protecting

# I love animals. They taste delicious.

import requests

url = 'https://gitbook.cn/'

html = requests.get(url).text

print(html)

# -------------输出-------------

"C:\Program Files\Python37\python.exe" "D:/daima/pycharm_daima/JavaScript 逆向课程/01-探寻 JavaScript 反爬虫的根本原因/test_1.py"

GitChatMenu首 页专 栏专 题电子书关于我们活动分类前端人工智能架构区块链职场编程语言技术管理大数据移动开发产品与运营测试安全运维>严选

内容太多省略！

内容太多省略！

内容太多省略！

内容太多省略！

内容太多省略！

内容太多省略！

内容太多省略！

内容太多省略！

})

function changeHomeColumn(num) {

$('#syncColumn').addClass("syncColumn");

$.ajax({

url: "/gitchat/homepage/change/column/" + num,

type: "GET",

contentType: "application/json; charset=utf-8",

success: function (data, status) {

if (status == 'success' && data.code == 0) {

$('#homeColumns').html('');

$('#homeColumns').append(data.data);

$('#changeColumns').attr('onclick', 'changeHomeColumn(' + data.next + '); return false;')

$('#syncColumn').removeClass("syncColumn");

}

}

});

}

Process finished with exit code 0

　　我们得到的是 HTML 代码，而不是渲染的。

　　接下来，让我们借助一个工具来操作它，工具：PostMan

　　

　　这样，我们将在下面得到我们的响应体。可以看到Python代码的结果是一模一样的，没有排版，也没有请求图片等资源。所以，我们所要求的只是 HTML 代码。其实就是 GitChat 的源码。在谷歌浏览器中访问网页后，我们可以右键选择显示网页的源代码，可以看到得到的页面和我们之前得到的代码是一样的。

　　

　　刚才我们以几种不同的方式访问了我们的 GitChat，并用图表对其进行了解析：

　　

　　从图中可以看出，我们的浏览器可以获取其他需要的内容，而工具获取的只是HTML。

　　这其实就是浏览器和其他工具的区别。准确地说，是因为其他工具中没有 JavaScript 解释器。需要注意的是，CSS和JavaScript的情况是一样的，也就是说，反爬虫可以利用其他没有CSS解释器和渲染引擎的工具的特性来实现。实际工作中这样的应用有很多，比如我们经常听到的字体反爬虫、文本偏移反爬虫、文本混淆反爬虫等。