波仔
🔌 第六章 请求到达Web服务器，响应返回浏览器
📄 一句话概括

HTML 解析成 DOM 树、CSS 算样式、布局定位、绘制上屏；途中遇到图片脚本再回头发请求——探索之旅在画面亮起的一刻抵达终点。

📝 本节和前面几节的关系

探索之旅的最后一篇：内容终于变成画面。

一、渲染四步

HTML 解析成 DOM 树（结构）； CSS 计算样式（长相）； 布局：算出每个盒子放在哪； 绘制：真正画到屏幕上。

二、旅程的意义

途中遇到图片/脚本还要回头发请求—— 一次【访问】其实是一小群请求的接力； 从 1.1.1 的输入网址到这一刻，每一站都走过了。

三、动手 Demo：从 HTML 到画面

浏览器渲染的四步：

for s in ['1. HTML 解析成 DOM 树（结构）',
    2. CSS 计算样式（长相）',
    3. 布局：算出每个盒子放在哪',
    4. 绘制：真正画到屏幕上']:
    print(s)

实跑输出：

--------------------------------------------------------------------
从 HTML 到画面
--------------------------------------------------------------------
  浏览器渲染的四步：

    1. HTML 解析成 DOM 树（结构）
    2. CSS 计算样式（长相）
    3. 布局：算出每个盒子放在哪
    4. 绘制：真正画到屏幕上

  途中遇到图片/脚本，再回头发请求——
  一次【访问】其实是一小群请求。

⭐ 2026 现状：渲染引擎还在进化（离屏合成、 GPU 加速），但【解析-样式-布局-绘制】四步骨架未变。

30 秒实验

  1. 在开发者工具里看一眼 DOM 树。
  2. 数数打开一个页面实际发了多少个请求。
  3. 把整本书的旅程站名背一遍收个尾。

常见误区

  1. 以为显示是瞬间一步——四步骨架一步不少。
  2. 以为一次访问只有一个请求——子资源各发各的。
自测三问（点开对答案） 1. 渲染四步的顺序？ —— 解析、样式、布局、绘制。 2. DOM 树是什么？ —— HTML 解析出的结构树。 3. 遇到子资源怎么办？ —— 再发请求去取。

相关笔记