浏览器的工作原理是什么？

​

无论是在面试中，或者优化网站性能上，了解浏览器的工作原理都是非常重要的，这个视频将宏观的介绍：从输入一个 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）。

一、构建 DOM 树

第一步是解析 HTML 并构建 DOM 树，DOM 树是 HTML 文档在浏览器中的对象表示，可以使用 JavaScript 来操作它。 浏览器在解析 HTML 的时候是顺序执行的，并且只有一个主线程负责解析，如果遇到 <script /> 标签，那么浏览器会加载 javascript 文件并执行里边的代码，这个时候主线程会暂停解析 HTML，只有 js 代码执行完之后才会继续。对于图片和 CSS 等文件，或者设置了 defer 或 async 的 script 标签，它们不会影响主线程，而是会异步的加载。

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

二、构建 CSSOM 树

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

三、合并 DOM 和 CSSOM

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

四、布局

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

五、绘制

第五步，在第一次布局完成之后，浏览器会真正的把节点和节点的样式，例如背景、阴影、边框等绘制到屏幕上，这个要求过程必须要十分的快速，否则会影响动画和交互的性能。 如果之前布局发生了【回流】，也就是加载了像图片这样的节点之后，浏览器还会发生重绘（Repaint），把变化的布局重新绘制到屏幕上。 在绘制期间，也可能会有组合（Composition）发生，因为在渲染节点时，可能会产生新的图层，例如 标签，或者设置了 opacity、will-change、transform 等属性的节点，浏览器还得把这些图层组合起来，按正确的堆叠顺序渲染，同样的，回流和重绘操作也会引发重新组合操作。

交互

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

小结

好了，这个就是浏览器的工作原理，从输入一个 URL 到页面加载完成需要经过：DNS 查找、TCP/TLS 握手，发送 HTTP 请求，构建 DOM 树、构建 CSSOM 树、合并 DOM 和 CSSOM、布局、绘制这几大步骤，实际情况下这里面还有很多边界情况，并且具体的算法也特别复杂，如果有兴趣，可以继续研究。

这一课你学会了吗？如果有帮助请三连，想学更多有用的前端开发知识，请关注峰华前端工程师，感谢观看！