前端面试常见 20 道高频题（含参考答案）

前端开发主要负责用户可见、可交互的呈现层，即 HTML、CSS、JavaScript 等技术构建的网站或应用界面。和大多数技术岗位一样，前端面试不仅要求会写代码，还要能解释背后的原理和设计思路。下面总结了 20 道常见的前端面试题及要点回答，帮你面试时不被问懵。

1. var、let、const 的区别？
   作用域：var 是全局/函数作用域，let 和 const 是块级作用域。
   声明：三者都能声明未初始化变量。
   赋值：var 可重复声明和赋值，let 可重新赋值但不可重复声明，const 不可重新赋值/声明。
   访问：var 声明提升，未赋值时是 undefined；let 和 const 会形成“暂时性死区”，初始化前不可访问。
2. 如何记录前端错误？
   开发时可用 console.error()。
   上线应用需集成 错误上报平台（如 Sentry、LogRocket），可记录用户行为轨迹、异常堆栈并存储在云端，方便复现和调试。
3. 标签的作用？
   定义页面元信息：关键词、描述、作者、字符集、视口等。
   必须放在 内。
   示例：
   
   
4. 什么是 CSS 规则？
   由 选择器 和 声明块组成：
   .container {
   background-color: red;
   font-size: 15px;
   }
   选择器 .container 作用于目标元素，声明块里写具体样式。
5. 如何实现前端国际化？
   常用库：i18next。支持翻译文件、按用户语言切换文案。
   布局方向：CSS 的 direction: rtl / ltr。
   框架支持：Next.js 提供国际化路由。
   若布局差异大，可考虑为不同语言单独做页面。
6. Bootstrap 栅格系统？
   基于 容器 (container) → 行 (row) → 列 (col)。
   支持 6 个响应式断点（xs-xxl）。
   可轻松实现自适应布局。
7. 什么是语义化 HTML？
   使用有意义的标签（如 ），而不是单纯 。
   优势：SEO 友好、可读性强、无障碍访问更佳。
8. 什么是 Promise？
   表示异步操作的最终结果。
   成功返回 resolve 值，失败返回 reject。
   优点：避免回调地狱，使异步逻辑更直观。
   图片
9. 什么是高阶函数？JS 支持吗？
   高阶函数：接受函数作为参数，或返回函数。
   JS 完全支持：
   function getFunc() {
   return () => console.log(“Hello”);
   }
10. 如何优化前端加载速度？
    减小 bundle：用 webpack-bundle-analyzer 分析，移除无用依赖、启用 Tree-shaking。
    压缩资源：minify JS/CSS，PurgeCSS 移除无用样式。
    使用轻量图片格式：WebP 替代 PNG/JPEG。
    分包：懒加载、按需加载。
11. 什么是 XSS（跨站脚本攻击）？
    攻击者向页面注入恶意脚本，浏览器执行时窃取用户数据、Cookie 或冒充用户操作。
    防御：输入校验、输出转义、CSP（内容安全策略）。
12. CSS 的 BEM 命名规范？
    Block-Element-Modifier：

好处：避免命名冲突，结构清晰。

13. 如何实现全屏效果？
    使用 Fullscreen API：element.requestFullscreen()、document.exitFullscreen()。
    React 可用三方库 react-full-screen 封装。
    图片
14. 与 的区别？
    ：块级元素，用于布局容器。
    ：行内元素，常用于小范围文字或样式修饰。
15. 什么是 Mixin？
    一组可复用的方法，可“混入”其他类中。
    JS 示例：
    const mixin = { hi() { console.log(“hi”) } }
    Object.assign(User.prototype, mixin)
16. 什么是 DOM？
    文档对象模型：把 HTML 结构解析为树形节点。
    JS 可操作 DOM 节点以修改内容、结构、样式。
17. 什么是 Webpack？
    模块打包工具：将 JS、CSS、图片等打包成浏览器可执行的文件。
    支持 TS 转译、代码压缩、热更新等。
18. 什么是 npm？
    Node.js 默认的包管理器。
    包含命令行工具和线上 npm 仓库，可安装/管理依赖。
19. CSS 与 SCSS 的区别？
    CSS：层叠样式表。
    SCSS：Sass 的一种语法扩展，支持嵌套、变量、函数等。
    例：
    .container {
    .header {
    span { color: red; }
    }
    }
20. 如何提升技术 SEO 性能？
    核心指标：Google Core Web Vitals（加载速度、交互延迟、视觉稳定性）。
    工具：Chrome DevTools → Lighthouse 报告。
    优化：减少 CLS、提升 LCP、降低 FID。
    注意：SPA 的 SEO 较差，需要 SSR/静态导出提升可爬取性。
    ✅ 总结： 面试不仅要“会写”，更要“说得清楚”。在准备时多思考：
    这个概念为什么重要？
    它解决了什么问题？
    实际项目里我怎么用的？
    这样才能在面试中答得深入又有说服力。
    要不要我帮你把这 20 道题整理成一个 Markdown 笔记版，方便你面试前临时复习？

最后：
20个前端开发者必备的响应式布局
深入React:从基础到最佳实践完整攻略
python 技巧精讲
React Hook 深入浅出
CSS技巧与案例详解
vue2与vue3技巧合集