浏览器输入地址后，执行了什么？_前端地址栏点击后执行的、-优快云博客

本文链接：https://blog.youkuaiyun.com/hkduan/article/details/113448591

本文详细阐述了浏览器如何通过DNS解析域名、HTTP请求过程、DOM/CSSOM构建、渲染树生成，以及最终页面的呈现，揭示了从输入地址到完整显示的完整链条。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

浏览器输入地址后，执行了什么？

应用层使用DNS解析域名，得到目标IP地址。接下来就通过DNS查找目标IP获取内容，如果本地存有这个的IP，则直接使用；如果没有，则会向上级DNS服务器请求帮助，直至获得目标IP的内容。DNS域名解析详细过程在下文中讲解。`DNS域名解析的查找过程主要有以下几个步骤：

1.1.浏览器缓存- 浏览器会缓存DNS记录一段时间

1.2.系统缓存- 若在浏览器中没有找到需要的记录，浏览器会做一个系统调用，利用gethostbyname，获得系统的缓存中的记录

1.3.路由器缓存- 若系统缓存没有，则会将查询请求发送至路由器，它一般会有自己的DNS缓存。

1.4.ISP DNS缓存- 接下来要check的就是ISP缓存DNS的服务器，在这一般能找到相应的缓存记录。

1.5.递归搜索- 你的ISP的DNS服务器从根域名服务器开始进行递归搜索

应用层将请求的信息装载入HTTP的请求报文（向下封装过程），包含了请求首行（方法+url）+请求头（+空行）+请求主体，然后由应用层发起这个HTTP请求。
传输层接收到应用层传递下来的数据，并分割成以报文段为单位的数据包进行管理，并为它们编号，方便服务器接收时能准确地还原报文信息。通过三次握手和目标端口建立安全通信。
网络层接收传输层传递的数据，进行路由（IP查找目标网络+ARP查找目标主机），即根据IP通过ARP协议获得目标计算机物理地址—MAC。当通信的双方不在同一个局域网时，需要多次中转才能到达最终的目标，在中转的过程中需要通过下一个中转站的MAC地址来搜索下一个中转目标。
找到目标MAC地址以后，就通过数据链路层将数据发送到服务器端，这时才开始真正的传输请求信息，传输完成以后请求结束。
服务器接收数据后，从下到上层层将数据解包分离，直到应用层。
在服务器上查找客户端请求的资源，将数据装载入HTTP响应报文并原路返回，响应报文中包括一个重要的信息——状态码，如200,404,500。

1xx（临时响应）
2xx （成功）
3xx （重定向）
4xx（客户端请求错误）
5xx（服务器错误）

浏览器接收到报文内容查看状态码。200的话就根据响应报文内容解析并渲染页面，其他状态码的话展示相应错误。
释放TCP连接，此次请求完成。

————————————————

浏览器主要发送HTTP请求，接收HTTP响应，然后然后进行渲染，展示到界面。下面是4的详细内容：

		先来个列表总结一下，后面慢慢展开。
		1. 使用HTML创建文档对象模型（DOM）
		2. 使用CSS创建CSS对象模型（CSSOM）
		3. 基于DOM & CSSOM执行脚本（Scripts）
		4. 合并DOM & CSSOM形成渲染树（RenderTree）
		5. 使用渲染树布局所有元素（Layout）
		6. 渲染所有元素（Paint）

在这里插入图片描述

创建DOM
DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构，定义了一组接口，利用接口可以对DOM树进行操作。
在这一阶段，HTML解释器将网络或者磁盘读取的HTML网页和资源从字节流解码成字符流，通过词法分析器解释成词语，再通过语法分析器构建成节点，最后这些节点被构建成DOM树。

（浏览器中HTML解释器可以利用单独的线程来解释HTML文档的。当字节流通过IO线程传递给渲染线程后，渲染线程负责解释、布局和渲染等工作。DOM树也是在渲染线程上创建和访问的，即DOM树的构建过程只能在渲染线程。但是从字符串到词语这个阶段可以交给单独的线程来处理。）

构建CSSOM
CSSOM提供了一些方法可以让开发者自定义一些脚本去操作CSS状态，基本思想是在DOM中的一些节点接口中，加入获取和操作CSS属性的JS接口。即DOM提供接口让JS修改HTML文档，CSSOM提供接口让JS获得和修改CSS代码设置的样式信息。
CSS解释过程是指CSS字符串经过CSS解释器处理后变成渲染引擎的内部规则的过程。CSS解释器工作在DOM树建立之后，RenderObject树建立之前。CSS解释器解释后的结果会保存起来，然后RenderObject树基于这个结果来进行规范匹配和布局计算。
执行script
在第一步的HTML解释器的工作过程中，会有JS的代码需要执行，它发生在将字符串解释成词语后、创建节点时。这也是为什么有时候JS代码不能访问DOM的原因，因为这时候DOM树还没有创建。
构建Render树
在DOM和CSSOM构建完成后，就需要为DOM构建RenderObject树。
RenderObject树是基于DOM构建的树，是为了布局计算和渲染等机制而构建的一种内部表示。一个RenderObject对象保存了为了绘制DOM节点所需要的各种信息如样式布局信息。
RenderLayer树是基于RenderObject树建立的树，每个RenderLayer对象可以想象成图像的一个层，各层一起构成一个图像。
布局
创建RenderObject之后，每个对象是不知道自己的大小位置信息的，浏览器引擎根据盒模型来计算他们的大小位置信息，这个过程称为布局计算，它的基础是盒模型，从外到内依次是margin、border、padding、content。布局计算是一个递归的过程，因为需要先计算子节点的位置和大小等信息。