1组件、状态与单向数据流
闭卷重建组件、状态与单向数据流的对象、公式、算例、算法与失败边界。
Web系统与云原生 · 小纸条
选一章打印。双面打印（按长边翻页）后沿虚线剪开，每张卡片正面题目、背面答案。
第 1 页 · 正面（题目）
2响应式布局与容器约束
闭卷重建响应式布局与容器约束的对象、公式、算例、算法与失败边界。
3可访问语义与键盘操作
闭卷重建可访问语义与键盘操作的对象、公式、算例、算法与失败边界。
4表单状态、验证与错误恢复
闭卷重建表单状态、验证与错误恢复的对象、公式、算例、算法与失败边界。
5前端路由、加载与代码分割
闭卷重建前端路由、加载与代码分割的对象、公式、算例、算法与失败边界。
6服务端渲染、水合与流式页面
闭卷重建服务端渲染、水合与流式页面的对象、公式、算例、算法与失败边界。
7前端测试与可观测性
闭卷重建前端测试与可观测性的对象、公式、算例、算法与失败边界。
第 1 页 · 背面（答案）
对象：布局应从内容与容器约束出发，用流、flex、grid和媒体/容器查询适配。；公式：available=container−padding−gap。；算例：容器1200px，左右padding各40，三列间两条20gap，可用列总宽1080px。；边界：只按某手机像素断点；固定高度截断动态内容。。
对象：UI组件把输入状态映射为视图，副作用需与纯渲染分离并明确所有权。；公式：view=render(state,props)。；算例：同state和props纯渲染应给同DOM描述；读取当前时间会破坏纯性。；边界：把派生值再存一份形成不同步；共享可变单例跨页面泄漏。。
对象：客户端验证改善体验，服务端验证才是信任边界；错误应定位并保留用户输入。；公式：valid=request satisfies schema∧business rules∧authorization。；算例：字段格式正确但用户无权修改资源，仍必须拒绝。；边界：只信HTML required；错误后清空整表。。
对象：语义结构、名称/角色/值、焦点顺序和键盘行为让辅助技术获得同等任务能力。；公式：accessible name由label/aria等算法计算。；算例：图标按钮无可访问名称时视觉可见但读屏无法识别。；边界：用div模拟按钮却无键盘语义；aria-label与可见文本冲突。。
对象：SSR先返回HTML，水合绑定交互；服务器和客户端首渲染必须一致。；公式：TTI≈HTML arrival+JS critical+hydrate work。；算例：HTML100ms到达、关键JS80、hydrate70，串行TTI约250ms。；边界：把SSR等同无需JS；服务端读浏览器专属API。。
对象：路由决定URL与页面状态；分割减少首包但增加请求瀑布和缓存版本问题。；公式：initial JS=shared+route-critical chunks。；算例：共享150KB、当前路由80KB，首屏需230KB；非当前路由不应首载。；边界：每个小组件单独chunk造成瀑布；发布后旧HTML引用已删hash。。
对象：单元测纯逻辑、组件测交互、端到端测关键任务；前端错误需关联版本与后端trace。；公式：coverage by risk，不以行覆盖率替代行为。；算例：登录关键路径有成功、错误密码、超时、MFA四场景，只测成功覆盖场景25%。；边界：端到端只在理想网络；测试通过但生产source map错。。