当浏览器渲染页面时，会经历以下几个主要步骤：
1. 处理HTML - 构建DOM树
浏览器首先解析HTML文档以构建DOM（文档对象模型）树。DOM树是页面结构的表示，其中每个HTML标签都是树中的一个节点。
例子： 如果有一个简单的HTML文档如下：
<!DOCTYPE html> <html> <head> <title>示例页面</title> </head> <body> <h1>你好，世界！</h1> <p>这是一个段落。</p> </body> </html>
浏览器会创建一个DOM树，包含html、head、title、body、h1和p等节点。
2. 处理CSS - 构建CSSOM树
浏览器会解析CSS，包括外部的CSS文件和页面内部的样式。解析完成后，浏览器会创建CSSOM（CSS对象模型）树。CSSOM树反映了所有CSS规则以及它们的层叠和继承关系。
例子： 对于上述HTML，可能有一个CSS文件如下：
body { font-family: Arial, sans-serif; } h1 { color: blue; }
对应的CSSOM树会包含body和h1的样式规则。
3. 结合DOM和CSSOM - 构建渲染树
接下来，浏览器会结合DOM树和CSSOM树来创建渲染树。渲染树只包含需要显示的节点和它们的样式信息。这意味着例如<script>和<style>标签等不会被包含在渲染树中。
4. 布局 - 计算每个节点的位置
一旦渲染树构建完成，浏览器将进行布局（也被称为回流），计算出渲染树中每个节点的确切位置和大小。这个过程会考虑视口大小、元素的大小、元素之间的关系等因素。
5. 绘制 - 像素化页面内容
布局完成后，浏览器会进入绘制（或绘图）阶段，它会遍历渲染树，并使用UI后端层将每个节点绘制到屏幕上。这个过程涉及将样式信息转化为实际的像素。
6. 合成 - 层的合成和显示
某些复杂的视觉效果如3D变换或阴影，可能会使得元素被分到不同的层。浏览器会管理这些层，最后将它们合成到一起，显示在屏幕上。
在整个渲染过程中，如果DOM或CSSOM被脚本更新，会触发重新布局（回流）和重绘，这可能会影响渲染性能。为了获得最佳性能，开发者应该尽量减少这些操作的频率和范围。
以上就是浏览器渲染页面的详细过程。这个过程需要高效地处理和合作，才能尽快地将内容呈现给用户。