老前端面试题库仓库复盘：Docsify、Service Worker 与知识维护

这篇文章基于公开仓库当前 master 快照和可见提交记录做静态审阅，关注文档站运行方式、缓存边界、可访问性和知识维护，不复制题目正文或第三方答案。本次核对的个人 fork 最近可见提交为 2019-09-11；没有安装依赖、启动 Docsify、检查线上站点或逐一核实 README 的全部外链，因此下文把源码事实、风险和待验证项分开写。

它实际是什么

仓库主体是 Markdown 文档目录，由 Docsify 在浏览器侧读取并渲染。README.md 做题目、面经和简历资源目录，_sidebar.md 提供侧栏，index.html 配置 Docsify、搜索和页脚，sw.js 尝试用运行时缓存支持离线访问。package.json 只提供 Docsify CLI 的启动脚本，没有应用构建、测试或 CI；它更像一份静态资料库，而不是有客户端业务状态的前端产品。

包元数据中的仓库地址指向 paddingme/Front-end-Web-Development-Interview-Question，所以这是从上游演进出来的 fork。package.json 声明 MIT，但当前根目录没有独立 LICENSE 文件。题目、翻译和外链可能有不同来源；若要重新分发，应逐项确认来源、作者和许可，不要把一个包字段当作所有文档的授权证明。

README 的 25 条索引：正文与外链分开看

README 中的 25 项是一个来源索引，不等于仓库已经收录 25 篇完整答案。1–11 有本地编号文件，但完成状态不一；12–25 只是外部来源入口。下表保留索引主题和原始链接，并标明仓库内状态；链接能打开也不代表题目仍准确或可以转载。

第 12–25 项是原仓库的链接目录，不是本站已经迁入的正文，也不应把外链标题包装成“已收录文章”。当前条目只是保存来源入口和主题，后续若要离线整理，仍需单篇核对内容、作者、年代与许可；本次没有复制任何第三方答案。

入口与移动端问题

index.html 把页面语言标成英文，但主要内容是中文；首页的“简历”卡片误链到题目目录，尽管顶栏和侧栏有正确的简历入口。viewport 又同时设置 user-scalable=no、maximum-scale=1.0，会限制低视力读者放大页面。MDN 明确提醒，禁用缩放会妨碍低视力用户；通常只保留 width=device-width, initial-scale=1，让浏览器和读者控制缩放。

Docsify、搜索脚本和主题样式通过未固定版本的 //unpkg.com/docsify/... 加载。协议相对 URL 会跟随页面协议，但 lib/... 没有锁定发布版本或完整性摘要，CDN 内容变化可能令同一提交对应不同运行结果。仓库还配置了 Universal Analytics 风格的旧跟踪 ID；Google 已停止标准 Universal Analytics 属性的数据处理。恢复站点时应删除过期配置，若确实需要统计，再选择当前方案并先决定隐私提示、同意和数据保留规则。

建议先修复 lang="zh-CN" 和首页目标链接，恢复用户缩放；然后锁定 Docsify 版本及依赖，或为固定 CDN 资源设置 SRI。部署前在根路径和子路径各测一次侧栏、搜索、相对链接和刷新直达。Analytics 不应因为旧配置还在文件里就默认重新启用。

Service Worker 的缓存边界

现有 sw.js 对允许域名的请求统一调用 respondWith，并给所有同源 URL 追加 cache-bust 参数。它没有先筛选 GET、静态资源、API 或私有响应；页面目前主要是静态资料，但未来加登录、评论或接口后，这种“全站接管”的策略会把不同数据生命周期混在一起。CDN 域名也进入同一个运行时缓存策略。

缓存名固定为 docsify，activate 只调用 clients.claim()，没有按本站专属前缀清理旧版本缓存；注册逻辑也没有显式的安装预缓存或离线更新提示。网络和缓存都没有结果时，fetch 处理器最终吞掉异常并解析为 undefined，而不是返回缓存、明确的离线页面或 Response。用户第一次离线打开或访问未缓存资源时，就没有可靠的降级结果。

更稳妥的最小策略是只接管同源、公开、GET 的静态资源，API 和账号态响应留给网络；网络成功时只缓存允许的成功响应，网络失败时返回匹配缓存或明确的 503。缓存要带本站前缀和版本号，激活时只清理自己的旧版本。下面是策略骨架，实际应用仍要按资源类型和离线需求补测试：

const CACHE_NAME = 'interview-static-v2';

self.addEventListener('fetch', (event) => {
  const request = event.request;
  const url = new URL(request.url);
  if (request.method !== 'GET' || url.origin !== self.location.origin ||
      url.pathname.startsWith('/api/')) return;

  event.respondWith((async () => {
    const cache = await caches.open(CACHE_NAME);
    let response;
    try {
      response = await fetch(request);
    } catch {
      return (await cache.match(request)) ?? new Response('Offline. Reconnect and retry.', {
        status: 503,
        headers: { 'Content-Type': 'text/plain; charset=utf-8' },
      });
    }
    if (response.ok && response.type === 'basic') {
      try { await cache.put(request, response.clone()); } catch {}
    }
    return response;
  })());
});

这不是对所有网站都合适的“通用离线方案”：HTML 导航、图片、字体、搜索索引和文章 Markdown 可能需要不同缓存策略；部署在子路径时也要确保缓存键和回退地址仍在注册 scope 内。Service Worker 的更新通常要等旧页面释放控制权，激进地跳过等待可能让旧 HTML 与新脚本错配。应为缓存升级、旧标签页、首次离线、缓存缺项和错误响应分别设计验收，而不是只确认注册成功。

题库内容需要从“收集”走向“可验证”

README 自己把不少目录标为待完善、待解答或待添加；这代表资源收集与完整教学并不是一回事。抽样的旧 CSS/JavaScript 文档有明显拼写错误、年代较早的浏览器行为解释和 HTTP 资源链接；JavaScript 章节把普通函数调用时的 this 说成始终指向 window，没有交代 strict mode 和模块环境；对 undeclared 的描述也把访问时的 ReferenceError 与语法错误混在一起。面经原文标注为 2013 年，适合保留为历史材料，不适合作为今天的招聘标准。

不需要删除历史问题，也不要把未经验证的旧答案润色后当作权威。每篇资料建议增加“来源/作者、原始日期、最近核验日期、适用运行环境、当前结论、仍有争议点”元数据；把过时题目标为历史案例，在旁边补充现代浏览器或当前框架的可验证解释。对外链采用人工抽样和自动可达性检查相结合，链接可达不等于内容准确或获得转载授权。

分阶段改造清单

1. 先做来源盘点：区分个人原创、上游题目、翻译、面经和外部链接；保留 fork 与作者署名，标出许可不明的部分，不批量复制。
2. 修正站点基线：中文语言声明、可缩放 viewport、正确的导航目标、固定的 Docsify/插件版本、锁文件和清晰的根路径/子路径部署设置。
3. 收紧运行时缓存：只缓存公开静态 GET；排除 API、登录态与错误响应；增加版本化缓存清理、明确离线回退及升级提示。
4. 建立内容状态：把“未答、待核验、已核验、历史资料”作为不同状态；回答附机制、反例、适用版本和可运行验证，而不是只列结论。
5. 加入轻量质量门禁：检查死链、图片引用、Markdown 标题层级、代码围栏和入口路由；核心 JS 示例做语法检查，浏览器行为用最小测试页复现。
6. 验收移动与离线：键盘导航、读屏标签、200%/400% 缩放、窄屏重排、首次离线、已缓存离线、缓存升级和深链接刷新都要实测。

这类仓库不一定要整体换框架。Docsify 仍适合轻量、以 Markdown 为主的静态资料库；是否迁移 Astro，应由版本化元数据、SEO、搜索、练习交互和内容管理的真实需求决定。先修好链接、缩放、依赖和 Service Worker，再逐步校正内容，风险更低，也更容易保留历史价值。

本次只完成源码层面审阅，没有修改上游或个人 GitHub 仓库，也没有声称构建、离线或移动端验收已经通过。

仓库来源：haoge568/Front-end-Web-Development-Interview-Question，上游：paddingme/Front-end-Web-Development-Interview-Question。

参考：Docsify 配置文档、MDN viewport、MDN Service Worker 使用指南、MDN Cache API、Google Universal Analytics 停止处理说明。