前端面试题库 README 25 项清点:旧题状态与现代化路线
本文目录
这个仓库看起来像一套完整的前端面试题库,实际更接近一份长期积累的学习索引:它把作者整理的答案、其他项目的题目、外部文章和招聘面经放在同一导航中。本文专门逐项盘点 README 中的 25 条题目索引、仓库内正文状态和旧答案的现代化方向。项目入口、移动端体验与 Service Worker 缓存实现另见老前端面试题库仓库复盘:Docsify、Service Worker 与知识维护。
本文按默认分支的 README、目录树、package.json、Service Worker 和部分 HTML/CSS/JavaScript 题目做静态复核。没有运行或部署原仓库,也没有逐字复制题目及第三方文章。
项目归属与边界
GitHub 将仓库标记为 paddingme/Front-end-Web-Development-Interview-Question 的 fork。package.json 仍保留上游作者和仓库信息,运行入口是 docsify serve ./,依赖只有 Docsify CLI;项目没有前端构建、测试或 lint 脚本。因此它适合作为个人学习资料归档,不应当作从零独立开发的作品来描述。
仓库元数据里的 license 字段写着 MIT,但 GitHub 未识别到仓库许可证,当前文件树也没有根目录 LICENSE。此外,部分答案明确引用其他作者、面试题仓库和文章。仓库级字段不能自动证明每段第三方正文都能重新发布;博客采用原创解释、规范链接和必要的来源说明,不镜像整篇题目或文章。
25 条目录逐项清点
README 的题目索引包含 25 项。第 1 至 11 项在目录中有对应编号文件,但其中有空文件或短占位;第 12 至 25 项在索引中是外部来源,并没有对应的本地逐题正文。它们的主题如下,供后续逐篇重写时对照,不能把链接存在等同于内容迁移完成。
| 序号 | 主题 | 仓库内状态 |
|---|---|---|
| 1 | CSS 基础与选择器判断 | 有答案;混有旧规范和需要重新核对的解释 |
| 2 | HTML、浏览器加载与渲染 | 有答案;包含已淘汰能力和过时结论 |
| 3 | FEX 面试题 | 有本地文件;索引标注待完善 |
| 4 | 通用前端面试题 | 有本地文件;内容引用外部题库 |
| 5 | HTML 面试题 | 有较长答案;存储、HTTP 和浏览器兼容部分明显陈旧 |
| 6 | CSS 面试题 | 有较长答案;含 IE hack、旧布局技巧及未作答题目 |
| 7 | JavaScript 面试题 | 有较长答案;this、模块、作用域和对象模型解释需要重写 |
| 8 | jQuery 面试题 | 有短文件,不能视为完整题集 |
| 9 | JavaScript 编码题 | 有短文件,不能视为完整题集 |
| 10 | 趣味题 | 只有短占位内容 |
| 11 | 其他面试题 | 有本地内容,但仍需逐条审校 |
| 12 | 2014 年 HTML/CSS 笔试题 | 仅有外链 |
| 13 | 2014 年 JavaScript 笔试题 | 仅有外链 |
| 14 | 汇总型前端题库与答案 | 仅有外链 |
| 15 | 互联网公司 JavaScript 笔试题 | 仅有外链 |
| 16 | 早期前端开发面试题 | 仅有外链 |
| 17 | 前端面试资源汇总 | 仅有外链 |
| 18 | JavaScript 典型题第一组 | 仅有外链 |
| 19 | JavaScript 典型题第二组 | 仅有外链 |
| 20 | 校招前端面试题 | 仅有外链 |
| 21 | Eleme 招聘题 | 仅有外链 |
| 22 | JavaScript 题目解答 | 仅有外链 |
| 23 | 前端面试问题与答案汇总 | 仅有外链 |
| 24 | 航旅前端校招面试题 | 仅有外链 |
| 25 | Node.js 面试题 | 仅有外链 |
此外,目录树里还有 CSS、HTML、HTTP、JavaScript、性能、测试、通用题等专题笔记;node.md、react.md、vue.md、webpack.md 当前为空,算法文件名写成了 alogorithms,md。这类占位应进入明确的待办,而不是出现在读者面前伪装成已完成章节。
旧答案需要怎样更新
这些题目可以保留为“当年为什么这样问”的历史材料,答案则要改成当前可验证的概念和适用边界。
| 旧题说法 | 今天的准确解释 |
|---|---|
:checked 不作用于 option | :checked 也匹配选中的 <option>;见 MDN :checked。 |
<keygen> 是 HTML5 表单元素 | 它已经属于 HTML 非规范、已淘汰的元素,新项目不应使用;见 HTML Standard:obsolete features。 |
<style scoped> 可以隔离父元素内部样式 | 这是早期提案留下的历史写法,不应作为现代浏览器通用的 CSS 封装机制;按项目选择 CSS Modules、带作用域的构建方案或 Shadow DOM。 |
页面有多个 <h1> 一定没有搜索展示影响 | 不能从旧问答推导出确定的排名结论。语义上应建立清晰标题层级,并让页面主标题突出;Google 可能参考页面可见的标题文本生成搜索结果标题,多个同等醒目的标题会让主标题不明确;见 Google Search Central:title links。 |
@media screen 指物理屏幕尺寸 | screen 是媒体类型;响应式布局常用的 width 媒体特性测试视口宽度。分页媒体则测试页面盒宽度;见 MDN width。 |
| 选择器性能有固定的“ID 最快、后代最慢”排行榜 | 这不是值得脱离实际页面套用的优化规则。优先保证级联清晰、选择器可维护,再用浏览器性能工具定位真实瓶颈。 |
| 特异性只需按四个数字比较 | 特异性只是级联的一环;来源、重要性、级联层和作用域等也会参与优先级。:is()、:not()、:has() 会按参数选择器计算权重;见 MDN specificity。 |
普通函数里的 this 总是 window | this 取决于调用方式及严格模式;严格模式下的裸调用得到 undefined,方法调用、call/apply/bind、new 与箭头函数各有不同规则;见 ECMAScript:this keyword。 |
| GET 地址有统一的 2048 字符上限,POST 因为正文不可见所以更安全 | HTTP 语义没有给 URI 规定一个所有实现通用的 2048 字符上限;浏览器、代理和服务器可以各有限制,过长时可能返回 414。POST 也不自带机密性,敏感信息仍需 TLS、授权和合理的数据处理;见 RFC 9110:414。 |
localStorage、sessionStorage 只需按“永久/关闭窗口消失”区分 | 还要考虑同源分区、标签页隔离、同步阻塞、隐私模式与存储配额;第三方环境的状态分区也会影响访问。见 MDN Web Storage。 |
同样需要更新的还有旧 IE 专属 hack、旧浏览器支持表、XHTML 与 application/xhtml+xml 的历史注意事项、AMD/RequireJS 与 IIFE 的时代背景、document.write、JSONP 和早期 Ajax 解释。它们不必全部删除,但应加上“历史兼容场景”标签,说明现代替代方案和何时仍需了解。
Docsify 与 Service Worker 复盘
仓库使用静态 Docsify 页面,sw.js 采用名为 docsify 的运行时缓存,并允许当前站点、字体域名和 CDN 主机。请求逻辑接近“缓存与网络竞争、网络响应再更新缓存”,但拦截条件只检查 hostname,没有显式限制请求方法或具体资源路径;实现中也没有明确的安装预缓存、版本化缓存名或旧缓存清理。错误分支吞掉异常,没有可靠的离线文档兜底。因此注释中的离线承诺不能替代对断网、超时和缓存损坏的实际测试。
改造这类 Worker 时,应先定义可缓存资源清单,而不是只凭 host 判断;限制为安全的方法和预期资源类型,明确排除管理接口、个性化响应和认证数据。用带版本的缓存,在 activate 阶段清理旧版本;为静态资源和导航请求分别设计策略,并验证无网、慢网、部署升级、回滚与 CDN 故障。Service Worker 生命周期和缓存 API 可参考 MDN Service Worker API。
这只是静态代码复核,没有在目标浏览器中确认该 Worker 当前实际注册、作用域、缓存命中率或离线行为;也没有证明存在正在发生的用户故障。
重写成可维护的学习路径
后续把索引中的旧题拆成独立文章时,每篇都按同一套结构维护:问题场景、现代规范结论、最小可运行示例、常见错误答案为何错、兼容性边界、测试方法、官方参考。题目只做检索入口,不把背诵答案当成能力本身。
- HTML 与无障碍:语义结构、表单、焦点管理、图片文本替代、标题层级和文档模式。
- CSS 与布局:盒模型、格式化上下文、Grid/Flex、响应式容器、级联层、选择器与媒体查询。
- JavaScript:类型与相等、闭包、执行上下文、
this、原型、模块、异步与异常边界。 - 浏览器与网络:渲染流水线、资源优先级、缓存、Fetch/HTTP、CORS、Cookie 与存储。
- 工程质量:组件边界、性能测量、自动化测试、安全编码、兼容性矩阵和可访问性验收。
- 框架与工具:React/Vue 当前生态、打包、类型检查、测试工具及它们适合解决的问题。
每篇文章要标明最后核验日期和目标浏览器;涉及浏览器实现差异时附最小复现,而不是只引用十年前的兼容表。对仍有价值的旧题保留问题意图和来源线索,答案另写成原创说明。题库中没有本地正文的 12–25 项仍是后续创作任务,并没有被本文“补齐”。
当前结论
这是有长期学习记录价值的 fork 仓库,但目前的 25 项目录不是 25 篇完整文章,题库本身也未达到可直接作为现代面试手册的质量。下一步应先逐条审校本地编号文件与专题笔记,再决定哪些问题值得扩展为独立知识文档;空白章节补内容前先定义范围,过时题目保留历史说明,第三方正文不整段搬入博客。
原仓库:https://github.com/haoge568/Front-end-Web-Development-Interview-Question
Live Notes
留言提交后会先进入审核,审核通过后对其他读者公开。