1HTML解析与DOM构建
闭卷重建HTML解析与DOM构建的对象、公式、算例、算法与失败边界。
Web系统与云原生 · 小纸条
选一章打印。双面打印（按长边翻页）后沿虚线剪开，每张卡片正面题目、背面答案。
第 1 页 · 正面（题目）
2CSS级联、布局与绘制
闭卷重建CSS级联、布局与绘制的对象、公式、算例、算法与失败边界。
3JavaScript执行模型与事件循环
闭卷重建JavaScript执行模型与事件循环的对象、公式、算例、算法与失败边界。
4DOM事件、传播与默认行为
闭卷重建DOM事件、传播与默认行为的对象、公式、算例、算法与失败边界。
5网络请求、Fetch与取消
闭卷重建网络请求、Fetch与取消的对象、公式、算例、算法与失败边界。
6浏览器存储与生命周期
闭卷重建浏览器存储与生命周期的对象、公式、算例、算法与失败边界。
7关键渲染指标与性能预算
闭卷重建关键渲染指标与性能预算的对象、公式、算例、算法与失败边界。
第 1 页 · 背面（答案）
对象：样式匹配、级联、布局、绘制、合成是不同阶段；几何变化可能触发重排。；公式：specificity/order/inheritance共同决定computed style。；算例：同等specificity后出现规则覆盖前者；内联样式通常权重更高。；边界：用!important堆叠修复架构；循环读offset再写style造成抖动。。
对象：浏览器把字节解码、tokenize并纠错建DOM；脚本位置会阻塞解析。；公式：DOM construction follows parser state machine。；算例：同步脚本耗时100ms位于文档中部，解析关键路径至少增加约100ms。；边界：把源HTML结构当最终DOM；无效嵌套由浏览器修正。。
对象：事件按捕获—目标—冒泡传播；阻止传播与阻止默认行为是不同操作。；公式：path length决定监听器可能触发层数。；算例：祖先2层加目标1层，完整传播路径节点3个。；边界：在被动监听器preventDefault无效；事件委托过滤错误目标。。
对象：调用栈、任务、微任务和渲染检查点决定异步顺序；单线程不等于无并发。；公式：每个task结束后清空microtask queue。；算例：同步log A，Promise微任务B，timer任务C，输出顺序A、B、C。；边界：递归微任务饿死渲染；把async函数当新线程。。
对象：cookie、sessionStorage、localStorage、IndexedDB与Cache API容量、同步性和发送边界不同。；公式：cookie request overhead≈cookie bytes×request count。；算例：每请求携带2KB cookie，页面发50请求，上传额外约100KB。；边界：把访问令牌长期放可读localStorage；大对象塞同步localStorage阻塞主线程。。
对象：Fetch返回Promise但HTTP错误不自动reject；AbortSignal用于取消，流body只能按规则消费。；公式：success condition=response.ok∧application contract。；算例：服务器404时fetch Promise可正常resolve，但response.ok为false。；边界：只写catch处理404；组件卸载后请求仍更新旧状态。。
对象：LCP、INP、CLS分别观察主要内容、交互响应和布局稳定；需按真实用户分位数评价。；公式：budget=network+main-thread+render，关注p75/p95。；算例：交互总延迟180ms，其中输入等待80、处理70、呈现30。；边界：只用开发机Lighthouse；平均值掩盖低端设备尾部。。