> For the complete documentation index, see [llms.txt](https://blog.yuyy.tech/mian-shi-shu-li/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://blog.yuyy.tech/mian-shi-shu-li/qian-duan-ji-chu/liu-lan-qi/ye-mian-xuan-ran.md).

# 页面渲染

从输入url敲击回车键到页面渲染出来，大致可以分为3大阶段：

1. **浏览器请求发送前**

       [强缓存](/mian-shi-shu-li/ji-suan-ji-wang-luo/liu-lan-qi-huan-cun.md#yi-huan-cun-ji-zhi)检查 => DNS解析 => TCP连接 => TLS连接

2. **服务器处理数据**

       [协议缓存](/mian-shi-shu-li/ji-suan-ji-wang-luo/liu-lan-qi-huan-cun.md#yi-huan-cun-ji-zhi) => 业务逻辑计算 => 响应结果

3. **浏览器渲染页面**

       HTML解析成DOM树 => CSS解析成CSSOM树 => 合成Render树 => 布局 => 绘制 

<div align="left"><figure><img src="/files/6OIZvnMUVUH7riTm53bm" alt=""><figcaption><p>页面渲染流程</p></figcaption></figure></div>

### 为什么要减少重排？

**重排**因为要重新计算`Render Tree`，而且每一个`DOM Tree`都有一个`reflow`方法，一旦某个节点发生**重排**，就有可能导致子元素和父元素甚至是同级其他元素的`reflow`，浪费大量的时间重新验证`Render Tree`。

参考：

* <https://developer.mozilla.org/zh-CN/docs/Web/Performance/How_browsers_work>
* <https://developer.mozilla.org/zh-CN/docs/Web/Performance/Critical_rendering_path>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://blog.yuyy.tech/mian-shi-shu-li/qian-duan-ji-chu/liu-lan-qi/ye-mian-xuan-ran.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.