返回面试题列表

前端面试题合集

前端面试题合集（共15题）

✅ 题目1：什么是虚拟 DOM？它的优缺点是什么？

标准答案： 虚拟 DOM（Virtual DOM）是对真实 DOM 的 JavaScript 对象映射，用于在内存中表示页面结构。通过比较两棵虚拟 DOM 树的差异（diff），只更新真实 DOM 中实际变化的部分，从而减少频繁操作真实 DOM 带来的性能开销。

  • 优点：
    • 提高性能，减少不必要的 DOM 操作；
    • 跨平台（同一虚拟 DOM 可用于服务器渲染、微信小程序等）。
  • 缺点：
    • 首次渲染有一定开销；
    • 不适合频繁大规模 DOM 变动场景，可能比手写 DOM 操作慢。

✅ 题目2：浏览器从输入 URL 到页面渲染完成的过程？

标准答案：

  1. 浏览器解析 URL，通过 DNS 查询域名对应的 IP；
  2. 建立 TCP 三次握手；
  3. 发送 HTTP(S) 请求到服务器；
  4. 服务器响应 HTML 文件；
  5. 浏览器开始解析 HTML：
    • 遇到 CSS、JS、图片等资源时并发请求；
    • HTML 解析生成 DOM Tree；
    • CSS 解析生成 CSSOM；
  6. 合并 DOM 和 CSSOM 生成 Render Tree；
  7. 根据 Render Tree 进行布局（Layout）；
  8. 进行绘制（Paint）到屏幕；
  9. 遇到阻塞渲染的 JS，会暂停解析 HTML 直到 JS 执行完毕。

✅ 题目3：什么是闭包？它的用途和优缺点？

标准答案： 闭包是函数与其词法作用域形成的组合，当内部函数引用了外部函数的变量时，就形成闭包。

用途：

  • 实现私有变量；
  • 延长变量生命周期；
  • 创建工厂函数；
  • 函数式编程常用。

缺点：

  • 容易造成内存泄漏（不当使用导致变量无法被释放）；
  • 增加调试难度。

✅ 题目4：Vue 和 React 的 diff 算法核心差异？

标准答案：

  • React 使用基于同层比较的 Diff 算法，通过 key 来优化列表更新，但默认是 O(n³) 的 Diff，采用启发式算法优化到 O(n)。
  • Vue 2 的 Diff 算法与 React 类似，同样使用双端对比策略，但 Vue 通过静态节点标记（PatchFlag）可减少不必要的对比。
  • Vue 3 在编译阶段生成优化信息，将 Diff 精细化到动态节点上，实现更快更新。

✅ 题目5：你在前端性能优化方面做过哪些工作？

标准答案：

  • 减少 DOM 操作次数（合并更新、虚拟列表）；
  • 图片资源压缩、懒加载（lazyload）；
  • 使用 CDN 加速静态资源；
  • 使用 HTTP2、Gzip Brotli 压缩；
  • 长列表分页或虚拟滚动；
  • 利用浏览器缓存，设置合理缓存策略；
  • SSR静态化减少首屏白屏时间。

✅ 题目6：什么是事件委托？它的原理和使用场景？

标准答案： 事件委托（Event Delegation）是通过事件冒泡，将子元素的事件交由父元素统一处理的一种事件绑定方式。

原理：

  • 浏览器的事件冒泡机制；
  • 在父节点监听事件，通过 event.target 判断触发的子节点。

使用场景：

  • 列表中大量子元素需要绑定同类事件；
  • 动态增删子节点的场景。

✅ 题目7：JavaScript 原型链是什么？它是如何实现继承的？

标准答案： 原型链是对象通过 __proto__（或 ES6 的 Object.getPrototypeOf）向上查找属性和方法，形成的查找路径。当访问对象属性时，如果自身不存在，就会沿着原型链向上查找。

JS 继承通过构造函数的 prototype 指向父类实例，从而继承父类属性和方法。ES6 提供 class 语法糖，底层仍是基于原型链。

✅ 题目8：什么是 BFC（块级格式化上下文）？如何触发 BFC？

标准答案： BFC 是 W3C CSS 视觉格式化标准中的概念，一个独立的渲染区域，区域内的元素布局不会影响到外部。

BFC 作用：

  • 避免 margin 重叠；
  • 包含浮动；
  • 实现自适应两栏布局。

触发方式：

  • 根元素（html）；
  • 设置 overflow 为非 visible；
  • 设置 float；
  • 设置 display inline-blockflexgridtable-cell；
  • 设置 position absolutefixed。

✅ 题目9：Vue 中 computed 和 watch 的区别？

标准答案：

  • computed：基于依赖收集，有缓存，依赖值不变不会重新计算，适合做简单衍生状态；
  • watch：监听响应式数据变化，执行回调，适合处理异步请求、复杂逻辑、多个数据联动。

✅ 题目10：XSS 攻击是什么？你在项目中如何防范？

标准答案： XSS（Cross-Site Scripting，跨站脚本攻击）是攻击者在页面插入恶意脚本，使用户在访问时被执行。

防范措施：

  • 后端对输入内容进行转义、白名单过滤；
  • 前端对输出内容做 encode；
  • 使用 CSP（内容安全策略）限制脚本来源；
  • 过滤 URL 中的参数，防止注入。

✅ 题目11：Vue 的响应式原理是如何实现的？Vue2 和 Vue3 的区别？

标准答案： Vue2 使用 Object.defineProperty 劫持属性，实现依赖收集与变更通知；Vue3 使用 Proxy 完全代理对象，解决 Vue2 对对象新增删除属性、数组索引无法监听的问题，并有更优性能。

✅ 题目12：前端模块化中 CommonJS 和 ESModule 的核心区别？

标准答案：

  • CommonJS：Node.js 使用，requiremodule.exports，同步加载；
  • ESModule：浏览器和 Node.js 支持，importexport，静态分析、支持异步加载、Tree Shaking。

✅ 题目13：浏览器的同源策略是什么？如何解决跨域？

标准答案： 同源策略限制 JS 只能访问相同协议、域名、端口的资源，防止安全漏洞。

常用跨域方案：

  • CORS；
  • JSONP（GET 请求）；
  • nginx 代理；
  • iframe + postMessage；
  • 利用标签跨域（script、img）；

✅ 题目14：什么是 Tree Shaking？如何在打包中发挥作用？

标准答案： Tree Shaking 是移除项目中未使用的导出内容的打包优化技术，通过 ESModule 的静态特性，分析依赖树并剔除无用代码，从而减小 bundle 大小。

✅ 题目15：你在项目中做过哪些前端可观测性监控工作？

标准答案：

  • 接入错误监控平台（SentryFundebug），捕获 JS 报错并上报；
  • 使用 Performance API 采集白屏、首屏加载时间；
  • 埋点收集页面访问、点击等用户行为数据；
  • 配合后端做日志存储、告警，并用 ELK、BI 可视化分析。