文章目录
- 1.网络请求过程
- 1.1通过 URL 查找服务器 IP
- 1.2三次握手建立 TCP 连接
- 1.3发送 HTTP 请求
- 1.4服务器响应请求
- 1.5浏览器解析 HTML
- 1.6页面渲染后呈现给用户
- 2.浏览器开发者工具
- 2.1如何打开开发者工具
- 2.2开发者工具面板设置成中文
- 3.URI 和 URL
1.网络请求过程
打开浏览器，输入一个网址，然后回车，等待网页加载结束，然后浏览网页。这个操作，你知道在这个操作过程中都发生了什么事情么
例如我们在浏览器地址栏中输入：https://www.baiu.com 并回车
1.1通过 URL 查找服务器 IP
浏览器先要做的是找出与域名对应的服务器，即把域名解析成对应服务器的 IP 地址。
对于 www.baidu.com，浏览器并不认识这个域名，
- 前面的
www是服务器名， baidu可以理 解为公司名或私人名，- 最后的
com则是域名根服务器。
浏览器先访问本地 Host 文件，检查文件中是否有与域名匹配的IP地址，如果有则直 接访问IP对应的服务器；否则，向上层的 DNS 服务器询问；如果还没有，则继续向上层 DNS 服务器询问，直到DNS根服务器
1.2三次握手建立 TCP 连接
回顾一下大学网络课程的三次握手知识内容
获得服务器 IP 后，接下来是和服务器建立连接，这就是常说的 TCP 三次握手 如下图
首先，客户端发送一个带 SYN 标志的数据包给服务器。服务器收到后，回传一个带 SYN/ACK 标志的数据包表示信息确认。最后，客户端回传一个带 ACK 标志的数据包，表 示握手结束，连接建立成功。 可能读者对此不容易理解，打个比方，你可以把客户端当作一个快递员，而把服务器当作收件人。
快递员（客户端）：兄弟，在家吗？有你的快递。
收件人（服务器）：嗯，在家，你在下午两点前送过来就行。
快递员（客户端）：行，我两点前给你送过去。这就类似于三次握手建立 TCP 连接
1.3发送 HTTP 请求
客户端和服务器建立连接后就可以开始发送 HTTP 请求了。浏览器发送请求行、请求 头信息，还发送一个空行，代表请求头信息发送结束。如果是 Post 提交，还会提交请求体。
1.4服务器响应请求
Web 服务器解析用户请求并进行相关处理，最后把处理结果组装成响应报文，返回给 客户端
1.5浏览器解析 HTML
浏览器解析服务器返回的 HTML 代码，并请求 HTML 里用到的 CSS、JS、图片等资源。
1.6页面渲染后呈现给用户
渲染的顺序是从上到下，下载和渲染是同时进行的，页面加载完成显示在浏览器上。 以上就是用户在浏览器输入一个地址并回车后到浏览器经历的大致流程.
2.浏览器开发者工具
2.1如何打开开发者工具
打开浏览器按F12调出开发者工具 或者浏览器右上角三个小点—>更多工具->开发者工具
2.2开发者工具面板设置成中文
开发者工具面板是英文，看不习惯可以设置成中文的，点击小齿轮图标进入设置页面
2.3 如下内容，可以在标头下，看到请求方法GET请求、响应头、等等内容。
3.URI 和 URL
URI（Uniform Resource Identifier，统一资源标志符）标记一个网络资源，强调的是给 资源命名；URL 用地址标记一个网络资源，强调的是给资源定位。
下面说个简单的列子如：
你在某个技术沙龙上认识了一位技术高手，他自称 XXX 公司的技术总监，这 个头衔就是 URI，但是只有这个头衔的话，你没有那么容易找到他，你还需要知道他所在 公司的地址。深圳市南山区科技园 X 栋 X 楼/XXX 公司/技术总监/X 某，通过上面这串地址 你就可以找到这个人。这个完整的地址就是 URL。而通过这个 URL 也可以知道 X 某是 XXX 公司的技术总监，它既能当作标记使用，又能当作地址使用，所以 URL 是 URI 的子集。
URI 由下面三部分组成：
- 访问资源的命名机制
- 存放资源的主机名
- 资源本身的名称，用路径标识，着重强调资源。
URL 由下面三部分组成：
- 协议（或称服务方式）
- 存有该资源的主机 IP 地址（有时也包含端口号）
- 主机资源的具体地址（如目录、文件名等）
一般习惯性地把我们说的网址称为 URL。