资源加载与缓存优化

共 21 题
#

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 第三方脚本不会阻塞执行