从输入URL到页面渲染，React/RN 整体加载流程

如果你是在准备前端/React Native 面试，可以把"从输入 URL 到页面渲染"拆成两条链路来看：

Web React：URL → 浏览器 → 网络 → HTML/JS → React → DOM → Paint
React Native：JS Bundle → React → Shadow Tree → Yoga/Layout → Native View → GPU 渲染

下面按完整链路讲。

一、React Web：从输入 URL 到页面渲染

可以先记住这一张主流程：

复制代码

输入 URL
  ↓
URL 解析
  ↓
DNS
  ↓
TCP / TLS
  ↓
HTTP Request
  ↓
Server Response
  ↓
HTML 解析
  ↓
CSS / JS / Image 等资源加载
  ↓
JS 执行
  ↓
React 启动
  ↓
Render
  ↓
Reconciliation
  ↓
Commit
  ↓
DOM 更新
  ↓
Style
  ↓
Layout
  ↓
Paint
  ↓
Composite
  ↓
用户看到页面

1. 输入 URL

例如：

复制代码

https://example.com/user/123

浏览器首先解析：

复制代码

协议：HTTPS
域名：example.com
端口：443
Path：/user/123

然后判断：

是否有缓存
HSTS
Service Worker
DNS 缓存
HTTP 缓存

如果没有可直接使用的缓存，就进入网络阶段。

二、DNS：域名 → IP

浏览器需要知道：

复制代码

example.com
      ↓
93.184.xxx.xxx

大致过程：

复制代码

浏览器 DNS Cache
      ↓
OS DNS Cache
      ↓
Router / ISP DNS
      ↓
Recursive DNS
      ↓
Root DNS
      ↓
.com DNS
      ↓
Authoritative DNS
      ↓
IP

实际情况中可能因为缓存命中，不需要完整走一遍。

三、建立 TCP / TLS

HTTPS 通常：

复制代码

DNS
 ↓
TCP 3-way handshake
 ↓
TLS handshake
 ↓
HTTP

TCP：

复制代码

Client → SYN
Server → SYN + ACK
Client → ACK

然后 TLS 建立加密连接。

现代 HTTP/3 则不同，它基于 QUIC/UDP，所以不能简单理解成所有 HTTPS 都是 TCP。

四、发送 HTTP Request

例如：

复制代码

GET /user/123 HTTP/1.1
Host: example.com
Cookie: ...
User-Agent: ...
Accept: text/html

服务器处理请求。

可能经过：

复制代码

CDN
 ↓
Load Balancer
 ↓
Web Server
 ↓
Node / Java / Go / PHP ...
 ↓
Database / Cache

然后返回：

复制代码

HTTP/1.1 200 OK
Content-Type: text/html
Cache-Control: ...

<html>
  ...
</html>

五、浏览器解析 HTML

浏览器拿到 HTML 后开始解析。

例如：

复制代码

<div id="root">
  <h1>Hello</h1>
</div>

浏览器构建：

复制代码

HTML
 ↓
DOM Tree

同时发现资源：

复制代码

<link rel="stylesheet" href="app.css">
<script src="app.js"></script>
<img src="logo.png">

于是继续加载：

复制代码

HTML
 ├── CSS
 ├── JS
 └── Image

六、CSS → CSSOM

CSS：

复制代码

.title {
  color: red;
  font-size: 20px;
}

浏览器解析成：

复制代码

CSS
 ↓
CSSOM

最终浏览器需要把：

复制代码

DOM
+
CSSOM

结合起来。

七、JS Bundle 执行

React 项目一般不是 HTML 里直接写大量 UI，而是：

复制代码

<div id="root"></div>

<script src="/assets/main.js"></script>

浏览器下载：

复制代码

main.js
 ↓
JS Engine
 ↓
执行 JavaScript

例如：

复制代码

ReactDOM.createRoot(
  document.getElementById('root')
).render(<App />);

这一步就是 React 应用启动。

八、React 初始化

React 开始执行：

复制代码

function App() {
  return (
    <div>
      <h1>Hello</h1>
    </div>
  );
}

React 首先执行组件：

复制代码

App()
 ↓
React Element

得到类似：

复制代码

{
  type: 'div',
  props: {
    children: ...
  }
}

注意：

React Element ≠ DOM。

React Element 更像是：

"我希望页面最终长成什么样"的描述。

九、React Reconciliation

这是 React 最核心的阶段之一。

可以理解成：

复制代码

新的 React Tree
      ↓
Reconciliation
      ↑
旧 Fiber Tree

React 使用 Fiber Architecture 管理更新。

例如：

第一次：

复制代码

<App />

生成：

复制代码

Fiber Tree

App
 └── div
      └── h1

之后 state 更新：

复制代码

setCount(count + 1)

React 会：

复制代码

State Update
     ↓
Schedule
     ↓
Render Phase
     ↓
生成新的 Fiber Tree
     ↓
Diff / Reconciliation

找到真正发生变化的部分。

十、Render Phase

React Render Phase 主要做：

复制代码

执行组件
 ↓
生成 React Element
 ↓
构建 / 更新 Fiber
 ↓
Reconciliation

例如：

复制代码

function Counter() {
  const [count, setCount] = useState(0);

  return <div>{count}</div>;
}

点击：

复制代码

setCount(1)

触发：

复制代码

setState
 ↓
Update Queue
 ↓
Scheduler
 ↓
Render Phase
 ↓
Counter()
 ↓
新的 React Element
 ↓
Reconciliation

这里有一个非常重要的面试点：

Render Phase 不等于浏览器已经更新 DOM。

十一、Commit Phase

React 确定：

复制代码

哪些东西需要真正修改

然后进入：

复制代码

Commit Phase

例如：

复制代码

<div>0</div>

变成：

复制代码

<div>1</div>

React 执行真正的 DOM 操作：

复制代码

Fiber
 ↓
Host Config
 ↓
DOM API
 ↓
真实 DOM

例如：

复制代码

node.textContent = '1';

十二、浏览器开始渲染

React 把 DOM 更新完之后，才进入浏览器自己的渲染管线。

核心可以记：

复制代码

DOM
 +
CSSOM
 ↓
Render Tree
 ↓
Layout
 ↓
Paint
 ↓
Composite

1. Style

计算：

复制代码

color
font-size
width
display
position
...

得到最终样式。

2. Layout

计算每个元素的位置和大小：

复制代码

x
y
width
height

例如：

复制代码

div
├── x: 0
├── y: 0
├── width: 375
└── height: 100

这个阶段以前经常叫：

Reflow

3. Paint

把元素画出来：

复制代码

文字
背景
边框
阴影
图片

4. Composite

最后把不同 Layer 合成：

复制代码

Layer 1
Layer 2
Layer 3
   ↓
GPU Composite
   ↓
屏幕

于是用户看到页面。

十三、React Web 完整面试版

如果面试官问：

"从输入 URL 到 React 页面最终显示，中间发生了什么？"

可以直接这样回答：

浏览器首先解析 URL，然后通过 DNS 获取服务器 IP，建立 TCP/TLS 连接并发送 HTTP 请求。服务器返回 HTML 后，浏览器解析 HTML 构建 DOM，同时解析 CSS 构建 CSSOM，并加载 JS、CSS、图片等资源。React 应用的 JS Bundle 下载并执行后，通过 createRoot().render() 启动 React。React 执行组件生成 React Element，并通过 Fiber 进行 Reconciliation。Render Phase 完成新的 Fiber Tree 计算后进入 Commit Phase，把变化提交到真实 DOM。之后浏览器根据 DOM 和 CSSOM 进行 Style、Layout、Paint 和 Composite，最终通过 GPU 合成并显示到屏幕。

这段基本就是完整答案。

十四、React Native 就完全不一样了

RN 最大的区别：

没有浏览器 DOM，也没有 CSSOM，也不是把 React Element 直接变成 HTML。

典型流程：

复制代码

App 启动
 ↓
Native Runtime
 ↓
加载 JS Bundle
 ↓
JS Engine
(Hermes / JSC)
 ↓
React
 ↓
Fiber Tree
 ↓
Fabric
 ↓
Shadow Tree
 ↓
Yoga Layout
 ↓
Mount
 ↓
Native Views
 ↓
Core Animation / Android UI
 ↓
GPU
 ↓
屏幕

十五、RN 启动阶段

比如：

复制代码

点击 App Icon

首先：

复制代码

iOS / Android
 ↓
启动 Native Application
 ↓
创建 RN Runtime
 ↓
初始化 JS Engine
 ↓
加载 JS Bundle

现代 RN 通常使用：

复制代码

Hermes

也可能使用其他 JS Runtime。

十六、执行 React

Bundle 加载之后：

复制代码

AppRegistry.registerComponent(
  'MyApp',
  () => App
);

Native 启动 RN：

复制代码

App
 ↓
React
 ↓
Fiber Tree

例如：

复制代码

function App() {
  return (
    <View>
      <Text>Hello</Text>
    </View>
  );
}

React 不会生成：

复制代码

<div>

而是：

复制代码

View
Text

这些最终对应 Native UI。

十七、Fiber → Shadow Tree

RN 新架构核心是：

复制代码

React Fiber Tree
       ↓
   Fabric
       ↓
 Shadow Tree

例如：

复制代码

App
 └── View
      └── Text

Shadow Tree 是 RN 用于描述 UI 层级和布局的中间结构。

十八、Yoga 计算布局

RN 的布局系统主要使用：

Yoga

Yoga 实现 Flexbox 布局。

例如：

复制代码

<View
  style={{
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  }}
>

Yoga 计算：

复制代码

View
 ├── x
 ├── y
 ├── width
 └── height

十九、Mount 到 Native View

然后 Fabric 把需要更新的 UI 提交给 Native：

复制代码

Shadow Tree
 ↓
Commit
 ↓
Mount
 ↓
Native UI

例如：

复制代码

<View />

最终对应：

复制代码

iOS → UIView
Android → View

Text、Image 等也会映射到对应 Native 实现。

二十、最后 GPU 绘制

Native View 创建完成之后：

复制代码

Native View
 ↓
iOS UIKit / Android View System
 ↓
Core Animation / RenderThread
 ↓
GPU
 ↓
屏幕

所以 RN 最终仍然是：

Native UI + Native Rendering Pipeline

而不是浏览器 DOM。

二十一、Web React vs RN

这个表非常适合面试前背下来：

阶段	React Web	React Native
JS Runtime	Browser JS Engine	Hermes/JSC
UI 描述	React Element	React Element
中间结构	Fiber	Fiber + Shadow Tree
DOM	✅	❌
CSSOM	✅	❌
Layout	Browser Layout	Yoga
UI	DOM Element	Native View
Commit	DOM Mutation	Fabric Mount
绘制	Browser	Native
GPU	Browser Compositor	Native Rendering

最核心的一句话：

React 本身负责"描述 UI 和协调更新"，真正负责最终绘制的是宿主环境。Web 的宿主环境是浏览器 DOM；RN 的宿主环境是 iOS/Android Native UI。

二十二、把两条链路放在一起

最终可以记成：

复制代码

                 React
                   │
          Component / JSX
                   │
             React Element
                   │
                Fiber
                   │
          Reconciliation
                   │
          ┌────────┴────────┐
          │                 │
       React DOM          Fabric
          │                 │
         DOM            Shadow Tree
          │                 │
       Browser            Yoga
          │                 │
       Layout          Native Views
          │                 │
        Paint          Native Render
          │                 │
      Composite            GPU
          │                 │
          └────────┬────────┘
                   ↓
                  屏幕

面试真正需要抓住的核心：

复制代码

React ≠ 浏览器
React ≠ DOM
React ≠ RN Native View

React = UI 描述 + Reconciliation + 更新协调

Web：
React → DOM → Browser Rendering

RN：
React → Fabric/Shadow Tree → Native View → Native Rendering

如果你想把这个问题用于高级前端 / React Native 面试 ，下一层最值得继续拆的是：setState → Scheduler → Fiber → Render Phase → Commit Phase → Browser Paint，尤其是 React 18 的并发渲染、Lane、时间切片，以及 RN Fabric/JSI/TurboModule 之间的关系。