前言
大家好,接下来我会出一期《阿里前端面试题》系列文章。每篇文章只详细讲解一个面试题。尽量让大家在10分钟左右看完一遍,在不耽误大家时间的前提下,既能完善自己的技术体系和面试能力,又可以增加工作技能。每天进步一点。日积月累,有朝一日定会厚积薄发。
浏览器的加载渲染过程
浏览器的渲染过程,也被称为“页面渲染流程”或“页面加载流程”,是指从用户输入网址到浏览器显示出完整的网页内容的一系列步骤。这个过程可以大致分为以下几个阶段:
-
解析输入的URL:浏览器首先解析用户输入的URL(统一资源定位器),确定要访问的网页地址。
-
DNS查询:如果浏览器不知道服务器的IP地址,它会进行DNS(域名系统)查询,将域名解析为IP地址
-
建立连接:浏览器使用IP地址与服务器建立连接,通常是通过TCP(传输控制协议)。
-
发送HTTP请求:一旦连接建立,浏览器发送一个HTTP(超文本传输协议)请求到服务器,请求网页内容。
-
服务器响应:服务器接收到请求后,会返回所请求的网页资源,通常是HTML文档。
-
解析HTML:浏览器开始解析HTML文档,构建DOM(文档对象模型)树,这是页面结构的基础。
-
解析CSS:浏览器解析CSS样式表,并将样式应用到DOM树上,构建CSSOM(CSS对象模型)。
-
构建渲染树:将DOM树和CSSOM结合起来,构建渲染树,这是一个包含了所有需要显示的元素的树状结构。
-
布局(Layout)/重排(Reflow):浏览器计算出每个元素在页面上的确切位置和大小。
-
绘制(Painting):最后,浏览器将渲染树中的每个节点绘制到屏幕上。
-
合成(Compositing):如果页面中有层叠上下文(如CSS的3D变换),浏览器会进行合成操作,以确保元素按照正确的顺序显示。
为了更直观地理解这个过程,下面是一个简化的图例:
用户输入URL
|
|---> DNS查询
|
|---> 建立TCP连接
|
|---> 发送HTTP请求
|
|---> 服务器响应HTML文档
|
|---> 解析HTML,构建DOM树
|
|---> 解析CSS,构建CSSOM
|
|---> 构建渲染树
|
|---> 布局(Reflow)
|
|---> 绘制(Painting)
|
|---> 合成(Compositing,如有需要)
|
--------> 显示网页
请注意,这个图例非常简化,实际的渲染过程可能会更复杂,并且涉及到更多的优化和渲染技术。
在描述完 浏览器的加载过程后,要重点说一下“页面的渲染过程”
页面渲染过程
页面渲染的几个阶段通常指的是浏览器将HTML、CSS和JavaScript代码转换成用户可以看到的网页的过程。这个过程可以分为以下几个主要阶段:
-
解析HTML:
- 浏览器接收到HTML代码后,开始解析这些代码,构建DOM(Document Object Model)树。DOM树是一个以树状结构表示的文档,其中每个节点代表文档中的一个元素。
- 浏览器接收到HTML代码后,开始解析这些代码,构建DOM(Document Object Model)树。DOM树是一个以树状结构表示的文档,其中每个节点代表文档中的一个元素。
-
解析CSS:
- 一旦HTML解析完成,浏览器接下来会解析CSS代码。CSS代码被用来构建CSSOM(CSS Object Model),它是一个表示CSS样式的树状结构。
- 一旦HTML解析完成,浏览器接下来会解析CSS代码。CSS代码被用来构建CSSOM(CSS Object Model),它是一个表示CSS样式的树状结构。
-
构建渲染树:
- 将DOM树和CSSOM结合起来,创建一个渲染树。渲染树包含了页面上所有可见的元素,以及它们的样式信息。
-
布局(Layout)/回流(Reflow):
- 浏览器计算渲染树中每个节点的大小和位置。这个过程称为布局或重排。每个元素的位置和大小都是相对于其父元素来确定的。
-
绘制(Painting):
- 浏览器遍历渲染树,并使用底层的图形系统绘制每个节点。这个过程涉及到将文本、颜色、图片等绘制到屏幕上。
-
合成(Compositing):
- 对于具有层叠上下文(如使用了CSS的
transform
或opacity
属性)的元素,浏览器会将它们合成到一个单独的层中。然后,这些层会被合并显示在屏幕上。
- 对于具有层叠上下文(如使用了CSS的
-
光栅化(Rasterizing):
- 浏览器将合成后的层转换成位图,这个过程称为光栅化。位图是像素的集合,可以直接在屏幕上显示。
-
显示:
- 最终,浏览器将所有合成和光栅化的层显示在屏幕上,用户就可以看到完整的网页了。
这些阶段是浏览器渲染页面的基本步骤,但实际的渲染过程可能会更加复杂,涉及到性能优化和错误处理等。此外,现代浏览器还采用了多种技术来提高渲染效率,如异步加载、预加载、懒加载等。
重点问题分析(回流、重绘)
当网页首次加载完成之后,用户与页面的互动或JavaScript代码的执行可能会改变页面的布局和外观。这种变化会触发浏览器重新执行渲染流程,这通常涉及到两种情况:回流和重绘。
关于回流、重绘 的详细讲解请查看:
【浏览器渲染机制】回流(Reflow)和重绘(Repaint)
回流(Reflow):
- 回流发生在我们通过操作(比如改变元素的宽度、高度,或者隐藏某个元素)导致页面布局需要重新计算时。
- 浏览器会重新计算页面上受影响元素的位置和大小,这可能会影响到页面上其他元素的布局。
- 这个过程就像是重新安排家具一样,一旦某个家具的大小或位置变了,其他家具的摆放也需要相应调整。
- 完成计算后,浏览器需要重新绘制页面,以反映这些变化。
重绘(Repaint):
- 如果变化仅涉及到元素的外观(如颜色、边框等),而不影响其尺寸或位置,那么浏览器只需要重新绘制这些元素,这个过程称为重绘。
- 重绘相比回流要快,因为它不需要重新计算元素的布局,只需要更新元素的视觉表现。
简而言之,回流是页面布局的全面重新计算,而重绘则是对页面上已经确定布局的元素进行视觉更新。两者都是浏览器为了保持页面的准确性和美观性而进行的渲染过程。
结语
🔥如果此文对你有帮助的话,欢迎💗关注、👍点赞、⭐收藏、✍️评论,支持一下博主~