在浏览器中输入网址到页面显示出来，这中间到底发生了什么？

在浏览器输入网址到页面显示，主要经历DNS查询、HTTP请求与响应、页面渲染及后续资源加载等阶段，具体过程如下：

• DNS查询，获取域名对应的IP

  检查本地hosts文件：浏览器首先会检查本地hosts文件，查看是否存在该网址的映射。若存在，则直接调用对应的IP地址，解析完成。

  查找本地DNS解析器缓存：若hosts文件中没有该网址的映射，浏览器会查找本地DNS解析器缓存。若缓存中存在该网址的映射，则直接返回映射结果，解析完成。

  查询本地DNS服务器：若本地DNS解析器缓存中也没有该网址的映射，浏览器会向本地DNS服务器发送查询请求。本地DNS服务器接收到查询时，会进行以下操作：

  本地配置区域资源查询：如果要查询的域名包含在本地配置区域资源中，本地DNS服务器会直接返回解析结果，查询结束。此解析具有权威性。

  服务器缓存查询：如果要查询的域名不由本地DNS服务器区域解析，但服务器缓存了此网址的映射关系，本地DNS服务器会返回解析结果，查询结束。此解析不具有权威性。

  本地DNS服务器失效时的处理：如果本地DNS服务器也失效，会根据是否采用转发模式进行不同的处理：

  迭代模式：本地DNS服务器把请求发至13台根DNS服务器。根DNS服务器收到请求后，判断域名（如.com）的授权管理方，并返回负责该顶级域名服务器的IP。本地DNS服务器继续向该顶级域名服务器IP发送请求，若该服务器无法解析，则找到负责该域名的下一级DNS服务器（如

  http://baidu.com
  ）的IP给本地DNS服务器，循环往复直至查询到映射，将解析结果返回本地DNS服务器，再由本地DNS服务器返回给客户机，查询完成。

  递归模式：本地DNS服务器把请求转发至上一级DNS服务器。若上一级DNS服务器不能解析，则继续向上请求。最终将解析结果依次返回本地DNS服务器，本地DNS服务器再返回给客户机，查询完成。

• 客户机发送HTTP请求报文

  应用层：客户端发送HTTP请求报文，包含请求方法（如GET、POST）、请求的URL、协议版本等信息。

  传输层：传输层将长数据切分成合适大小的数据段，并为每个数据段添加序号和校验和等信息，以确保数据的可靠传输。

  网络层：网络层根据IP地址进行路由选择，确定数据包从源主机到目标主机的传输路径。

  数据链路层：数据链路层将网络层传来的数据包封装成帧，添加帧头和帧尾信息，以便在物理网络上进行传输。

  物理层：物理层将数据帧转换为比特流，通过物理介质（如网线、光纤等）进行传输。

• 服务器端解析请求报文并发送HTTP响应报文

  服务器端接收到数据后，会按照物理层→数据链路层→网络层→传输层→应用层的顺序解析请求报文。

  服务器根据请求报文中的信息，进行相应的处理（如查询数据库、读取文件等），然后生成HTTP响应报文。

  响应报文包含状态码（如200表示成功、404表示未找到页面等）、响应头信息和响应体数据。

  服务器将响应报文按照与请求报文相反的顺序（应用层→传输层→网络层→数据链路层→物理层）发送回客户端。

• 客户端解析HTTP响应报文

  客户端接收到响应报文后，按照物理层→数据链路层→网络层→传输层→应用层的顺序解析响应报文。

  客户端根据响应报文中的状态码判断请求是否成功。若成功，则继续处理响应体数据；若失败，则根据状态码进行相应的错误处理。

• 浏览器开始显示HTML

  浏览器接收到HTML数据后，会对其进行解析，构建DOM树（文档对象模型树）。DOM树是HTML文档的内存表示，它描述了文档的结构和元素之间的关系。

  同时，浏览器还会解析HTML中的CSS样式信息，构建CSSOM树（CSS对象模型树）。CSSOM树描述了文档中元素的样式信息。

  浏览器将DOM树和CSSOM树合并成渲染树（Render Tree）。渲染树只包含需要显示的节点和它们的样式信息。

  浏览器根据渲染树进行布局（Layout），计算每个元素在页面中的位置和大小。

  最后，浏览器进行绘制（Painting），将渲染树中的元素绘制到屏幕上，显示出页面内容。

• 浏览器重新发送请求获取图片、CSS、JS的数据

  在解析HTML的过程中，如果遇到图片、CSS文件或JS文件等外部资源，浏览器会重新发送请求获取这些资源。

  每个资源的请求和响应过程与上述HTTP请求与响应过程类似。

  浏览器获取到这些资源后，会对其进行相应的处理（如解析CSS样式、执行JS代码等），并更新页面内容。

• 如果有AJAX，浏览器发送AJAX请求，及时更新页面

  AJAX（Asynchronous JavaScript and XML）是一种用于创建快速动态网页的技术。它允许浏览器在不重新加载整个页面的情况下，与服务器进行异步通信，获取数据并更新页面部分内容。

  当页面中有AJAX请求时，浏览器会发送异步请求到服务器。服务器接收到请求后，进行处理并返回响应数据。

  浏览器接收到响应数据后，通过JavaScript代码解析数据并更新页面内容，从而实现页面的局部刷新。