ip和DNS
ip地址是标识网络设备的唯一地址，用来在互联网上定位和通信。每一台设备及服务器都有一个ip地址，在浏览器输入的网址对应的就是服务器的ip地址，根据ip地址才能和正确的服务器建立连接进行访问。
而对于我们电脑，手机，等设备不可能将世界上所有网站ip都记住，为了解决这个问题，就诞生了DNS（Domain Name System）即域名系统。它的作用就是将我们熟悉的域名（如：www.bilibili.com) 转换与之对应的ip地址。当我们正常使用域名访问网站时，就是通过网络将域名交给DNS服务器去获取相对应的服务器的ip地址，然后设备再根据获取到的ip地00
ip地址目前主要分为两种ipv4和ipv6，每一种又分为公网ip和内网ip。他们的区别和作用可点击链接观看视频进行了解。如果你想了解DNS的发展历程、根服务器的重要性以及DNS和IP路由选择的关系可参考这篇文章
TCP握手
一旦获取到服务器 IP 地址，浏览器就会通过TCP“三次握手”与服务器建立TCP连接。这个机制的是用来让两端尝试进行通信——在浏览器和服务器通过上层协议 HTTPS 发送数据之前，可以协商网络 TCP 套接字连接的一些参数。
TCP的三次握手技术被称为SYN-SYN-ACK即为SYN、SYN-ACK、ACK
- SYN（Synchronize）:客户端（例如浏览器）向服务器发送一个SYN（同步序列编号）包。这个包包含一个初始序列号
（Sequence Number，简称SEQ），用来标识客户端将要发送的数据的顺序。请求服务器连接，并告诉服务器客户端的初始序列号。 - SYN-ACK（Synchronize-Acknowledge）:服务器收到客户端的SYN包后，向客户端发送一个SYN-ACK包。这个包中包含服务器的初始序列号，以及对客户端SYN包的确认号
（Acknowledgment Number，简称ACK），表示服务器已经收到并确认了客户端的SYN包。确认收到客户端的连接请求，并告诉客户端服务器的初始序列号。 - ACK（Acknowledge）:客户端收到服务器的SYN-ACK包后，向服务器发送一个ACK包。这个包中包含客户端的下一个序列号，以及对服务器SYN包的确认号，表示客户端已经收到并确认了服务器的SYN-ACK包。确认收到服务器的SYN-ACK包，表示客户端和服务器之间的连接已经成功建立。
TLS协商
对于通过HTTPS建立的加密安全链接需要额外一次握手，即为TLS协商，以此来决定使用哪种密码对通信进行加密,验证服务器，并在开始实际数据前建立安全连接。这就需要在发送实际内容前再往返服务器五次，基本过程如下：
- 客户端发送ClientHello到服务器
- 服务器发送ServerHello、ServerCertificate、ServerKeyExchange（如果需要）、ServerHelloDone到客户端
- 客户端发送ClientKeyExchange、ChangeCipherSpec、Finished到服务器
- 服务器发送ChangeCipherSpec、Finished到客户端
前端网页工作原理
一个网页骨架一般有：
- 编写网页标签：html文件
- 设置界面样式：css文件
- 处理页面交互，与后端通信：javascript文件
浏览器加载网页
在输入网址后，浏览器根据网址的协议，域名，端口与服务器建立连接，之后服务器会根据路径部分与查找对应的网页资源并将其发送给浏览器，前面提到过，浏览器接收到html文件后，会进行解析处理，浏览器接受和处理html文件是流式的，也就是说，浏览器每接收到一部分内容就会处理一部分内容
HTML标签的一对一结构（即成对标签）并不是特意为了便于流式处理而设计的。主要目的是为了保持文档的结构清晰和语义明确。然而，这种结构确实有助于浏览器实现流式处理。如：
<h1>Hello, World!</h1> <p>This is an example of streaming HTML processing.</p>浏览器在接收到
<h1>标签时，就会立即开始渲染这个标签的内容，而不需要等待整个HTML文档的传输完成。如果某个标签没有正确闭合，浏览器可以根据上下文进行合理的猜测和修正，以确保页面尽可能正确地渲染。
当发现html文件需要下载其他资源时包括css，js，图片等等，浏览器会发起异步下载，直到所有资源全部加载完。
浏览器显示网页
浏览器显示网页主要有五步：构建Dom树 $\Rightarrow$ 构建CSSOM树 $\Rightarrow$ 生成渲染树 $\Rightarrow$ 布局处理 $\Rightarrow$ 绘制
- 构建DOM树:浏览器解析html文档，生成DOM树，表示页面内容和结构
- 构建CSSOM树:由CSS解析器生成，储存CSS样式规则及其目标元素
- 生成渲染树:将DOM树和CSSOM树结合生成渲染树，用于表示需要再屏幕上显示的所有可见的元素及其样式
- 布局处理:根据渲染树来布局以计算每个节点的几何信息
- 绘制:将各个节点渲染到屏幕上
CSS文件会影响渲染树的构建，CSS文件一般放在html文件的头部引用即(
)，浏览器可以在渲染页面内容之前获取并应用样式，这样可以有效避免网页在一瞬间混乱、闪烁的情况
JavaScript脚本可以修改页面的元素，这类操作被称为DOM操作，当DOM树数据被修改后，以上提到的网页显示过程就会重新执行一遍。
JavaScript脚本一般放在html文件的尾部，浏览器会在解析到
<script>标签时暂停渲染页面，下载并执行脚本，然后继续解析和渲染页面。如果你把 JavaScript 脚本放在 HTML 的<head>部分，页面渲染会被阻塞直到脚本执行完毕。使用
defer属性的脚本会在文档完全解析和渲染完成后再执行。使用async属性的脚本会在脚本文件下载完成后立即执行，浏览器渲染过程不会被阻塞
后端工作原理
-
客户端发送的请求(get,post等)，服务器（通常是运行在远程计算机上的 Web 服务器软件，如 Apache、Nginx 或 IIS）接收客户端的请求。
-
服务器通过配置文件（如Nginx的配置文件）或通过Web框架(如java的springboot，go的gin)请求路由到相应的后端应用程序。
-
请求可能会通过一系列的中间件进行解析请求数据，管理用户会话，身份验证等操作
-
请求到达对应的控制器或处理程序后，程序会执行相对应的业务逻辑，如：验证用户输入，查询数据库，调用外部API等
-
操作数据库，大部分后端引用程序都要与数据库进行交互，后端应用程序使用数据库驱动或 ORM（对象关系映射）来查询、插入、更新或删除数据库中的数据。
-
处理完请求后后端程序生成响应[1]并通过服务器发送给客户端，客户端接收到的响应如果是html页面，浏览器就会执行上面所提到解析渲染页面操作。
TCP四次挥手
**TCP 四次挥手（four-way handshake）**是 TCP/IP 协议中用于关闭连接的过程。它通过四个步骤确保双方都能够优雅地关闭连接，保证所有数据都被正确地接收和发送。
- 第一次挥手:客户端发送一个
FIN（Finish）报文段给服务器，表示客户端不再发送数据，但仍然可以接收数据。之后客户端进入FIN_WAIT_1状态
FIN标记位被设置为1，1表示为FIN，0表示不是，FIN报文中会指定一个序列号
- 第二次挥手:服务器收到客户端的 FIN 报文后，发送一个
ACK（Acknowledgment）应答报文段给客户端，确认收到关闭请求。此时服务器还可以继续发送数据给客户端。接着服务器进入CLOSE_WAIT(等待关闭)状态,此时TCP处于半关闭状态。客户端收到来自服务器的ACK应答报文段后，进入FIN_WAIT_2状态。
客户端的FIN报文的序列号 seq+1 作为ACK应答报文段的****确认序列号ack = seq+1 = u + 1****
- 第三次挥手:服务器也打算断开连接，向客户端发送连接释放
(FIN)报文段，之后服务器进入LAST_ACK(最后确认)状态，等待客户端的确认。
服务器的连接释放(FIN)报文段的FIN=1，ACK=1，序列号seq=m，确认序列号ack=u+1
- 第四次挥手:客户端收到服务器的 FIN 报文后，发送一个
ACK 应答报文段给服务器，确认关闭连接。此时客户端进入 TIME_WAIT 状态，等待一段时间以确保服务器收到 ACK 报文，然后彻底关闭连接。
以连接释放(FIN)报文段的确认序号 ack 作为ACK应答报文段的序列号 seq，以连接释放(FIN)报文段的序列号 seq+1作为确认序号ack。
客户端发送最后一个 ACK 报文段后进入 TIME_WAIT 状态，并等待
2 倍的最大报文段生存时间（2MSL，Maximum Segment Lifetime）。这样做是为了确保服务器收到了客户端的 ACK 报文段。如果服务器没有收到 ACK 报文段，会重新发送 FIN 报文段，客户端在此期间可以重新发送 ACK 报文段。。
TCP四次挥手详解可参考文章TCP四次挥手详解
-
响应通常包含：HTTP 状态码（如 200 OK、404 Not Found、500 Internal Server Error）。响应头（如内容类型、缓存控制）。响应主体（如 HTML 页面、JSON 数据）。 ↩︎