世界观回顾（智慧城市大屏比喻），深入理解各种页面状态？

世界观回顾（智慧城市大屏比喻）

浏览器 = 工地
HTML = 原始施工图纸（Sources源码，不会变）
DOM = 正在现场搭建的公示大屏楼房（Elements面板里的内容）
document = 大屏物业总管
document.write() = 指挥总管，往正在搭建的楼房墙上贴广告牌（文字/HTML标签）

两个阶段：
✅ 页面加载阶段：楼房正在施工、还没封顶
❌ 页面加载完毕：楼房已经全部建好、封顶完工

---

一、阶段1：页面【正在加载阶段】（楼房正在施工）

比喻

工人正在按照图纸搭建公示大屏，墙面还没封死。
此时 JS 执行 document.write，相当于趁着施工间隙，直接往正在砌的墙上贴广告牌，贴多少就追加多少，不会推倒已经建好的部分。

代码写在页面里的 <script>，页面从上往下解析HTML，读到script标签就立刻执行JS，属于加载阶段执行。

测试代码（新建html，直接复制运行）

<!DOCTYPE html>
<html>
<body>
<h2>原始标题（图纸自带广告牌）</h2>
<script>
// ===== 页面加载阶段执行！楼房正在建造中 =====
document.write("<h1>JS贴的大标题</h1>");
document.write("<p>JS贴的段落文字</p>");
</script>
<p>图纸自带的段落</p>
</body>
</html>

F12观察现象

1. Elements面板：从上到下依次出现：h2 → h1 → p(JS生成) → p(原始图纸)
   JS写入的标签追加在DOM楼房中间，没有删除原有内容。
2. Sources源码：源码里面只有<script>，源码没有h1、JS生成的p标签（JS动态生成，不会修改原始图纸）。
3. Network面板刷新：一次性下载html，解析的时候边读边执行script，边建造DOM。

核心口诀

楼房还在建，write往墙上追加广告牌，旧房子保留，新增内容直接接上。

---

二、阶段2：页面【全部加载完毕之后】（楼房已经封顶完工）

比喻

整栋公示大屏楼房全部施工完成、封顶，工地宣布完工。
这个时候再调用 document.write：物业总管收到指令，直接把整栋建好的楼房全部推倒、清空墙面，重新盖一个空白墙面，再写入新内容。

两种场景会触发这个效果：
场景A：页面加载完后，在F12 Console控制台手动执行document.write
场景B：JS代码放在 window.onload / DOMContentLoaded 里面执行（等页面全部加载完再跑）

测试代码示例（加载完成后执行write）

<!DOCTYPE html>
<html>
<body>
<h2>原始的标题，楼房建好之后会被全部推倒消失</h2>
<p>我是原始段落</p>

<script>
// window.onload：等待整个页面所有资源全部加载完毕（楼房封顶完工）
window.onload = function(){
  // 楼房已经建好封顶！执行write，推倒整栋DOM楼房
  document.write("<h1>旧楼推倒，新建标题！</h1>");
}
</script>
</body>
</html>

F12观察现象

打开页面一瞬间，先短暂看到原始h2和p，然后页面全部内容瞬间消失，只剩下<h1>旧楼推倒，新建标题！</h1>

1. Elements面板：原来所有DOM元素全部不见了，只剩下JS新写的h1
2. Sources源码：原始源码不变，依旧保留h2、p，源码不会被删除！>

只是内存里建好的DOM楼房被推倒，原始图纸文件纹丝不动。

控制台直接测试（课堂演示，最直观！）

1. 打开上面第一段页面（加载阶段示例代码）
2. F12打开【Console控制台】（运维员操作台，页面已经加载完成，楼房封顶）
3. 在控制台输入下面命令，回车执行：

document.write("<p>控制台执行，推倒全部楼房！</p>")

✅ 现象：页面所有内容全部清空，只留下新写入的这一行文字

---

三、两个关键事件（区分“DOM树建好”和“全部资源加载完成”，黑板重点）

继续楼房比喻

1. DOMContentLoaded：DOM楼房框架搭建完成（墙体、广告牌骨架搭好），图片资源还没下载完。只是骨架完工，图片物料还在路上。
2. window.onload：全部物料（图片、视频、所有资源）全部送到工地，整栋大楼100%完全竣工封顶。

// DOM骨架搭建完成（DOM树构建完毕，图片还没加载完）
document.addEventListener('DOMContentLoaded', function(){
  console.log("DOM骨架搭建完成");
  // 在这里执行document.write 也属于加载完毕阶段，会推倒页面
})

// 页面所有资源全部加载完成，大楼完全竣工
window.onload = function(){
  console.log("全部资源加载完毕，楼房封顶");
}

在Console控制台执行代码，永远属于【页面加载完毕后执行】。

---

四、F12面板如何判断当前处于哪个阶段？（实操判断方法）

1. Network面板 → 刷新页面，看顶部进度条
   • 进度条还在跑：页面正在加载（楼房施工中）
   • 进度条消失，全部请求变灰色：页面加载完毕（楼房封顶）
2. Console控制台
   页面加载完成后，在控制台执行document.write → 推倒页面，这个是最快演示实验。
3. Performance性能面板（施工计时记录仪）
   点击录制，刷新页面。
   时间轴上蓝色部分 = 解析HTML、构建DOM楼房的施工阶段。
   蓝色段结束，代表DOM楼房骨架搭建完成；等到所有图片资源加载完成，页面才算完全加载完毕。

随堂对比表格（黑板板书）

阶段	比喻	document.write行为	演示方式
页面正在加载	楼房正在施工，墙体未封顶	在现有墙面追加广告牌，原有内容保留	script写在body内部，从上到下执行
页面加载完毕	楼房全部封顶，施工结束	推倒整栋DOM楼房，清空页面，再写新内容	window.onload / F12控制台执行

✅ 口述稿（上课一口气讲）

咱们继续用公示大屏楼房来理解。页面加载阶段，就代表楼房还在施工、墙体没有封顶。
HTML从上往下读取，读到script标签，立刻执行document.write，直接往正在建造的墙上贴广告牌，原来建好的内容全部保留，追加新内容。
等到页面全部加载完毕，楼房已经封顶完工。这个时候再执行document.write，物业总管会直接推倒整栋建好的DOM楼房，清空页面，再写入新文字。
我们可以在F12控制台现场输入document.write命令，亲眼看到页面被清空推倒。
区分两个事件：DOMContentLoaded是DOM楼房骨架搭建完成，图片物料还没下载；window.onload代表图片等所有资源全部下载，大楼彻底竣工。
记住最重要的：无论哪个阶段，修改的都是内存Elements里面建好的DOM楼房，原始Sources源码图纸永远不会改动。

随堂思考题

1. 把script写在body中间，页面打开执行document.write，属于哪个阶段？会推倒页面吗？>

页面加载施工阶段，不会推倒，直接追加内容。

2. 页面加载完成之后，在F12控制台运行document.write，发生什么？>

推倒整个DOM楼房，清空全部页面内容。

要不要我再给你一段对比实验，演示不使用document.write，改用DOM API（querySelector/innerHTML），看看加载完成后修改页面，不会推倒楼房，用来对比突出document.write的特殊行为？