2022秋招-前端学习记录8-url回车/计网通用类

最新推荐文章于 2024-10-02 05:39:15 发布

wei起风了

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量311

点赞数

文章标签： javascript web

本文链接：https://blog.csdn.net/weixin_41831917/article/details/119458102

版权

在浏览器输入URL网址回车之后发生了什么？

视频链接：https://www.bilibili.com/video/BV1s44y117vK

首先，将网址输入地址栏以后：
在这里插入图片描述

1、DNS把url地址解析成 ip地址

把URL地址解析成ip地址，这个过程就叫DNS解析
实际上DNS算是一个数据库，里面存着很多URL和他们对应的ip地址，这样就可以根据DNS查找到对应ip地址。有了ip地址，我们就可以在互联网里找到指定的服务器了。
在这里插入图片描述
上面找到了服务器，我们这边就要询问能不能连接服务器呢？就到了第二步：

2、建立 TCP 连接（三次握手）

建立TCP连接的目的是：在发送数据之前确立好通道，客户端和服务器之间就可以在这个通道里发送数据了。
在建立通道之前，需要进行三次握手，确定可以建立通道：

客户端发送SYN数据包来表示请求连接
服务器响应SYN和ACK的数据包来表示同意建立连接
客户端再发送ACK数据包来表示成功连接
在这里插入图片描述
连接建立完成以后，就可以来到第三步：

3、浏览器发起 HTTP 请求报文

当我们和服务器建立起连接以后，浏览器会发送HTTP请求报文给服务器。
报文的格式就由请求行、请求头部、空行和请求数据组成
请求行： 是由请求方法、请求地址和HTTP协议版本组成
请求头部： 请求头部是一些关于浏览器的信息，是由键/值对组成的，一行一对，直到遇到空行就表示下面没有请求头部了。
请求数据： 需要的数据
在这里插入图片描述

当服务器收到HTTP请求报文以后，服务器会请求报文，并且做出响应，这样就来到了第4步：

4、服务器返回 HTTP 响应报文

响应报文和请求报文很是相似：
报文的格式由状态行，响应头部，空行和响应数据组成
状态行： 状态行最重要的就是那三位数字，比如常见的404 Not Found表示资源没找到的错误；另外最常见的是200，就表示请求成功。
响应头部： 响应头部由键/值对组成的，一行一对，直到遇到空行就表示下面没有响应头部了。
响应数据： 一些特定格式的数据等。
在这里插入图片描述
Web服务器通常通过监听80端口，来获取客户端的HTTP请求。与客户端建立好TCP连接后，web服务器开始接受客户端发来的数据，并通过HTTP解码，从接受到的网络数据中解析出请求的url信息以前其他诸如Accept-Encoding、Accept-Language等信息。Web服务器根据HTTP请求头的信息，得到响应数据返回给客户端。一个典型的HTTP响应头数据报如下：

HTTP/1.1 200 OK
Date: Fri, 24 Oct 2014 13:55:18 GMT
Server: Apache
X-Powered-By: PHP/5.4.32
Keep-Alive: timeout=5, max=10000
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: text/html; charset=UTF-8
a0f6
<</span>!DOCTYPE HTML>
<</span>html>
<</span>head>
<</span>meta charset="UTF-8">
<</span>meta http-equiv="X-UA-Compatible" content="IE=10,IE=9,IE=8">
<</span>meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<</span>title><</span>/title>
<</span>body class="home"><</span>/body>
<</span>/html>

至此，一个HTTP通信过程完成。web服务器会根据HTTP请求头中的Connection字段值决定是否关闭TCP链接通道，当Connection字段值为keep-alive时，web服务器不会立即关闭此连接。（这一步一开始也许还会有重定向及浏览器跟踪重定向地址等）。

客户端/浏览器在收到服务器的响应的数据以后，就可以开始进行页面渲染了：

5、浏览器解析文档资源并渲染页面

这一步也就是解析接受到的HTML,CSS,和JavaScript等文件，有了这些前端文件以后，用户就可以在前端页面中看到页面内容了。

引：浏览器解析文档资源并渲染页面是个怎样的流程？

(涉及到重绘和重排，可移步记录7看)

浏览器通过 HTMLParser 根据深度遍历的原则把 HTML 解析成 DOM Tree。
浏览器通过 CSSParser 将 CSS 解析成 CSS Rule Tree（CSSOM Tree）。
浏览器将 JavaScript 通过 DOM API 或者 CSSOM API 将 JS 代码解析并应用到布局中，按要求呈现响应的结果。
根据 DOM 树和 CSSOM 树来构造 render Tree。
layout：重排（也可以叫回流），当 render tree 中任一节点的几何尺寸发生改变，render tree 就会重新布局，重新来计算所有节点在屏幕的位置。
repaint：重绘，当 render tree 中任一元素样式属性（几何尺寸没改变）发生改变时，render tree 都会重新画，比如字体颜色，背景等变化。
paint：遍历 render tree，并调动硬件图形 API 来绘制每个节点。

如果要断开连接：

6、关闭TCP 连接（四次挥手）

1、客户端发送FIN，主动提出，我客户端没有数据要发给你了"，但是如果你还有数据没有发送完成，则不必急着关闭Socket，可以继续发送数据。
2、服务器收到了之后，先发送ACK，告诉客户端，你的请求我收到了，但是我还没准备好关闭，我可能还有些东西要传给，请你继续等我的消息。（这个时候Client端就进入FIN_WAIT状态，继续等待Server端的FIN报文）
3、当服务器端确定数据已发送完成，则向客户端发送FIN报文，告诉客户端，好了，我这边数据发完了，准备好关闭连接了。
4、Client端收到FIN报文后，"就知道可以关闭连接了，但是他还是不相信网络，怕Server端不知道要关闭，所以发送ACK后进入TIME_WAIT状态，如果Server端没有收到ACK则可以重传。Server端收到ACK后，“就知道可以断开连接了”。Client端等待了2MSL后依然没有收到回复，则证明Server端已正常关闭，那好，我Client端也可以关闭连接了。Ok，TCP连接就这样关闭了！
在这里插入图片描述
为什么连接的时候是三次握手，关闭的时候却是四次握手？
答：因为三次握手的时候，当Server端收到Client端的SYN连接请求报文后，可以直接发送SYN+ACK报文。其中ACK报文是用来应答的，SYN报文是用来同步的。
但是四次挥手要关闭连接时，当Server端收到FIN报文时，很可能并不会立即关闭SOCKET，所以只能先回复一个ACK报文，告诉Client端，“你发的FIN报文我收到了”。只有等到我Server端所有的报文都发送完了，我才能发送FIN报文，因此不能一起发送。故需要四步握手。

HTTP状态码

MDN： https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status

HTTP 响应状态代码指示特定 HTTP 请求是否已成功完成。响应分为五类：

信息响应(100–199)，
成功响应(200–299)，
重定向(300–399)，
客户端错误(400–499)，
和服务器错误 (500–599)。

100 Continue 继续发
这个临时响应表明，迄今为止的所有内容都是可行的，客户端应该继续请求，如果已经完成，则忽略它。

2开头的状态码都表示请求被正确处理

200 OK 成功
状态码 200 OK 表明请求已经成功
不同请求方式的请求成功，它们的意义如下:
1、GET的请求成功: 已经取得资源，并将资源添加到响应的消息体中。
2、HEAD的请求成功: 响应的消息体为头部信息。
3、POST的请求成功: 响应的消息体中包含此次请求的结果。
4、TRACE的请求成功 : 响应的消息体中包含服务器接收到的请求信息。
PUT 和 DELETE 的请求成功通常并不是响应200 OK的状态码，而是 204 No Content 表示无内容(或者 201 Created表示一个资源首次被创建成功)。