前端面试核心知识点梳理
在技术栈清晰、项目经验扎实的前提下，面试表现往往取决于对基础知识的掌握深度。本文整理了前端开发中常见的高频考点，涵盖 JavaScript 核心机制、浏览器工作原理、主流框架原理及网络协议等关键领域，旨在帮助开发者系统复习，提升面试通过率。
一、JavaScript 核心机制
1. 作用域与闭包
- 作用域链：理解变量查找的'原型链'规则，明确全局、函数及块级作用域的区别。
- 闭包：掌握函数内部访问外部变量的持久化机制，注意内存泄漏风险。
- 执行上下文：理解 EC（Execution Context）、VO（Variable Object）及作用域链的形成过程。
2. 原型与继承
- 原型链：理解
__proto__与prototype的关系，掌握 JS 继承的本质。 - 构造函数与实例：区分对象创建的不同方式及其内存分配差异。
3. 异步编程
- 事件循环（Event Loop）：深入理解宏任务与微任务的执行顺序，掌握单线程模型下的并发处理。
- Promise：掌握状态流转、链式调用及错误捕获机制。
- async/await：理解其基于 Generator 的实现原理，实现同步风格的异步代码。
二、ES6+ 新特性
- 解构赋值：数组与对象的解构语法及其默认值处理。
- 模块化：ES Module 与 CommonJS 的差异，动态导入与静态分析。
- 新增数据结构：Map、Set、WeakMap、WeakSet 的使用场景。
三、浏览器工作机制
1. 渲染流程
- 从 URL 到页面展示：DNS 解析、TCP 连接、HTTP 请求、服务器响应、浏览器解析 HTML/CSS/JS 的完整链路。
- 渲染树构建：DOM 树与 CSSOM 树的合并，重排（Reflow）与重绘（Repaint）的触发条件。
2. 内存管理
- 垃圾回收（GC）：理解标记清除算法，了解 V8 引擎的内存管理机制。
四、性能优化实战
- 加载优化：资源压缩、懒加载、预加载、CDN 加速策略。
- 运行时优化：减少 DOM 操作、防抖节流、虚拟列表、Web Worker 应用。
- 缓存策略：强缓存与协商缓存的配置，Service Worker 离线能力。
五、主流框架原理
Vue.js
- 核心机制：响应式原理（Object.defineProperty vs Proxy）、虚拟 DOM 与 Diff 算法。
- 生命周期：各钩子函数的执行时机及应用场景。
- 指令与修饰符：v-if/v-show 区别、nextTick 的作用。
React
- 组件体系：类组件与函数组件、Hooks 原理。
- 状态管理：Redux 数据流、Context API 使用。
