浏览器渲染html
浏览器解析和渲染 UI(用户界面),特别是 HTML 文档,是一个复杂的过程,涉及到多个阶段。以下是浏览器从接收 HTML 文档到显示渲染后的页面的一般步骤:
1. 下载 HTML 文档:
- 用户输入 URL 或点击链接时,浏览器会向服务器请求 HTML 文档。
- 服务器响应请求,并将 HTML 文档发送回浏览器。
2. 解析 HTML:
- 浏览器开始解析 HTML 文档,构建一个 DOM(文档对象模型)树。
- DOM 树是由节点组成的,每个节点代表 HTML 文档中的一个元素。
3. 解析 CSS:
- 浏览器同时解析关联的 CSS 样式表,构建一个 CSSOM(CSS 对象模型)树。
- CSSOM 树包含了所有样式信息,用于确定如何显示 DOM 树中的每个元素。
4. 构建渲染树:
- 浏览器将 DOM 树和 CSSOM 树合并,创建一个渲染树。
- 渲染树包含了 DOM 树中的所有可见元素,以及它们的样式信息。
5. 布局(Layout):
- 浏览器对渲染树进行布局,也称为“流布局”(flow layout)。
- 这一步骤确定了每个元素在页面上的确切位置和大小。
6. 绘制(Painting):
- 浏览器使用渲染树的信息来绘制页面上的每个元素。
- 这一步骤涉及到将元素的样式、颜色、图片等绘制到屏幕上。
7. 合成(Compositing):
- 对于有层叠上下文(如使用 CSS 的
transform
、opacity
或filter
属性)的元素,浏览器会进行合成。 - 合成是将页面的各个部分合并到最终的像素输出上的过程。
8. 显示页面:
- 一旦绘制和合成完成,浏览器就会显示渲染后的页面。
- 用户现在可以看到并与之交互。
9. JavaScript 执行:
- 如果 HTML 文档中包含 JavaScript 代码,浏览器会在不影响解析的情况下延迟执行,或者在文档解析完成后执行。
- JavaScript 可以修改 DOM 和 CSSOM,这可能导致浏览器重新执行上述渲染流程的一部分。
10. 重排(Reflow)和重绘(Repaint):
- 当 DOM 或 CSSOM 发生变化时,浏览器可能需要重新执行布局、绘制或合成。
- 这些变化可能是由于用户交互、JavaScript 操作或浏览器窗口大小的改变。
浏览器的渲染引擎(如 Chrome 的 Blink、Firefox 的 Geck
标签:浏览器,渲染,DOM,react,HTML,UI,文档,解析 From: https://blog.csdn.net/weixin_43342290/article/details/141823055