4. 技术基础与核心能力面试：HTML/CSS/JavaScript 高频考点、考察深度

本环节重点考察你对基础原理的理解深度，而非 API 记忆。面试官会通过“常规问题→追问本质→场景变形”的链路，判断你是否具备“知其然亦知其所以然”的工程思维。

技术基础面试 HTML CSS JavaScript 语义化 事件流 BFC/层叠 动画性能 原型链 闭包/异步 追问深度：概念 → 原理 → 兼容/性能 → 工程场景落地
记住：基础题不打低分，靠追问拉差距。回答时先给出明确答案，再展开原理和工程经验。

面试问题

“你如何看待 HTML 语义化？请结合实际场景说明它的价值。”

面试官考察点

  • 是否真正在项目中实践过语义化，而非背诵定义。
  • 能否从可访问性、SEO、可维护性三个维度展开。
  • 是否了解语义化在组件化开发中的边界（何时不宜过度）。

回答框架

  1. 定义：语义化指用合适的标签表达内容意图（如<nav>、<article>）。
  2. 价值（三点）：SEO 权重、无障碍阅读（屏幕阅读器）、代码可读/可维护。
  3. 实践案例：重构一个后台系统时，从
    全面替换为语义标签，页面权重提升12%。
  4. 边界：复杂交互组件（如轮播）仍可能用
    +角色属性，不强制语义标签。

示例回答

“语义化使代码结构清晰，辅助SEO和无障碍。我在电商项目中重构首页，所有导航改为<nav>，文章列表用<article>，搜索引擎收录效率提升约15%。对于交互组件如日期选择器，我会保留语义角色而用

实现，保证用户体验优先。”

可能追问

  • “<i> 和 <em> 的区别？你会在什么场景使用？”
  • “WAI-ARIA 属性如何配合语义化使用？举例说明。”
  • “HTML5 新增的块级语义标签与旧浏览器的兼容方案？”
避坑提醒：不要只答“有利于SEO”就结束；不要强行把所有
改成语义标签导致维护混乱；不要忽略可访问性角色（role）与语义标签的互补关系。

面试问题

“请解释 CSS 层叠上下文（stacking context）和 BFC（块级格式化上下文）的区别与联系。”

面试官考察点

  • 对 CSS 视觉格式化模型的理解深度。
  • 能否用实际案例区分两者（如浮动清除、z-index 失效）。
  • 是否知道如何创建和影响这些上下文。

回答框架

  1. 定义层叠上下文：决定元素在 Z 轴的层级（z-index 生效前提）。
  2. 定义 BFC：独立渲染区域，内部元素不影响外部（用于清除浮动、防止 margin 合并）。
  3. 区别：层叠控制纵向堆叠，BFC 控制横向/内部渲染规则。
  4. 联系：overflow:hidden 可同时创建 BFC 和层叠上下文。
  5. 示例：使用position:relative + z-index解决弹窗遮罩层级问题；使用overflow:auto防止子元素溢出。

示例回答

“层叠上下文管理 Z 轴层级，BFC 管理内部元素布局。比如父容器用overflow:hidden可清除子浮动并防止 margin 穿透。而弹窗需创建独立层叠上下文，设置position:fixed + z-index:100。注意 BFC 不直接影响 z-index，但同一元素可兼具两种上下文。”

可能追问

  • “position: sticky 是否会创建层叠上下文？”
  • “display: flow-root 与 overflow: hidden 创建 BFC 时的副作用有什么区别？”
  • “详细说一个因层叠上下文导致 z-index 失效的真实排查案例。”
避坑提醒：不要混淆“BFC”和“层叠上下文”为同一概念；回答时先理清各自定义，再举例说明交互场景；不要只背概念，一定要结合定位失效或浮动清除等实际痛点。

面试问题

“闭包是什么？请举一个你在项目中必须使用闭包解决的具体问题。”

面试官考察点

  • 对闭包本质（函数+词法作用域链）的理解，而非背诵定义。
  • 能否识别闭包的正确使用场景（而非滥用导致内存泄漏）。
  • 是否了解闭包在模块化、防抖节流、React Hooks 中的实际运用。

回答框架

  1. 本质：函数可以访问其外部函数的变量（即使外部函数已返回）。
  2. 必须使用场景：实现私有变量（如单例模块）；回调中保存状态（如循环中的异步操作）。
  3. 项目案例：封装一个请求拦截器，通过闭包持有 和刷新逻辑，避免全局变量污染。
  4. 注意事项：及时解除不再使用的闭包引用，防止内存泄漏。

示例回答

“闭包让函数记住其创建时的作用域。我在工具函数库中用闭包封装 createInstance，内部保留配置对象，外部只能通过暴露的接口读写。还有一个场景是 for 循环绑定事件时，利用 IIFE 创建闭包保存循环变量，解决点击事件只触发最后一个值的经典问题。”

可能追问

  • “闭包中的变量是值传递还是引用传递？请用代码证明。”
  • “React Hooks 中的闭包陷阱（stale closure）是如何产生的？如何避免？”
  • “讲一个你实际线上排查到的因闭包导致的内存泄漏案例，如何定位和修复。”
避坑提醒：不要只背诵“函数内返回函数”的抖机灵答案；务必给出项目中的真实场景（如工具库、事件循环处理器）；闭包陷阱（循环中异步）是高频考点，必须能手写解决代码；同时主动提及防内存泄漏策略（解绑事件、置 null）。

高频考点对比速查表（面试复习用）

考点 常见追问方向 工程落地示例 避坑点
HTML 语义化 WAI-ARIA / SEO 原理 / 旧浏览器兼容 后台管理系统首屏重构，SEO 提升15% 不要为语义而把所有 div 替换
CSS 层叠/BFC z-index 失效排查 / flow-root / 粘性定位 弹窗遮罩层层级问题，用 position:fixed + z-index 不要混用 BFC 和层叠上下文概念
JS 闭包 模块化 / 循环异步 / React Hooks stale closure 封装请求拦截器，闭包持有 主动清除引用防止内存泄漏