【阿里前端面试题】浏览器的加载渲染过程，超详细，建议关注收藏

前言

   大家好，接下来我会出一期《阿里前端面试题》系列文章。每篇文章只详细讲解一个面试题。尽量让大家在10分钟左右看完一遍，在不耽误大家时间的前提下，既能完善自己的技术体系和面试能力，又可以增加工作技能。每天进步一点。日积月累，有朝一日定会厚积薄发。

浏览器的加载渲染过程

     浏览器的渲染过程，也被称为“页面渲染流程”或“页面加载流程”，是指从用户输入网址到浏览器显示出完整的网页内容的一系列步骤。这个过程可以大致分为以下几个阶段：

1. 解析输入的URL：浏览器首先解析用户输入的URL（统一资源定位器），确定要访问的网页地址。

2. DNS查询：如果浏览器不知道服务器的IP地址，它会进行DNS（域名系统）查询，将域名解析为IP地址

3. 建立连接：浏览器使用IP地址与服务器建立连接，通常是通过TCP（传输控制协议）。

4. 发送HTTP请求：一旦连接建立，浏览器发送一个HTTP（超文本传输协议）请求到服务器，请求网页内容。

5. 服务器响应：服务器接收到请求后，会返回所请求的网页资源，通常是HTML文档。

6. 解析HTML：浏览器开始解析HTML文档，构建DOM（文档对象模型）树，这是页面结构的基础。

7. 解析CSS：浏览器解析CSS样式表，并将样式应用到DOM树上，构建CSSOM（CSS对象模型）。

8. 构建渲染树：将DOM树和CSSOM结合起来，构建渲染树，这是一个包含了所有需要显示的元素的树状结构。

9. 布局（Layout）/重排（Reflow）：浏览器计算出每个元素在页面上的确切位置和大小。

10. 绘制（Painting）：最后，浏览器将渲染树中的每个节点绘制到屏幕上。

11. 合成（Compositing）：如果页面中有层叠上下文（如CSS的3D变换），浏览器会进行合成操作，以确保元素按照正确的顺序显示。

为了更直观地理解这个过程，下面是一个简化的图例：

用户输入URL
         |
         |---> DNS查询
         |
         |---> 建立TCP连接
         |
         |---> 发送HTTP请求
         |
         |---> 服务器响应HTML文档
         |
         |---> 解析HTML，构建DOM树
         |
         |---> 解析CSS，构建CSSOM
         |
         |---> 构建渲染树
         |
         |---> 布局（Reflow）
         |
         |---> 绘制（Painting）
         |
         |---> 合成（Compositing，如有需要）
         |
         --------> 显示网页

请注意，这个图例非常简化，实际的渲染过程可能会更复杂，并且涉及到更多的优化和渲染技术。

在描述完 浏览器的加载过程后，要重点说一下“页面的渲染过程”

页面渲染过程

       

       页面渲染的几个阶段通常指的是浏览器将HTML、CSS和JavaScript代码转换成用户可以看到的网页的过程。这个过程可以分为以下几个主要阶段：

1. 解析HTML：

   • 浏览器接收到HTML代码后，开始解析这些代码，构建DOM（Document Object Model）树。DOM树是一个以树状结构表示的文档，其中每个节点代表文档中的一个元素。

2. 解析CSS：

   • 一旦HTML解析完成，浏览器接下来会解析CSS代码。CSS代码被用来构建CSSOM（CSS Object Model），它是一个表示CSS样式的树状结构。

3. 构建渲染树：

   • 将DOM树和CSSOM结合起来，创建一个渲染树。渲染树包含了页面上所有可见的元素，以及它们的样式信息。

4. 布局（Layout）/回流（Reflow）：

   • 浏览器计算渲染树中每个节点的大小和位置。这个过程称为布局或重排。每个元素的位置和大小都是相对于其父元素来确定的。

5. 绘制（Painting）：

   • 浏览器遍历渲染树，并使用底层的图形系统绘制每个节点。这个过程涉及到将文本、颜色、图片等绘制到屏幕上。

6. 合成（Compositing）：

   • 对于具有层叠上下文（如使用了CSS的transform或opacity属性）的元素，浏览器会将它们合成到一个单独的层中。然后，这些层会被合并显示在屏幕上。

7. 光栅化（Rasterizing）：

   • 浏览器将合成后的层转换成位图，这个过程称为光栅化。位图是像素的集合，可以直接在屏幕上显示。

8. 显示：

   • 最终，浏览器将所有合成和光栅化的层显示在屏幕上，用户就可以看到完整的网页了。

这些阶段是浏览器渲染页面的基本步骤，但实际的渲染过程可能会更加复杂，涉及到性能优化和错误处理等。此外，现代浏览器还采用了多种技术来提高渲染效率，如异步加载、预加载、懒加载等。

重点问题分析（回流、重绘）

        当网页首次加载完成之后，用户与页面的互动或JavaScript代码的执行可能会改变页面的布局和外观。这种变化会触发浏览器重新执行渲染流程，这通常涉及到两种情况：回流和重绘。

关于回流、重绘 的详细讲解请查看：

    【浏览器渲染机制】回流（Reflow）和重绘（Repaint）

回流（Reflow）：

• 回流发生在我们通过操作（比如改变元素的宽度、高度，或者隐藏某个元素）导致页面布局需要重新计算时。
• 浏览器会重新计算页面上受影响元素的位置和大小，这可能会影响到页面上其他元素的布局。
• 这个过程就像是重新安排家具一样，一旦某个家具的大小或位置变了，其他家具的摆放也需要相应调整。
• 完成计算后，浏览器需要重新绘制页面，以反映这些变化。

重绘（Repaint）：

• 如果变化仅涉及到元素的外观（如颜色、边框等），而不影响其尺寸或位置，那么浏览器只需要重新绘制这些元素，这个过程称为重绘。
• 重绘相比回流要快，因为它不需要重新计算元素的布局，只需要更新元素的视觉表现。

简而言之，回流是页面布局的全面重新计算，而重绘则是对页面上已经确定布局的元素进行视觉更新。两者都是浏览器为了保持页面的准确性和美观性而进行的渲染过程。

结语

🔥如果此文对你有帮助的话，欢迎💗关注、👍点赞、⭐收藏、✍️评论，支持一下博主~