在地址栏里输入一个URL，到这个页面呈现出来，中间会发生什么？

最新推荐文章于 2023-04-18 11:21:50 发布

易安sparkle

最新推荐文章于 2023-04-18 11:21:50 发布

阅读量1.9k

点赞数 6

分类专栏：浏览器前端碎片文章标签：浏览器

本文链接：https://blog.csdn.net/weixin_43675447/article/details/98117332

版权

前端碎片同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

浏览器

7 篇文章 0 订阅

订阅专栏

一、DNS域名解析

根据输入的 URL 域名找到真实 IP 地址，在查找的过程中，浏览器首先会寻找缓存，查看缓存中是否有记录，缓存的查找记录为：

浏览器缓存-》操作系统缓存-》路由器缓存；
缓存中没有则查找系统的hosts文件中是否有记录；
如果没有则查询DNS服务器，首先从顶级域名（一般顶级域名已经在缓存中了），再到二级域名，以此类推。

二、建立TCP连接

根据 IP 地址，客户端与服务端进行三次握手，建立连接。

为了准确无误地把数据送达目标处，TCP采用了三次握手策略：用TCP把数据包发送出去后，TCP不会对传送后的数据置之不理，它一定会向对方确认是否成功送达

发送端首先给接收端发送一个带SYN标志的数据包。
接收端收到后，回传一个带有SYN/ACK标志的数据包以表示正确传达，并确认信息。
最后，发送端再回传一个带ACK标志的数据包，代表“握手”结束。

注：

握手过程中使用了TCP的标志，即SYN和ACK
若在握手过程中的某个阶段莫名中断，TCP会再次以相同的顺序发送相同的数据包

三、传输数据

连接后，客户端向服务端发起 HTTP 请求，服务器接收到请求后，返回请求静态资源，并同时调用 apache 服务器请求接口数据。

注：得到服务器的IP 地址后，浏览器根据这个IP 以及相应的端口号，构造一个HTTP 请求，这个请求报文会包括这次请求的信息，主要是请求方法，请求说明和请求附带的数据，并将这个HTTP 请求封装在一个TCP包中，这个TCP包会依次经过传输层，网络层，数据链路层，物理层到达服务器。

四、关闭TCP连接

数据传输完成，客户端与服务端进行四次挥手，关闭连接。

断开一个TCP连接则需要“四次挥手”：

第一次挥手：主动关闭方发送一个FIN，用来关闭主动关闭方到被动关闭方的数据传送，也就是主动关闭方告诉被动关闭方，主动关闭方已经不会再给被动关闭方发送数据了（当然，在FIN包之前发送出去的数据，如果没有收到对应的ACK确认报文，主动关闭方依然会重发这些数据），但是，此时主动关闭方还可以接收数据。
第二次挥手：被动关闭方收到FIN包后，给对方发送一个ACK，确认序号为收到序号+1（与SYN相同，一个FIN占用一个序号）。
第三次挥手：被动关闭方发送一个FIN，用来关闭被动关闭方到主动关闭方的数据传送，也就是告诉主动关闭方，被动关闭方的数据也发送完了，不会再给主动关闭方发送数据了。
第四次挥手：主动关闭方收到FIN后，给被动关闭方发送一个ACK，确认序号为收到序号+1，至此，完成四次握手。

五、渲染页面

对于浏览器根据服务端返回的静态资源，浏览器使用 Native GUI 引擎渲染 HTML 和 CSS ；使用 JS 引擎加载 JS 。

将 HTML 节点解析成 DOM 树结构

在DOM树的构建过程中如果遇到JS脚本和外部JS连接，则会停止构建DOM树来执行和下载相应的代码，这会造成阻塞，这就是为什么推荐JS代码应该放在html代码的后面。
从 HTML 字节码到 DOM 树结构的流程：字节(Bytes) => 字符串(Characters) => Tokens => 节点(Nodes) => DOM
计算机只能识别0和1的字节，根据字节的编码规则将字节转换成字符串，再将字符串转化为 W3C 定义的各种标签，生成 tokens（令牌），匹配字符串，将 tokens 按照规则转换为包含属性和规则的节点对象（nodes）,根据每个节点的层次关系（父子节点关系）和规则转换为直观的树形结构。HTML 是增量构建的，在 HTML 文件还在传输时，这个转换过程就已经开始了。最终得到完整的 DOM(Document Object Module文档对象模型)

将 CSS 解析成 CSSOM 规则树

这里主要做的是排除非视觉节点，比如script，meta标签和排除display为none的节点；有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系
CSS 构建的过程跟 DOM 差不多，只不过 CSS 会涉及到复杂的计算，如 CSS 的属性来源，匹配不同的类（id 或者 class）,确认复写规则及权重，最后确定每个节点的样式值，形成 CSSOM(CSS Object Module CSS对象模型)。

将 DOM 与 CSSOM 组合成 Render-tree（渲染树）
布局：计算出每个节点在屏幕中的位置
绘制：即遍历render树，并使用UI后端层绘制每个节点

六、加载 JavaScript 脚本

虽然 HTML\CSS 与 JS 是通过不同的引擎加载，但是却是互斥的，即加载 HTML\CSS 时，JS 会停止加载，相反亦然，这是因为 JS 引擎可以操作 DOM，改变样式、内容等。所以当执行了 JS 之后，渲染树要重新构建。

当然在这些所有的请求中我们还需要关注的就是缓存，缓存一般通过Cache-Control、Last-Modify、Expires等首部字段控制。 Cache-Control和Expires的区别在于Cache-Control使用相对时间，Expires使用的是基于服务器端的绝对时间，因为存在时差问题，一般采用Cache-Control，在请求这些有设置了缓存的数据时，会先查看是否过期，如果没有过期则直接使用本地缓存，过期则请求并在服务器校验文件是否修改，如果上一次响应设置了ETag值会在这次请求的时候作为If-None-Match的值交给服务器校验，如果一致，继续校验 Last-Modified，没有设置ETag则直接验证Last-Modified，再决定是否返回304

理解版：

当发送一个URL请求时，不管这个URL是Web页面的URL还是Web页面上每个资源的URL，浏览器都会开启一个线程来处理这个请求，同时在远程DNS服务器上启动一个DNS查询。这能使浏览器获得请求对应的IP地址。
浏览器与远程服务器通过TCP三次握手协商来建立一个TCP/IP连接。该握手包括一个同步报文、一个同步-应答报文和一个应答报文，这3个报文在浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，然后服务器应答并接受客户端的请求，最后由客户端发出已经接受该请求的报文。
一旦TCP/IP连接建立，浏览器会通过该连接向远程服务器发送HTTP的GET请求。远程服务器找到资源并使用HTTP响应返回该资源，值为200的HTTP响应状态码表示一个正确的响应。
此时Web服务器提供资源服务，客户端开始下载资源。请求返回后，便进入了浏览器端模板。浏览器会解析HTML生成DOM树，其次会根据CSS生成CSS规则树，而JavaScript又可以根据DOM API操作DOM。