浏览器是如何工作的？

浏览器是如何工作的？

一、HTML解析和构建DOM树

HTML解析

通过状态机进行词法分析

构建DOM树

通过栈构建DOM树，开始标签入栈，结束标签出栈

二、在浏览器输入网页地址，按下回车键，发生了什么？

从输入一个 URL，到页面加载完成的所有步骤。

DNS 查找

我们在浏览器地址栏输入 URL 并回车之后，浏览器会进行 DNS 查找，把域名转换为真实的 IP 地址，根据 IP 地址找到提供网站内容的服务器。

TCP / TLS 握手

在找到服务器之后，浏览器会通过 TCP 握手机制跟服务器建立连接，而现在大部分服务器传输都是基于 HTTPS 协议的，那么会多一步 TLS 握手，建立加密的隧道，保证数据传输不被监听和篡改。

发送 HTTP 请求

建立了浏览器和服务器之间的链接之后，浏览器会发起 HTTP 或 HTTPS 请求，来获取服务器响应，一般对于网站来说，响应就是服务器会返回 HTML 网页代码。这里在接收服务器响应的时候，有一个 slow start 机制，受制于 TCP 连接的限制，浏览器会先收到前 14KB 的数据，后续才会慢慢增加传输速度，下载其它文件，所以对于服务器来说，能够在这 14KB 的数据里，完整的展现网站，就变得很重要了。

浏览器渲染过程

在收到 HTML 代码之后，浏览器开始渲染网页，这里一共有 5 步，这 5 步统称为关键渲染路径（Critical Rendering Path）。

1. 构建 DOM 树

第一步是解析 HTML 并构建 DOM 树，DOM 树是 HTML 文档在浏览器中的对象表示，可以使用 JavaScript 来操作它。浏览器在解析 HTML 的时候是顺序执行的，并且只有一个主线程负责解析，如果遇到

另外，浏览器有一个预扫描（Pre Scanner）线程，它会扫描 HTML 代码，提前把 css 文件、字体以及 js 文件下载下来，加速文件的下载，并且不影响主线程。

2. 构建 CSSOM 树

第二步是构建 CSSOM 树，CSSOM 是 CSS 在浏览器中的对象表示，也是树状结构。

3. 合并 DOM 和 CSSOM

第三步，浏览器会从 DOM 的根节点开始，合并 CSSOM 中的样式到每个节点中，形成一棵渲染树（Render Tree）。

4. 布局

第四步，生成渲染树之后，浏览器会根据样式，计算每个可见节点（没有设置 display 为 none 的节点）的宽高和位置等，对所有节点进行布局规划。对于像图片这样的节点，如果没有指定宽高，那么浏览器会先忽略它的大小，在图片加载完成之后，浏览器会根据图片的宽高和位置，再次计算受影响的节点的大小和位置，这个过程叫作回流（Reflow）。

5. 绘制

第五步，在第一次布局完成之后，浏览器会真正的把节点和节点的样式，例如背景、阴影、边框等绘制到屏幕上，这个要求过程必须要十分的快速，否则会影响动画和交互的性能。如果之前布局发生了【回流】，也就是加载了像图片这样的节点之后，浏览器还会发生重绘（Repaint），把变化的布局重新绘制到屏幕上。在绘制期间，也可能会有组合（Composition）发生，因为在渲染节点时，可能会产生新的图层，例如

交互

在上面五步完成之后，设置了 defer 或 async 的 JavaScript 文件开始加载并执行，完成之后整个网页就加载完成并可以和用户进行交互了。

小结

这个就是浏览器的工作原理，从输入一个 URL 到页面加载完成需要经过：DNS 查找、TCP/TLS 握手，发送 HTTP 请求，构建 DOM 树、构建 CSSOM 树、合并 DOM 和 CSSOM、布局、绘制这几大步骤。