2000/6/3大约 7 分钟
前端初级面试题精选
本清单覆盖 18 道高频题，拆为 HTML/CSS、JavaScript、工程实践三大模块，每题给出参考答案、追问与考察要点，帮助初级前端构建系统化答题思路。
HTML / CSS 基础
解释标准盒模型与 IE 盒模型的区别，并写出在样式层面切换的方式。
- 参考答案：标准盒模型下元素宽高只包含 content，padding/border 会向外扩张；IE 盒模型将 padding 与 border 计入 width/height。可通过
box-sizing: content-box或box-sizing: border-box切换，常见做法是对所有元素设置 border-box 以便计算布局。 - 追问：盒模型切换后对 margin 折叠是否有影响？
- 考察要点：理解 box-sizing、布局计算与兼容策略。
- 参考答案：标准盒模型下元素宽高只包含 content，padding/border 会向外扩张；IE 盒模型将 padding 与 border 计入 width/height。可通过
为一篇博客文章设计语义化结构，需包含导航、正文、侧边栏和页脚。
- 参考答案：推荐骨架：
<header>包含 LOGO 与<nav>；主区域使用<main>，内部用<article>承载正文、<aside>放推荐或作者信息；页脚<footer>放版权与联系。语义化标签利于 SEO、无障碍与可维护性。 - 追问：IE9 以下不认识语义标签时如何兼容？
- 考察要点：语义标签、可访问性与兼容处理。
- 参考答案：推荐骨架：
实现左侧 200px 固定、右侧自适应的两栏布局，请给出 Flex 与 float 两种方案。
- 参考答案：Flex：父元素
display:flex，左列设flex:0 0 200px，右列flex:1即可。浮动：左列float:left;width:200px，右列margin-left:200px或overflow:hidden清除浮动。两种方案需结合清除浮动或align-items:stretch保证高度。 - 追问：若需要支持等高列该如何处理？
- 考察要点：常见布局手法与兼容性差异。
- 参考答案：Flex：父元素
描述 CSS 优先级的计算规则，并计算
#app .card > p.highlight的权重。- 参考答案：优先级从低到高依次为标签、类/伪类、ID、内联样式、!important。该选择器包含 1 个 ID、2 个类、1 个标签，权重为 0-1-2-1。覆盖时可提高权重或使用更具体选择器，但应避免滥用 !important。
- 追问：如何在不改 HTML 的前提下覆盖该规则？
- 考察要点：权重计算、样式覆盖策略。
使用媒体查询在 768px 以下折叠导航栏，请写出关键样式并说明断点依据。
- 参考答案：常见写法：
@media (max-width:768px){ .nav { display:none; } .nav-toggle{ display:block; } }。768px 对应常见平板宽度，可依据实际数据调整。折叠时需保证可访问性，例如通过 aria-* 属性描述状态。 - 追问：深色模式或 prefers-reduced-motion 需额外处理吗？
- 考察要点：响应式断点、无障碍与兼容。
- 参考答案：常见写法：
如何实现一个三列自适应网格，使卡片在桌面端显示 3 列、平板 2 列、移动 1 列？
- 参考答案：可使用 CSS Grid：父元素
display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;。或结合媒体查询手动设置列数。Grid 能自动在不同宽度下注入合适列数。 - 追问：需要兼容旧浏览器时如何降级？
- 考察要点：响应式网格与降级方案。
- 参考答案：可使用 CSS Grid：父元素
JavaScript 与交互
分别说明 var、let、const 的作用域与变量提升行为。
- 参考答案：var 存在函数作用域且会被提升为 undefined；let/const 具块级作用域，在声明前访问会触发暂时性死区；const 还需初始化且引用不可重新赋值。
- 追问：for 循环中 let 和 var 的差异是什么？
- 考察要点：作用域、TDZ、闭包。
阐述事件捕获与冒泡流程，并写出阻止事件传播与默认行为的代码。
- 参考答案：事件先从 document 捕获到目标，再冒泡回 document。可通过
event.stopPropagation()或event.stopImmediatePropagation()阻止传播，用event.preventDefault()取消默认行为。绑定监听器时第三个参数决定处于捕获还是冒泡阶段。 - 追问：自定义事件如何触发与监听？
- 考察要点：DOM 事件模型、事件委托。
- 参考答案：事件先从 document 捕获到目标，再冒泡回 document。可通过
列举判断数组、函数、对象类型的三种常见方式及优缺点。
- 参考答案：1)
typeof：可识别函数但对象/数组均为 object；2)instanceof：依赖原型链，不适用于跨 iframe；3)Object.prototype.toString.call(value)：返回[object Array]等字符串最可靠。ES6 还可用Array.isArray。 - 追问：如何判断一个值是否为 PromiseLike？
- 考察要点：类型判断、兼容性。
- 参考答案：1)
手写防抖与节流函数，说明在搜索提示与滚动监听场景的应用差异。
- 参考答案：防抖：使用定时器延迟调用，重复触发时重置，适合输入框搜索降低频率；节流：设定间隔，仅在间隔内执行一次，适合 scroll、resize。实现时需返回可取消函数并考虑立即执行选项。
- 追问：如何支持同步立即执行与取消功能？
- 考察要点：闭包、计时器管理、API 设计。
阅读
(function(){ console.log(a); var a = 3; console.log(a); })();写出输出并解释原因。- 参考答案：输出
undefined与3。var 声明被提升，初始值为 undefined，赋值发生在第二次输出前。 - 追问：若改为 let 会发生什么？
- 考察要点：变量提升与 TDZ。
- 参考答案：输出
如何实现数组去重？请给出基于 Set、filter/indexOf 与手写 Map 的三种方案。
- 参考答案：Set：
[...new Set(arr)]简洁且 O(n)。filter：arr.filter((item,idx)=>arr.indexOf(item)===idx)，但 indexOf O(n)。Map：遍历 arr，使用对象或 Map 记录出现过的值再 push，适合需要处理对象键的场景。 - 追问：若数组元素为对象，如何根据某字段去重？
- 考察要点：去重方法、时间复杂度、场景判断。
- 参考答案：Set：
工程实践与调试
比较 webpack 与 Vite 的核心差异，并给出设置路径别名的配置示例。
- 参考答案：Vite 使用 Esbuild 进行即时编译、利用浏览器原生 ESM，开发体验更快；webpack 通过打包构建模块。webpack 在
resolve.alias配置，Vite 在resolve.alias或@指向path.resolve(__dirname,'src')。 - 追问：如何注入不同环境变量？
- 考察要点：构建原理、配置能力。
- 参考答案：Vite 使用 Esbuild 进行即时编译、利用浏览器原生 ESM，开发体验更快；webpack 通过打包构建模块。webpack 在
项目中如何采集并上报 JS 错误？需要包含哪些字段？
- 参考答案：可通过 window.onerror、unhandledrejection 捕获错误，利用 try/catch 包装关键逻辑，上报时携带错误类型、堆栈、页面 URL、用户信息、版本号等字段，并配合 SourceMap 还原。
- 追问：如何处理跨域脚本导致的 Script Error？
- 考察要点：错误监控链路、隐私合规。
说明三种跨域方案（CORS、JSONP、反向代理）的原理与优缺点。
- 参考答案：CORS：服务器设置 Access-Control-*，安全灵活；JSONP：利用 script 标签仅支持 GET，易被淘汰；代理：通过 Nginx/webpack-dev-server 中转，适合开发环境或 BFF。
- 追问：携带 Cookie 的跨域请求需要额外配置什么？
- 考察要点：跨域基础、安全考量。
移动端真机调试常用哪些工具？遇到网络问题如何排查？
- 参考答案：可使用 Chrome DevTools 远程调试、Safari + iOS、vConsole、小米/华为浏览器调试。网络排查可借助 Charles/Fiddler 抓包、WiFi 代理、ADB logcat。
- 追问：Hybrid 页面如何联调原生接口？
- 考察要点：调试工具、抓包、协作流程。
提交代码前的质量检查包含哪些步骤？请给出命令示例。
- 参考答案：常见流程：
npm run lint、npm run test -- --watch=false、npm run build验证产物、使用 Prettier 格式化、Commitlint 校验信息，并可结合 Husky + lint-staged 在 pre-commit 阶段自动执行。 - 追问：CI 中如何确保这些检查不会被跳过？
- 考察要点：质量保障、自动化、团队规范。
- 参考答案：常见流程：
如何定位线上白屏问题？请列出排查步骤。
- 参考答案：先看监控告警，确认是否构建产物或接口异常；通过 SourceMap 定位错误堆栈；检查版本回滚记录；复现场景并查看接口响应；必要时使用 Chrome Coverage 或 Performance 工具分析资源阻塞。
- 追问：如何防止白屏再次发生？
- 考察要点：排障流程、回滚策略、监控闭环。