# 1. TanStack Router 的 search params 类型 在测试与可维护性的工程价值 A TanStack Router 以 schema 定义 search params 并推导类型,编译期拦截错误,URL 状态单一来源提升测试与可维护性 ✓ 正确答案 B search params 与 TypeScript 类型无关 C search params 类型只影响运行时 D validateSearch 只做序列化
# 2. HTTP 103 Early Hints 在静态资源预取的工程价值与现代浏览器支持 A 103 会替代 HTML 主响应 B 所有浏览器都完整支持 103 C 103 Early Hints 提前发送 Link 预加载头,使关键资源下载与 HTML 并行,改善 LCP,且不支持时安全降级 ✓ 正确答案 D 103 只对动态内容有效
# 3. CDN Cache-Control: stale-while-revalidate 在 HTML/Asset 不同策略的工程取舍 A 所有资源都应使用相同的缓存头 B stale-while-revalidate 会阻塞用户请求 C HTML 用短 SWR 窗口兼顾新鲜度、hash 资产用长缓存 immutable,按资产类型差异化配置缓存策略 ✓ 正确答案 D HTML 应使用年度长缓存
# 4. Early Hints(103)状态码与 <link rel="preload"> 头部在服务端提速的应用 A 103 状态码会阻断 HTML 返回 B 103 需要浏览器强制支持否则报错 C preload 头与 HTML 内 preload 无差别 D 103 携带 preload Link 头让关键资源在 HTML 到达前就开始下载,适合高 TTFB 页面,不支持时安全降级 ✓ 正确答案
# 5. <link rel="modulepreload"> 与 <link rel="prefetch"> 在 ESM 预加载的取舍 A prefetch 与 modulepreload 优先级相同 B modulepreload 不缓存模块 C modulepreload 下载并解析模块供立即执行,prefetch 低优先级预取未来资源,按确定性需求分级使用 ✓ 正确答案 D prefetch 会阻塞当前页面加载
# 6. 图片优化(AVIF/WebP、响应式、懒加载、CDN) A 图片优化用 AVIF/WebP 分层、srcset/sizes 响应式、非首屏懒加载与 CDN 按需转换,LCP 图禁用懒加载 ✓ 正确答案 B 所有图片都应使用 AVIF C loading="lazy" 适合所有图片 D 图片优化与 CLS 无关
# 7. 资源优先级(fetchpriority、<link rel="preload">)的应用 A fetchpriority 会强制浏览器改变加载顺序 B fetchpriority 不支持时会导致报错 C 所有资源都标 high 效果最好 D preload 提前发现资源、fetchpriority 微调同队列优先级,只对关键资源使用并验证收益,避免滥用 ✓ 正确答案
# 8. 关键渲染路径的阻塞 CSS/JS 识别与优化 A CSS 与同步 JS 是主要 render-blocking 资源,可内联关键样式、defer/async 脚本并按关键路径最小化 ✓ 正确答案 B 同步脚本不阻塞 HTML 解析 C 所有 CSS 都应内联 D Coverage 无法识别未用代码
# 9. MobX 与 SSR/RSC 边界的协作 A SSR 中 store 可以是模块单例 B MobX 在 SSR 需每请求创建 store 并序列化状态供水合,RSC 边界内响应式状态在客户端组件层维护 ✓ 正确答案 C RSC 组件可以使用 MobX hooks D 水合不需要恢复状态
# 10. SWR 的 mutate 与乐观更新 在大型表单与复杂状态的协作 A mutate 一定会触发网络请求 B mutate 本地更新缓存支持乐观更新(失败回滚快照),与表单编辑态分离协作,按 key 粒度局部更新 ✓ 正确答案 C 乐观更新不需要回滚机制 D SWR 无法处理并发提交
# 11. HTTP/2 Server Push 的废弃与替代方案(103 + preload) A Server Push 是当前推荐方案 B Server Push 因猜测性浪费与缓存误判被弃用,103 + preload 让客户端按需预取,兼顾提前发现与零浪费 ✓ 正确答案 C 103 会强制浏览器下载资源 D Server Push 知道客户端缓存状态
# 12. defer/async 脚本属性的解析-执行时序差异 A async 脚本按文档顺序执行 B 普通脚本不阻塞解析 C defer 脚本在 DOMContentLoaded 之后执行 D async 下载完即执行(不保序、可能打断解析),defer 在解析完成后按序执行,独立脚本用 async、依赖顺序用 defer ✓ 正确答案
# 13. Service Worker 缓存策略(stale-while-revalidate、cache-first、network-first) A 不可变资产用 cache-first、HTML 用 network-first 或 SWR、API 按新鲜度要求选择,按资源类型分桶配置 ✓ 正确答案 B cache-first 新鲜度最高 C network-first 永远最快 D SWR 策略不更新缓存
# 14. Resource Hints(modulepreload / imagesrcset) A modulepreload 下载并解析模块依赖链,imagesrcset 预加载响应式图片候选集,配合构建工具注入 ✓ 正确答案 B modulepreload 与普通 preload 语义相同 C imagesrcset 无法用于 preload D Resource Hints 是强制调度指令
# 15. Preload/Prefetch/Preconnect/Prerender 资源提示的优先级与浏览器协作工程价值 A prerender 成本最低 B 提示越多越好 C preconnect 会下载资源 D preload 当前页关键、prefetch 未来概率预取、preconnect 提前建连、prerender 高成本预渲染,按确定性与成本决策 ✓ 正确答案
# 16. Service Worker 与 HTTP 缓存层级的工程取舍 A Service Worker 请求先经过 HTTP 缓存 B 缓存头与 SW 策略无关 C SW 缓存可以完全替代 HTTP 缓存 D SW 在 fetch 层做可编程缓存策略(离线/版本管理),HTTP 缓存管基础效率,两者按职责协同 ✓ 正确答案
# 17. 字体子集化(subset)与 unicode-range 的工程化 A 中文字体必须整包加载 B unicode-range 按字符范围分片下载、子集化工具按页面字符生成子集,配合 WOFF2 与 font-display 治理加载与偏移 ✓ 正确答案 C font-display 不影响首屏 D 子集化会增加字体体积
# 18. HTTP 缓存(强缓存、协商缓存)的配置 A HTML 应该使用一年强缓存 B 强缓存命中也会发送请求 C ETag 只用于静态资源 D hash 资产用 max-age 长缓存 + immutable,HTML 用 no-cache/ETag 协商,按内容可变性配置缓存头 ✓ 正确答案
# 19. Zag.js 在跨标签/跨窗口的工程价值 A Zag.js 是 UI 组件库 B Zag.js 以状态机建模组件状态,可序列化状态配合 BroadcastChannel 实现跨标签页确定性同步 ✓ 正确答案 C 状态机无法跨窗口复用 D 跨标签同步只能靠定时器轮询
# 20. URL state 与 useSearchParams 在测试与可维护性的工程价值 A URL state 会丢失用户状态 B 敏感数据适合放入 URL 状态 C URL 参数无法序列化复杂结构 D URL state 使视图状态可分享、可刷新恢复,useSearchParams 提供声明式类型化读写,测试可直接构造 URL 驱动 ✓ 正确答案
# 21. 资源加载与缓存涉及哪些浏览器内部关键路径与实现原理,应如何结合业务场景做性能瓶颈定位 A 资源缓存只有内存一层 B transferSize 无法判断缓存命中 C 加载链路包含缓存查找顺序与解析执行阶段,瓶颈定位按"现象拆环节 + 资源 + 时间分段"用 DevTools 与 timing 验证 ✓ 正确答案 D 第三方脚本不会阻塞执行