前端面试题：JavaScript / DOM / 浏览器架构

1. JavaScript 的执行机制是什么？

• 通过词法分析、语法分析生成 AST。
• 执行时由 JS 引擎的解析器、编译器和执行器处理。
• V8 采用即时编译（JIT）、隐藏类和内联缓存优化性能。

2. 事件循环（Event Loop）是如何工作的？

• 调用栈执行同步代码。
• 微任务队列（Promise、MutationObserver）优先于宏任务（setTimeout、I/O）。
• 每轮事件循环先清空微任务，再执行下一个宏任务。

3. 解释 JS 中的闭包（closure）。

• 函数可以引用其定义环境中的变量。
• 即使外部函数执行完成，内部函数仍可访问外部变量。
• 常用于封装私有状态和实现模块化。

4. this 在 JavaScript 中如何确定？

• 默认绑定：非严格模式下指向全局对象。
• 隐式绑定：对象方法调用时指向调用所在对象。
• 显式绑定：call、apply、bind。
• new 绑定：指向新创建实例。
• 箭头函数没有自己的 this，继承自定义函数上下文。

5. 原型链与继承是什么？

• 对象通过内部 [[Prototype]] 链查找属性。
• 构造函数创建实例时，实例 __proto__ 指向构造函数的 prototype。
• ES6 class 语法只是语法糖，底层仍然是原型链。

6. DOM 事件流包括哪些阶段？

• 捕获阶段：从根节点向目标节点传递。

• 目标阶段：事件到达目标节点。

• 冒泡阶段：从目标节点向上冒泡回根节点。

• 使用 addEventListener(..., { capture: true }) 监听捕获阶段。

7. 什么是事件委托？

• 利用事件冒泡，将父级元素绑定事件监听。
• 适合处理大量动态生成的子元素。
• 提高性能，减少事件处理器数量。

8. 什么是重排（reflow）和重绘（repaint）？

• 重排：布局计算发生变化，需要重新计算元素尺寸和位置。
• 重绘：视觉样式变化，但布局不变。
• 频繁 DOM 操作可能导致性能问题。

9. 浏览器渲染过程的关键步骤是什么？

• HTML 解析生成 DOM 树。
• CSS 解析生成 CSSOM。
• DOM + CSSOM 合并为渲染树。
• 布局阶段计算节点位置。
• 绘制阶段把内容绘制到屏幕。

10. 如何避免内存泄漏？

• 解除不再使用的事件监听器。
• 避免全局变量长期持有引用。
• 小心闭包中保留大型对象。
• 及时清理定时器和 DOM 引用。

11. 模块化方案有哪些？

• 传统：IIFE、AMD、CommonJS。
• 现代：ES Modules（import / export）。
• Webpack、Rollup、Vite 等工具支持模块打包。

12. 前端架构面试常见问题有哪些？

• 如何设计组件复用与状态管理？
• 如何拆分前端路由和页面结构？
• 如何处理跨域、认证和权限校验？
• 如何保证前端应用的性能和可维护性？