浏览器从输入url到页面展示的过程

梦幻空花~

已于 2023-08-09 19:17:57 修改

阅读量106

点赞数

文章标签：服务器网络 tcp/ip

于 2023-04-11 22:23:32 首次发布

本文链接：https://blog.csdn.net/qq_38868959/article/details/130094497

版权

过程概括：

域名解析
建立TCP连接
发送HTTP请求
服务器处理请求并返回结果
关闭TCP连接
浏览器解析渲染页面

过程解析：

1.DNS域名解析

在这里插入图片描述

在网络中定位是依靠 IP 进行身份定位的，所以 URL 访问的第一步便是先要得到服务器端的 IP 地址。DNS 域名解析就是通过 URL 找到与之相对应的 IP 地址。
PS：为什么不直接访问 IP 地址来请求服务器？因为 IP 地址很长，不方便记忆，而 URL 地址好记很多，所以会使用 URL 来替代 IP 地址，而 URL 就像 IP 地址的别名一样，用它可以定位到相应的 IP 地址。就好比https://www.baidu.com/对应得ip为14.119.104.254:443。记忆baidu肯定比记忆那一长串ip数字好记的多。
域名解析查找过程：浏览器中的DNS 缓存-系统缓存(主要是hosts文件)-路由器缓存-IPS服务器缓存，根域名服务器缓存，顶级域名服务器缓存，主域名服务器缓存。

2.建立tcp连接

3 次握手就是为了验证客户端和服务器端的发送能力和接收能力，就像打电话一样，通常的通话是这样开头的：

我：喂，能听到吗？
对方：能听到，你能听到吗？（证明了对方的接收能力和我的发送能力）
我：我也能听到，咱们聊正事吧。（证明了对方的发送能力和我的接收能力）

3.发送HTTP请求

浏览器发起读取文件的HTTP请求，该请求报文作为TCP三次握手的第三次数据发送给服务器

4.服务器响应请求并返回结果：

服务器对浏览器请求做出响应，并把对应的html文件发送给浏览器.

协商缓存和强缓存的区别：

协商缓存每次都要发起请求，然后服务器判断资源是否更新，如果没有更新则直接返回304，如资源更新了则直接返回资源，与cache-control:no-cache搭配使用。
强缓存则不需要每次都发起请求，通过expire或者max-age判断缓存是否失效，不失效则直接使用。

5.关闭TCP连接：

通过四次挥手释放TCP连接；前两次挥手用于关闭一个方向的数据通道，后两次挥手用于关闭另外一个方向的数据通道。

四次挥手过程:

客户端：我已经关闭了向你那边的主动通道了，只能被动接收了
服务端：收到通道关闭的信息
服务端：那我也告诉你，我这边向你的主动通道也关闭了
客户端：最后收到数据，之后双方无法通信

四次挥手原因:

TCP协议是一种面向连接的、可靠的、基于字节流的运输层通信协议。TCP是全双工模式，这就意味着，当客户端发出FIN报文段时，只是表示客户端已经没有数据要发送了，客户端告诉服务器，它的数据已经全部发送完毕了；但是，这个时候客户端还是可以接受来自服务端的数据；当服务端返回ACK报文段时，表示它已经知道客户端没有数据发送了，但是服务端还是可以发送数据到客户端的；当服务端也发送了FIN报文段时，这个时候就表示服务端也没有数据要发送了，就会告诉客户端，我也没有数据要发送了，之后彼此就会愉快的中断这次TCP连接。

6.浏览器渲染：

客户端（浏览器）解析HTML内容并渲染出来，浏览器接收到数据包后的解析流程为：
1.构建DOM树：词法分析然后解析成DOM树（dom tree），是由dom元素及属性节点组成，树的根是document对象
2.构建CSS规则树：生成CSS规则树（CSS Rule Tree）
3.构建render树：Web浏览器将DOM和CSSOM结合，并构建出渲染树（render tree）
4.布局（Layout）：计算出每个节点在屏幕中的位置
5.绘制（Painting）：即遍历render树，并使用UI后端层绘制每个节点。
页面变化会导致：重排和重绘
.reflow（回流or重排）：当页面元素的大小，位置发生改变就会发生重排。
7.repaint（重绘）：改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸没有变，只需要重新走第五步。
[重绘』不一定会出现『重排』，『重排』必然会出现『重绘』
在这里插入图片描述