五分钟快速了解浏览器的工作原理

概述

        开发者为了让页面内容快速快速加载且流畅交互，了解浏览器的工作原理已成为必不可少，导致 Web 性能问题的原因主要有两种，一是网络延迟，二是大部分情况下的浏览器单线程执行。

主要步骤

 DNS查找 —— 建立连接 —— 发起请求并获取响应 —— 渲染网页 ——执行JavaScript ——

回流与重绘 

浏览器的主要步骤主要就是分为这几类，在此之前我们大致熟悉下浏览器的进程与线程。

进程是cpu资源分配的最小单位（是能拥有资源和独立运行的最小单位），线程是cpu调度的最小单位（线程是建立在进程的基础上的一次程序运行单位），你可以理解整个计算机资源就是属于一整个工业园，而进程就是每个工业园中的各个厂区，进程则可以理解为工厂中的每条流水线，下图可帮助理解，详细想要了解浏览器线程与进程之间的关系——传送门

DNS查找

       当用户输入一个URL并回车后，浏览器会首先进行DNS查找，将输入的域名转化为真实的IP地址，然后根据这个IP地址找到提供网站内容的服务器。浏览器向域名服务器发起 DNS 查询请求，最终得到一个 IP 地址。第一次请求之后，这个 IP 地址可能会被缓存一段时间，在此时间段内在此发起该服务器请求时，就将不会进行DNS查询。

每个主机名 (hostname) 在页面加载时通常只需要进行一次 DNS 查询。但是，在同一个网页中，如果资源（如字体、图像、脚本、广告、网站统计等）托管在不同的服务器（具有不同的主机名或域名），那么浏览器就需要对每个不同的主机名进行单独的DNS查询。

建立连接

浏览器通过TCP握手机制与服务器建立连接。现在大部分的服务器连接都基于HTTPS协议，因此会多一步TLS握手，建立加密的隧道，以保证数据不被监听和篡改。

TCP握手

一旦获取到服务器 IP 地址，浏览器就会通过TCP“三次握手”与服务器建立连接。这个机制的是用来让两端尝试进行通信——在浏览器和服务器通过上层协议 HTTPS 发送数据之前，可以协商网络 TCP 套接字连接的一些参数。

TLS协商

对于通过 HTTPS 建立的安全连接，还需要另一次 "握手"。这种握手，或者说 TLS 协商，决定使用哪种密码对通信进行加密，验证服务器，并在开始实际数据传输前建立安全连接。这就需要在实际发送内容请求之前，再往返服务器五次。

发起请求并获取响应

建立连接后，浏览器会发起HTTP（S）请求，来获取服务器响应。对于网页来说，响应通常就是服务器返回的HTML代码，通俗的理解就是客户端发起https请求之后，服务端会生成一个html文件返回给客户端。

渲染网页

解析HTML并构建DOM树

浏览器会解析HTML代码，并构建DOM（文档对象模型）树。DOM树是HTML文档在浏览器中的对象表示，可用JavaScript来操作。解析过程是顺序执行的，并且只有一个主线程进行解析。如果在解析过程中遇到<script>标签，主线程会暂停，等待执行完其中的代码后再继续解析HTML。

构建CSSOM树

CSSOM（CSS对象模型）是CSS在浏览器中的对象表示。浏览器会解析CSS代码并构建CSSOM树。

形成渲染树

浏览器从根节点开始，将CSSOM中的样式合并到DOM中的每个节点上，形成渲染树（Render Tree）。

渲染页面

基于渲染树，浏览器开始渲染页面。对于图片、CSS文件或设置了async/defer的JavaScript文件，它们会异步加载，不会影响主线程的解析和渲染。

执行JavaScript

浏览器的工作原理中，执行JavaScript（通常简称为JS）是一个重要的步骤，它通常发生在DOM树构建完成、CSSOM树也构建完成，并且两者被合并形成渲染树（Render Tree）之后。但实际上，JavaScript的执行可以发生在页面加载的多个阶段，并且可能会阻塞页面的渲染。

回流与重绘

回流

回流也被称为重排（relayout），它是指浏览器需要重新计算页面元素的位置和大小，然后重新布局的过程。当某些操作导致页面中的元素尺寸、位置或布局发生变化时，就会触发回流。这些操作包括但不限于：

• DOM元素的几何属性变化，如元素的宽度、高度、位置等。
• DOM树的结构变化，如添加或删除可见的DOM元素。
• 浏览器窗口大小调整。
• 元素的数量或内容发生改变1。
• CSS的样式发生变化，尤其是影响元素位置或大小的属性1。

回流是一个相对耗时的过程，因为它涉及到布局计算。在回流过程中，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树。完成回流后，浏览器会重新绘制受影响的部分到屏幕中，这个过程称为重绘。

重绘

重绘是指浏览器将计算好的元素样式应用到页面上的过程。当某些操作只影响元素的外观、风格而不影响布局时，就会触发重绘。这些操作通常包括改变元素的背景色、文字颜色、边框颜色等。

与回流相比，重绘通常是一个更轻量级的过程，因为它只涉及到元素的外观更新而不涉及布局计算。然而，如果频繁触发重绘或回流，仍然会对浏览器的性能产生负面影响。