知识库K12
浏览器、网络与安全 · KNOWLEDGE CHAPTER
K12

页面生命周期与调度

把页面看成同时推进的三条时间线：资源发现与下载、JavaScript 工作队列、像素与交互。页面事件只是某条时间线的里程碑，不是“所有工作完成”的总开关。

浏览器、网络与安全2 道章节练习5 道主练关联
先修知识：K06 · 渲染与动效K09 · 异步控制与迭代

核心模型

把页面看成同时推进的三条时间线：资源发现与下载、JavaScript 工作队列、像素与交互。页面事件只是某条时间线的里程碑，不是“所有工作完成”的总开关。

原理与机制

导航建立的是依赖图

输入 URL 后，缓存、连接复用、DNS、TLS 与协议选择共同决定实际路径，不应背成每次必经的固定串行步骤。HTML 可边到达边解析，并继续发现样式、脚本与图片；同步经典脚本可能暂停解析，defer 外部经典脚本保留文档顺序，async 则以可用时机为主。DOMContentLoaded 标记解析及相应延迟脚本的处理完成，不等待所有图片、async 脚本或模块顶层 await 后的业务初始化。首屏可见、数据可用和可交互必须各设证据。

一次运行结束不等于马上绘制

当前 JavaScript 作业先运行到完成；Promise 后续与 queueMicrotask 在微任务检查点处理，新加入的微任务也会继续被清空。定时器安排未来任务，延迟为零仍不是立即执行。浏览器只有在合适的渲染机会才更新画面，并非每个任务后必然绘制。因此循环 await 已完成的 Promise 仍可能饿死输入与渲染。重任务应有时间预算地分片并让出任务级执行机会，纯计算可评估 Worker，而不能把异步语法当并行能力。

动画使用时钟而非帧数

requestAnimationFrame 是一次性的绘制前回调请求。屏幕刷新率与忙碌程度改变每秒回调次数，位移应由时间戳差值除以总时长计算，不能每帧固定加像素。后台恢复后是追赶墙钟还是暂停继续属于产品契约；游戏积分通常还要限制单步时间。取消时同时管理请求 ID 与存活标记，避免卸载后继续写样式，也不要默认覆盖 transform 不会破坏既有旋转。

历史恢复需要重验证而非重初始化

bfcache 保存的是页面状态，后退恢复可能保留 DOM、草稿和执行环境，区别于 HTTP 缓存保存响应。用 pageshow.persisted 识别恢复并复核会话、订单等易过期数据，不要重复订阅或清空输入。SPA 的 pushState、replaceState 只改历史条目，不因调用本身触发 popstate；应用需同步界面并在历史遍历时恢复。可分享条件放 URL，短暂交互状态留本地，服务端还须支持合法深链直接访问。

用可观测事实验证时序

排查时分别记录导航资源、脚本执行、DOM 变化和最终绘制，避免把控制台日志当成用户已经看到画面。脚本初始化应能重复调用而不重复订阅；依赖业务数据时等待明确初始化 Promise。筛选拖动还要定义历史粒度：若整个拖动算一次操作，可先建立工作条目，再在拖动中替换它，结束提交最终值；不要先把旧条目覆盖掉再推入同值条目，否则后退已找不到原条件。

最小示例

javascript
javascript
console.log('sync');
setTimeout(() => console.log('timer'), 0);
queueMicrotask(() => console.log('micro'));
requestAnimationFrame(t => console.log('frame', t));
function init() { console.log('DOM ready'); }
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', init, { once: true });
} else init();

在浏览器脚本中观察，sync 一定先于注册的异步回调，micro 先于该 timer；不要据一次输出推断 timer 与 frame 的全局固定顺序。readyState 检查和注册在同一同步执行中完成，不会被 DOMContentLoaded 插入。init 仍不代表接口或图片已完成。

环境：现代浏览器的页面脚本；控制台可见输出；DOMContentLoaded 是否已发生会改变 DOM ready 日志位置。

核验：已静态审查示例与本章机制一致；未运行此示例，未进行框架或浏览器集成测试。观察结果为待复现的教学预期。

边界与取舍

边界

  • 微任务不是后台线程；持续补充微任务会延迟交互，await Promise.resolve() 不保证用户看见中间进度。
  • next frame 不是固定 16ms；高刷新率、后台与丢帧都会改变调度，动画必须定义暂停语义。
  • bfcache 资格依浏览器版本而异，不能把 HTTP no-store 背成所有浏览器永久禁用页面恢复的规则。

取舍

  • 把任务切得更小能改善响应，但增加调度开销；以长任务、输入延迟和总完成时间共同选块大小。
  • 保留页面状态提升后退体验，却可能展示过期权限或订单；恢复时保留无害草稿并重新验证敏感动作。

口述示范

我会分开讲加载、执行与渲染：DOM 就绪不代表业务就绪，微任务会在检查点清空但不保证绘制，动画按时间推进。最后补充历史恢复：HTTP 缓存、bfcache 和 SPA 历史不是一回事，恢复时既要保留体验，也要重验失效信息。

章节练习

练习 1

假设 CSSLab 要处理十万条规则并显示进度，如何判断“已经 await 却卡住”？

展开检查点
  • 先录制主线程，区分单次长计算与微任务链。
  • 按时间预算分片；比较任务级让出与 Worker 的传输成本。
  • 验证点击响应及总时长，不把进度日志当绘制证据。
相关题目：B02B11
练习 2

订单页后退显示待支付，另一个标签页却已付款或退出。设计恢复测试。

展开检查点
  • 用 pageshow.persisted 区分页恢复；普通刷新另测。
  • 重新验证会话及订单，禁止旧状态直接发起付款。
  • 保留草稿、避免重复监听，并覆盖离线恢复和账号切换。
相关题目：B01B28B29

参考来源与核验边界

以现代浏览器及核验日的 HTML 标准为基线；scheduler.yield、页面缓存资格及后台调度须做特性检测与目标浏览器实测。

内容版本：2026-10-04.2 · 题目和来源 ID 保持原样，本站不将面经标签解释为企业官方出题或高频保证。