从输入URL到页面加载完中间发生了什么？
从输入URL到页面加载完中间发生了什么？
当浏览器地址栏的 URL 发生变化时，通常会经历以下步骤：
-
用户输入或导航操作：用户在地址栏中输入新的 URL 或者通过点击链接、前进/后退按钮等进行导航操作。
-
URL 解析：浏览器会解析新的 URL，并将其拆分为不同的组成部分，包括协议（例如 http://）、域名、路径、查询参数等。
-
DNS 解析：如果 URL 中包含了域名部分，浏览器会将该域名发送给 DNS 服务器进行解析，以获取对应的 IP 地址。
-
建立连接：浏览器使用解析得到的 IP 地址建立与目标服务器的 TCP 连接。这个过程经历了 TCP 的三次握手，确保双方能够正常通信。
-
发送 HTTP 请求：浏览器向服务器发送一个 HTTP 请求，请求中包含了要获取的资源的信息，如请求方法（GET、POST 等）、路径、请求头、请求体等。
-
服务器处理请求：服务器接收到请求后，根据请求中的信息执行相应的处理逻辑。这可能涉及到服务器端的代码执行、数据库查询等操作。
-
返回响应：服务器处理完请求后，生成一个包含要返回给浏览器的资源的 HTTP 响应。响应中包含了状态码、响应头、响应体等信息。
-
接收响应：浏览器接收到服务器返回的响应，包括状态码、响应头和响应体等内容。
-
渲染页面：浏览器根据接收到的响应内容，对页面进行渲染。这包括解析 HTML、CSS 和 JavaScript，构建 DOM 树、渲染页面布局和执行 JavaScript 代码等。
-
显示页面：最终，浏览器将渲染好的页面显示给用户，并开始处理用户的交互事件。
大概的流程就是输入了一个域名，先去检查本地的hosts文件，看看是否有域名映射关系，如果没有的话，通过DNS解析找到域名对应的服务器地址，通过TCP请求链接服务器，再通过WEB服务器返回资源，浏览器根据返回的资源构建DOM树，再把css形成一个样式表，这两个东西结合，百年成了render树，render树上，绘制节点位置坐标，页面上通过重绘和回流的过程，渲染出页面。
DOM 树
DOM 树是由 HTML 文档生成的树形结构，它表示页面的内容和结构。每个节点对应一个 HTML 元素、属性或文本。
- 生成：浏览器解析 HTML 文件，逐步生成 DOM 树。
- 结构：包括所有的 HTML 标记，例如
<html>,<body>,<div>,<p>等等。 - 操作：可以通过 JavaScript 操作 DOM 树来动态更新页面内容。
示例
<!DOCTYPE html>
<html><head><title>Sample Page</title></head><body><div id="container"><p>Hello World!</p></div></body>
</html>对应的 DOM 树结构：
Render 树
Render 树是由 DOM 树和 CSSOM（CSS Object Model）树共同生成的，表示页面的可视化结构。每个节点都是一个将被渲染到屏幕上的可视化元素。
- 生成：浏览器将 DOM 树与 CSSOM 树结合起来，构建一个仅包含可见元素的 Render 树。
- 结构：仅包含那些会影响页面布局和外观的元素，不包括不可见的元素（例如
display: none）。 - 操作：Render 树用于计算布局（layout）和绘制（paint）页面。
示例
延续前面的示例，假设以下 CSS：
#container { display: none; }
那么，Render 树将不包含 #container 的内容，因为它被设置为 display: none：
html
└── body
关键区别
-
组成部分：
- DOM 树：包含所有的 HTML 节点，包括不可见的节点。
- Render 树：只包含那些对页面可视化有影响的节点。
-
目的：
- DOM 树：用于表示文档的内容和结构，并且可以被 JavaScript 操作。
- Render 树：用于计算页面布局和进行绘制操作。
-
生成时机：
- DOM 树：在浏览器解析 HTML 时生成。
- Render 树：在解析完 DOM 和 CSS 后生成，用于后续的布局计算和绘制。