前端面试课程
面向前端面试的结构化课程，涵盖 JavaScript、HTML、CSS、React、浏览器行为、性能、无障碍与安全，并配有练习题。
课程进度
0 / 5
返回课程
你将学到
- 理解前端面试形式。
- 解释 JavaScript 基础和异步行为。
- 构建语义化 HTML 和响应式 CSS 布局。
- 使用 React 组件、Hooks 和协调机制。
- 改善性能、无障碍与安全。
开始前准备
- 具备基础 JavaScript 和 HTML 知识会有帮助。
- 建议熟悉 React 基础。
- 构建小型 UI 组件有助于练习。
课程 1 了解前端面试
前端面试考察 JavaScript、HTML、CSS、React、浏览器行为、性能、无障碍与安全。候选人需要解释概念、编写代码片段并解决 UI 问题。建议先学习 JavaScript 基础，如闭包、Promise 和数组方法，再学习 HTML 语义与 CSS 布局，然后学习 React 组件与 Hooks，最后学习浏览器事件、性能与安全。你需要能解释事件循环如何工作、React 列表为什么需要 key，以及如何优化 Core Web Vitals。面试官看重清晰的推理和实际的取舍。本课程把主题分成五节，并配有 60 道原创练习题供面试前复习。
示例
示例：被问到 JavaScript 基础时，解释闭包和 Promise。课程 2 JavaScript 基础
JavaScript 面试通常从语言基础开始。闭包是保留外部作用域访问权的函数，可用于私有数据和函数式模式。提升会把声明移到作用域顶部，但 let 和 const 在声明前不会初始化。严格相等 === 避免类型转换，而 == 可能产生意外。Promise 表示异步操作的结果，async/await 让代码更易读。事件循环处理任务和微任务，使 Promise 回调在正确时机运行。map、filter、reduce 等数组方法是日常工作的核心。纯函数对相同输入返回相同输出且没有副作用。不可变性意味着通过创建新值来更新数据，而不是修改现有值。要多练习用简短代码示例解释这些概念。
示例
示例：[1, 2, 3].map(n => n * 2) 返回 [2, 4, 6]。课程 3 HTML、CSS 与布局
语义化 HTML 使用 header、nav、main、article、footer 等有意义的元素来改善无障碍和 SEO。CSS 特异性决定选择器冲突时哪条规则生效。盒模型顺序是内容、内边距、边框和外边距。Flexbox 适合一维布局，CSS Grid 处理二维行列。rem 相对根字体大小，em 相对父元素，vw 相对视口宽度，vh 相对视口高度。媒体查询根据屏幕宽度等条件应用响应式样式。position: fixed 使元素相对视口定位，box-sizing: border-box 把内边距和边框计入宽度。:hover 等伪类选择元素状态。要多练习从零构建布局，并解释为什么选择 flexbox 或 grid。
示例
示例：用 CSS Grid 构建带侧边栏和内容区的仪表板。课程 4 React 与浏览器
React 面试关注组件、props、state、Hooks 和渲染。组件是可复用 UI 片段，props 是从父组件传入的数据，state 是组件内部管理的数据。useState 管理值，useEffect 运行副作用，useMemo 记忆计算结果。React 使用虚拟 DOM 和协调机制高效更新真实 DOM，列表项需要 key 来保持稳定身份。受控输入把表单值保存在 state 中。浏览器问题涵盖 DOM、元素选择、事件、冒泡、事件循环、微任务、requestAnimationFrame 和 Cookie。事件委托在父元素上挂一个监听器处理多个子元素。stopPropagation 停止冒泡，preventDefault 阻止默认行为。要多练习追踪重新渲染并解释 effect 何时运行。
示例
示例：const [count, setCount] = useState(0) 创建计数器状态。课程 5 性能、无障碍与策略
性能题考察如何让页面更快。防抖在活动停止后延迟执行，节流限制执行频率，懒加载延迟加载资源。Core Web Vitals 包括衡量加载的 LCP、交互的 INP 和视觉稳定性的 CLS。减小包体积、缓存和避免布局偏移可以改善这些指标。无障碍题涵盖语义化 HTML、ARIA 属性、键盘支持和对比度。安全题涵盖 XSS、内容安全策略和 CORS。面试官希望看到结构化回答：定义问题、指出指标、识别可能原因并提出有优先级的修复方案。要多练习解释如何诊断慢页面、按钮为何不可访问，以及如何防止脚本注入。