爬虫入门（关于浏览器）

一、web请求全过程剖析

我们浏览器在输入完网址到我们看到网页的整体内容, 这个过程中究竟发生了些什么?
我们看一下一个浏览器请求的全过程
image
image
image

接下来就是一个比较重要的事情了. 所有的数据都在页面源代码里么? 非也~ 这里要介绍一个新的概念
那就是页面渲染数据的过程, 我们常见的页面渲染过程有两种,

  1. 服务器渲染, 你需要的数据直接在页面源代码里能搜到
    这个最容易理解, 也是最简单的. 含义呢就是我们在请求到服务器的时候, 服务器直接把数据全部写入到html中, 我们浏览器就能直接拿到带有数据的html内容. 比如,
    image

由于数据是直接写在html中的, 所以我们能看到的数据都在页面源代码中能找的到的.
这种网页一般都相对比较容易就能抓取到页面内容.

  1. 前端JS渲染, 你需要的数据在页面源代码里搜不到
    这种就稍显麻烦了. 这种机制一般是第一次请求服务器返回一堆HTML框架结构. 然后再次请求到真正保存数据的服务器, 由这个服务器返回数据, 最后在浏览器上对数据进行加载. 就像这样:
    image

js渲染代码（示例）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>案例：动态渲染页面</title>
    <style>
        table{
            width: 300px;
            text-align: center;
        }
    </style>
</head>
<body>
    <table border="1" cellspacing="0">
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
        <!--   js渲染  -->
        </tbody>
    </table>

    <script>
        //提前准备好的数据
        var users = [
            {id: 1, name: '张三', age: 18},
            {id: 2, name: '李四', age: 28},
            {id: 3, name: '王麻子', age: 38}
        ]

        //获取tbody标签
        var tbody = document.querySelector('tbody')

        //1.循环遍历users数据
        users.forEach(function (item) {
            //这里的item 就是数组中的每一个对象
            console.log(item)
            //2. 每一个对象生成一个tr标签
            var tr = document.createElement('tr')

            //循环遍历item
            for(var key in item){
                //生成td标签
                var td = document.createElement('td')
                td.innerHTML = item[key]

                //5.把td 插入到tr内部
                tr.appendChild(td)
            }
            //把本次的tr插入到tbody的内部
            tbody.appendChild(tr)
        })
    </script>
</body>
</html>

这样做的好处是服务器那边能缓解压力. 而且分工明确. 比较容易维护. 典型的有这么一个网页
image

那数据是何时加载进来的呢? 其实就是在我们进行页面向下滚动的时候, jd就在偷偷的加载数据了, 此时想要看到这个页面的加载全过程, 我们就需要借助浏览器的调试工具了(按F12)
image
image
image
image

看到了吧, 页面上看到的内容其实是后加载进来的.
OK, 在这里我不是要跟各位讲jd有多牛B, 也不是说这两种方式有什么不同, 只是想告诉各位, 有些时候, 我们的数据不一定都是直接来自于页面源代码. 如果你在页面源代码中找不到你要的数据时, 那很可能数据是存放在另一个请求里.

 1.你要的东西在页面源代码. 直接拿`源代码`提取数据即可
 2.你要的东西，不在页面源代码, 需要想办法找到真正的加载数据的那个请求. 然后提取数据

二、浏览器工具的使用

Chrome是一款非常优秀的浏览器. 不仅仅体现在用户使用上. 对于我们开发人员而言也是非常非常好用的.
对于一名爬虫工程师而言. 浏览器是最能直观的看到网页情况以及网页加载内容的地方. 我们可以按下F12来查看一些普通用户很少能使用到的工具.
image

其中, 最重要的Elements, Console, Sources, Network.
Elements是我们实时的网页内容情况, 注意, 很多兄弟尤其到了后期. 非常容易混淆Elements以及页面源代码之间的关系.

注意,

  1. 页面源代码是执行js脚本以及用户操作之前的服务器返回给我们最原始的内容
  2. Elements中看到的内容是js脚本以及用户操作之后的当时的页面显示效果.

你可以理解为, 一个是老师批改之前的卷子, 一个是老师批改之后的卷子. 虽然都是卷子. 但是内容是不一样的. 而我们目前能够拿到的都是页面源代码. 也就是老师批改之前的样子. 这一点要格外注意.
在Elements中我们可以使用左上角的小箭头.可以直观的看到浏览器中每一块位置对应的当前html状况. 还是很贴心的.
image

第二个窗口, Console是用来查看程序员留下的一些打印内容, 以及日志内容的. 我们可以在这里输入一些js代码自动执行.
image

等后面介绍js逆向的时候会用到这里.
第三个窗口, Source, 这里能看到该网页打开时加载的所有内容. 包括页面源代码. 脚本. 样式, 图片等等全部内容.
image

第四个窗口, Network, 我们一般习惯称呼它为抓包工具. 在这里, 我们能看到当前网页加载的所有网路网络请求, 以及请求的详细内容. 这一点对我们爬虫来说至关重要.
image
image
image
image
其他更加具体的内容. 随着学习的展开. 会逐一进行讲解.

三、反爬虫的一般手段

爬虫项目最复杂的不是页面信息的提取，反而是爬虫与反爬虫、反反爬虫的博弈过程

  • User-Agent
    浏览器的标志信息，会通过请求头传递给服务器，用以说明访问数据的浏览器信息
    反爬虫：先检查是否有UA，或者UA是否合法
  • 代理IP
  • 验证码访问
  • 动态加载网页
  • 数据加密
  • ...

四、常见HTTP状态码

  • 200：这个是最常见的http状态码，表示服务器已经成功接受请求，并将返回客户端所请
  • 100-199 用于指定客户端应相应的某些动作。
  • 200-299 用于表示请求成功。
  • 300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。
  • 400-499 用于指出客户端的错误。
    • 404：请求失败，客户端请求的资源没有找到或者是不存在
  • 500-599 服务器遇到未知的错误，导致无法完成客户端当前的请求。

五、http协议

1、 什么是协议？双方规定的传输形式

  • 概述
    超文本传输协议（HTTP，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。所有的WWW文件都必须遵守这个标准
  • http协议：网站原理
  • 常见端口号
    • http(80)
    • https(443)
    • ssh(22)
    • mysql(3306)
    • redis(6379)
    • mongo(27017)

2、HTTPS和HTTP的主要区别

https://www.cnblogs.com/wqhwe/p/5407468.html

  • https协议需要申请证书，一般免费证书较少，因而需要一定费用。
  • http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
  • http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
  • http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

3、http请求

http协议详解https://www.cnblogs.com/10158wsj/p/6762848.html
请求消息格式:

请求行
请求头
请求体

常见请求头：

  • accept:浏览器通过这个头告诉服务器，它所支持的数据类型
  • Accept-Charset: 浏览器通过这个头告诉服务器，它支持哪种字符集
  • Accept-Encoding：浏览器通过这个头告诉服务器，支持的压缩格式
  • Accept-Language：浏览器通过这个头告诉服务器，它的语言环境
  • Host：浏览器通过这个头告诉服务器，想访问哪台主机
  • If-Modified-Since: 浏览器通过这个头告诉服务器，缓存数据的时间
  • Referer：浏览器通过这个头告诉服务器，客户机是哪个页面来的 防盗链
  • Connection：浏览器通过这个头告诉服务器，请求完后是断开链接还是何持链接
  • X-Requested-With: XMLHttpRequest 代表通过ajax方式进行访问

4、http响应

响应消息格式:

状态行
响应头
响应体

响应头中的信息:

  • Location: 服务器通过这个头，来告诉浏览器跳到哪里
  • Server：服务器通过这个头，告诉浏览器服务器的型号
  • Content-Encoding：服务器通过这个头，告诉浏览器，数据的压缩格式
  • Content-Length: 服务器通过这个头，告诉浏览器回送数据的长度
  • Content-Language: 服务器通过这个头，告诉浏览器语言环境
  • Content-Type：服务器通过这个头，告诉浏览器回送数据的类型
  • Refresh：服务器通过这个头，告诉浏览器定时刷新
  • Content-Disposition: 服务器通过这个头，告诉浏览器以下载方式打数据
  • Transfer-Encoding：服务器通过这个头，告诉浏览器数据是以分块方式回送的
  • Expires: -1 控制浏览器不要缓存
posted @ 2025-05-10 07:31  生而自由爱而无畏  阅读(46)  评论(0)    收藏  举报