浏览器输入网址到界面呈现发生了什么?
1.DNS解析
2. HTM解析与呈现
浏览器解析 HTML 并呈现界面的过程可以分为以下 6 个主要步骤:
1️⃣ 解析 HTML,构建 DOM 树(HTML -> DOM)
- 浏览器从 HTML 文件 开始解析,从上到下读取标签,并构建 DOM 树(Document Object Model)。
2️⃣ 解析 CSS,构建 CSSOM(CSS -> CSSOM)
- 遇到
<link>
或<style>
标签,浏览器会下载并解析 CSS。下载资源不会阻塞html的解析,但是CSS 解析会阻塞渲染(但不会阻塞 HTML 解析),因为样式需要解析完成才能正确渲染页面。 - 解析后生成 CSSOM(CSS 对象模型),它是 CSS 规则的结构化表示。
3️⃣ 生成渲染树(Render Tree = DOM + CSSOM)
- Render Tree(渲染树) 由 DOM 和 CSSOM 结合而成,它决定了哪些元素需要显示,以及它们的样式。
Render Tree 只包含可见元素
- 不会包含
display: none
的元素(但visibility: hidden
仍会存在)。 - 不会包含
head
、meta
等不可见标签。
4️⃣ 布局(Layout / Reflow,计算大小和位置)
- 浏览器计算每个元素的确切位置和大小,即 计算每个元素的
width
、height
、position
、margin
等。 - 这个过程叫做 回流(Reflow) 或 布局(Layout)。
5️⃣ 绘制(Painting,绘制像素到屏幕)
- 浏览器将计算好的布局绘制到屏幕上,包括颜色、阴影、边框、文字等。
- 绘制(Painting)是由光栅化线程进程处理:把渲染树的图层变成 GPU 可用的位图
- 光栅化线程通常会在 GPU 上运行,加快绘制速度
6️⃣ 组合与合成(Compositing)
- 现代浏览器会分层绘制(Layering),然后 合成(Compositing)。
- 例如:
position: fixed
、transform
、opacity
等会创建新的 图层(Layer)。 - GPU 处理这些图层的合成,提高性能。
📌 关键点
- 某些 CSS 操作不会触发布局和重绘,而只会触发合成(如
transform: translateX(100px)
)。 - 动画和过渡效果会尽可能在 GPU 上执行,提高流畅度。
三.总结:
现代浏览器是一边解析,一边渲染,并不是等 HTML 解析完再开始渲染。
具体来说:形成rendertree以后就开始渲染,在渲染过程中遇到影响页面布局位置的元素(例如img没有指定大小)时又回流