面试题整理这件事，我见过太多候选人走进一个误区：以为把网上流传的题库背一遍就能过关。实际上，面试官手里的题目看起来眼熟，但考察的点根本不是标准答案本身，而是你面对一个常见问题时，能不能把背后的原理、边界条件和取舍逻辑讲清楚。尤其像金山云这类云计算背景的厂商，前端岗位的面试题会更偏向工程落地和细节深度——服务端渲染、网络链路、性能优化这些方向都是重灾区。
这篇文章是一位长期关注主流云厂商前端面试方向的朋友整理的，结合了众多候选人的复盘反馈和常规面试题库的回归总结。里面每一道题都按“问题、参考答案、考察意图”三个层次展开，篇幅关系先放出上半部分，主要覆盖 JavaScript 基础、浏览器机制、CSS 布局、框架原理和手写代码这五个核心模块。整理出来的这些题，不只是给你背答案用的，更重要的是让你理解面试官抛出这个问题时，内心真正在评估什么。
1. 这份前端题库是怎么整理的：考点分布与答题思路
先交代一下整理思路。市面上能搜到的题目很多，但多数是堆砌式的罗列，没有揭示考察层次。我在整理这份清单时，刻意按照前端面试中五个稳定的考察维度来划分：语言基础（JavaScript）、运行时环境（浏览器与网络）、样式体系（CSS）、工程框架（Vue/React）、以及代码实现能力（手写题）。
这五个维度不是随便分的，它们分别对应一名前端工程师日常工作中碰到的五类实际问题。
- JavaScript 基础考察的是语言本身的掌握程度，比如原型链、闭包、异步模型，属于“写不写得出正确代码”的底层能力。
- 浏览器与网络机制考察的是对运行环境的理解，比如从输入 URL 到页面渲染经历了什么、缓存如何工作、跨域如何产生，属于“线上问题能不能快速定位”的能力。
- CSS 布局考察容易被忽略，但在简历筛选阶段和一面中经常出现，属于“视觉还原度和布局方案选型”的能力。
- 框架原理考察的是工程实践深度，比如响应式系统、diff 算法、组件通信，属于“离开框架文档能不能独立设计”的能力。
- 手写代码题考察的是临场编码习惯和边界意识，属于“拆分问题、逐步验证”的思维品质。
一个很关键的经验是：回答任何一道题，都尽量遵循“结论优先、原理随后、场景补充”的结构。比如面试官问你“什么是闭包”，不要只背定义，先用一句话说本质，再说执行上下文和变量对象的关系，最后补一个实际项目中的使用场景和潜在内存问题。这种回答方式比单向背诵流畅得多，也更容易让面试官沿着你的回答深挖你擅长的领域。
另外，很多候选人会忽略「追问」。面试通常不会止步于一个标准答案，面试官会针对你回答里的某句话继续往下问。比如你说“事件循环把宏任务和微任务分开执行”，他很可能追问“那 Promise 和 setTimeout 混在一起时，执行顺序到底是什么”。所以下面的参考答案我都做了延伸处理，把常见的追问方向也一并点出。
2. JavaScript与异步编程：原型链、闭包、事件循环三类必考题
JavaScript 是前端面试的绝对核心，而这一模块里出现频率最高的又集中在三个点上：原型链、闭包、事件循环。听起来是老生常谈，但每个点都能向外延伸出很多分支。
2.1 原型链：一张图说清实例、构造函数和原型的关系
问题：能否讲一下 JavaScript 中原型链的工作原理，以及new一个对象时具体发生了什么？
参考答案：JavaScript 中的每个对象都有一个内部属性[[Prototype]]，指向其构造函数的prototype对象。当我们访问一个对象的属性时，引擎会先查找对象自身属性，如果没有，就沿原型链向上查找，直到Object.prototype的上一级（null）为止。new操作符做的事情可以拆成四步：创建一个空对象；将这个空对象的[[Prototype]]指向构造函数的prototype；将构造函数内的this绑定到这个空对象上并执行构造函数；如果构造函数返回了引用类型，则返回该引用，否则返回这个新创建的对象。
考察意图：这个问题看似简单，但能很明显地区分“背过概念”和“真正写过”。候选人如果能从内存结构层面解释“函数也是对象”“Function.prototype本身的原型链指向Object.prototype”，通常说明对语言底层有扎实的理解。
追问方向：面试官很可能会继续问 ES6 class 的继承和原型链继承的区别，以及Object.create(null)的作用。这里需要补充说明 class 语法本质上是原型链的语法糖，但super的处理、静态继承等细节会造成行为差异。我自己在准备时还特意画过一张原型链关系图，面试时如果被问到可以直接在纸上画出来，这种直观表达很加分。
2.2 闭包：定义、应用场景和内存释放一并说清楚
问题：什么是闭包？实际项目中哪些场景用到了闭包？如何避免闭包带来的内存问题？
参考答案：闭包是指一个函数能够访问其外部作用域中变量的能力，即使外部函数已经执行完毕。JavaScript 采用词法作用域，函数定义时所处的作用域链会被保存下来，这就是闭包能够“记住”外部变量的原因。实际项目中闭包的经典应用包括：防抖节流函数中保存定时器 ID；模块化开发中用 IIFE 创建私有变量；工厂函数中保存配置参数。关于内存问题，闭包本身不会必然造成泄漏，真正的问题在于闭包引用的变量被意外长期持有——例如在事件监听器或定时器中使用闭包且未解除引用。排查时可以用浏览器开发者工具的 Memory 面板做堆快照对比，看看对象是否被 Detached 节点持有。
考察意图：闭包是理解 JavaScript 作用域和执行上下文的试金石。面试官不只关心你会不会用，更关心你是否知道闭包在 V8 中如何触发上下文缓存、ESLint 的no-loop-func规则为何存在等等。回答时如果能主动联系到自己的实际项目，比如某个图表组件中依赖闭包保存缩放状态，会显得更有说服力。
2.3 事件循环：宏任务与微任务的执行顺序，附一道必问输出题
问题：请解释一下浏览器环境下的事件循环机制。下面的代码输出顺序是什么？
console.log('script start'); setTimeout(() => { console.log('setTimeout'); }, 0); Promise.resolve().then(() => { console.log('promise1'); }).then(() => { console.log('promise2'); }); console.log('script end');参考答案：按照事件循环机制，执行顺序为：script start、script end、promise1、promise2、setTimeout。原因是一个宏任务（这段脚本本身）执行时，会遇到微任务（Promise 的 then）和宏任务（setTimeout）的入队操作。当前宏任务执行完毕后，会立刻清空微任务队列，之后才取出下一个宏任务执行。这里有个容易记错的地方：setTimeout(fn, 0)并不是立即执行，而是要等当前任务和微任务全部完成后，再从宏任务队列中取出；同时多个微任务之间还要按照入队顺序逐个执行，所以promise1一定先于promise2，而两者都先于setTimeout。
考察意图：这道题几乎成了前端面试的“入场券”，不仅考察基础知识，还考察候选人是否了解 Node.js 环境下的事件循环差异。需要补充的是，Node.js 中还有process.nextTick和setImmediate，其执行时机与浏览器环境不同。我在整理时遇到很多候选人知道浏览器端顺序，但说不清 Node 端的nextTick为什么优先于 Promise 微任务，这类细节恰恰是拉开差距的地方。
3. 浏览器与网络机制：从URL输入到页面渲染的完整链路考点
这一模块是云计算厂商前端面试里的重点，因为服务端的动静分离、CDN 调度、网关层对前端的影响都体现在这里。如果只说“输入 URL 后发送请求”这种一句话答案，基本就告别下一轮了。
3.1 URL 输入后的完整渲染流程：至少要说全九个环节
问题：当用户在浏览器地址栏输入一个网址并回车，到看到页面内容，中间经历了哪些关键步骤？
参考答案：完整链路可以拆成这几个环节：首先是 URL 解析，浏览器判断输入的是关键字还是合法地址；然后是 DNS 查询，依次查找浏览器缓存、系统缓存、路由器缓存、本地 DNS 服务器、根域名服务器、顶级域名服务器和权威域名服务器，拿到目标 IP；接着建立 TCP 连接，经历三次握手；如果是 HTTPS 还需要额外的 TLS 握手协商加密套件；之后浏览器构造 HTTP 请求并发送；服务器处理请求，返回 HTTP 响应；浏览器收到响应后检查状态码和 Content-Type，开始解析 HTML；解析过程中遇到 CSS、JavaScript、图片等子资源会按照优先级和加载策略并行或阻塞式加载；最后是构建 DOM 树、CSSOM 树、合成渲染树、计算布局、绘制和合成。
考察意图：这个问题最怕只说“发送请求，拿到 HTML，解析渲染”就结束。面试官想听的是细节，例如浏览器同时维护多个 TCP 连接（域名分片）、关键渲染路径会阻塞的因素（没有 defer 或 async 的 script）、回流重绘的触发条件。我在给朋友做模拟面试时发现，能把“浏览器的预扫描机制”这种偏门但真实的细节讲出来的人，当场就让面试官的记录多了几个符号。
追问方向：面试官经常顺势问“为什么 CSS 放在 head 里、script 放在 body 末尾”？这背后的理由是 CSSOM 构建完成后才进入渲染树构建阶段，而同步脚本会阻塞 DOM 解析。如果候选人能进一步提到defer与async的区别，以及preload、prefetch的资源提示，这一题就稳了。
3.2 HTTP 缓存：强缓存与协商缓存的字段对照
问题：浏览器 HTTP 缓存中，强缓存（200 from cache）和协商缓存（304）分别对应哪些响应头？如何设置最优缓存策略？
参考答案：强缓存相关字段主要是Cache-Control（优先级更高）和Expires。Cache-Control常用的指令有max-age、no-cache、no-store、private、public等。协商缓存相关字段分为两组：一组是Last-Modified配合If-Modified-Since（基于时间判断，精度到秒，存在缺陷）；另一组是ETag配合If-None-Match（基于内容标识，更准确）。实际生产环境里，对于带 hash 指纹的静态资源，通常采用“长期强缓存+内容变化则文件名变化”的策略，即Cache-Control: max-age=31536000, immutable；对于 HTML 文件则用no-cache确保每次回源验证。
考察意图：这个问题的重点是考察候选人对缓存链路中浏览器默认行为是否了解——例如用户刷新和普通导航对缓存的利用方式不同、304 也需要一次完整请求往返。云计算场景下，还会涉及 CDN 边缘节点的缓存控制，所以我会建议候选人额外准备一下 CDN 回源时Cache-Control的继承与覆盖规则。
3.3 跨域：为什么浏览器要限制？如何安全地解决？
问题：什么是浏览器同源策略？开发中常见的跨域解决方案有哪些？如何选择？
参考答案：同源策略是浏览器的一种安全机制，它规定只有协议、域名、端口完全相同的资源才能相互读写。前端开发中常见方案包括：JSONP（利用 script 标签不受同源限制，只支持 GET，一般用于对接老旧接口）；CORS（服务端设置Access-Control-Allow-Origin等响应头，是标准做法）；反向代理（通过 Nginx 或开发服务器将不同域名的请求转发到目标服务端，绕开浏览器的跨域限制，因为同源策略只约束浏览器端到服务器端的请求）；postMessage（用于 iframe 或 window 间的通信）。
考察意图：面试官关注候选人能否说明每种方案的适用场景和缺口。比如 CORS 中需要处理预检请求（OPTIONS），不是所有跨域请求都会触发预检——能分清“简单请求”和“非简单请求”的条件是加分项。真正生产环境里，多数团队会优先选择反向代理，既能解决开发环境跨域，也能通过网关层统一处理鉴权和接口路径前缀，这比单纯依赖 CORS 更可控。
4. CSS布局与视觉细节：容易被低估的送分题与失分题
CSS 是前端面试中典型的“平时觉得简单，一考才发现漏洞百出”的领域。它不像算法题那样需要大量刷题，但概念性陷阱很多。
4.1 BFC：格式化上下文到底解决了什么问题？
问题：什么是 BFC？如何触发 BFC？它主要解决哪些布局问题？
参考答案：BFC（Block Formatting Context，块级格式化上下文）是 CSS 视觉渲染的一块独立区域，内部元素的布局不会影响外部元素。触发 BFC 的常见条件包括：根元素（html）；浮动元素（float 不为 none）；绝对定位元素（position 为 absolute 或 fixed）；overflow 不为 visible 的块级元素（如overflow: hidden）；display 为inline-block、flow-root、flex或grid的容器等。BFC 解决的经典问题有三个：防止外边距折叠——同一个 BFC 内相邻盒子的垂直外边距会合并，而不同 BFC 之间不会；清除内部浮动——让父容器包裹浮动子元素而不至于高度塌陷，过去常用overflow: hidden，现在更推荐display: flow-root；阻止元素被浮动元素覆盖——利用 BFC 区域与浮动元素互不重叠的特性。
考察意图：这道题表面在问机制，实际上在考察候选人对“文档流”的理解深度。回答时如果能提到底层依赖的视觉格式化模型（Visual Formatting Model），并解释什么是flow-root，就会超出大多数候选人的水平。我在整理时注意到，很多人会背触发条件，却说不清为什么display: flow-root被推荐——因为它无副作用，不会裁剪溢出的内容，也不会影响定位上下文。
4.2 垂直水平居中：多种方案对比，回答时按场景分类
问题：实现一个元素的水平垂直居中，你能写出几种方案？分别适用什么场景？
参考答案：按实现方式可以分为三类。定位类：父容器position: relative，子元素position: absolute配合top: 50%; left: 50%; transform: translate(-50%, -50%)，适用于子元素尺寸不固定；也可以top/right/bottom/left: 0+margin: auto，适用于子元素有明确宽高。Flexbox：父容器display: flex; justify-content: center; align-items: center，这是现代开发中最推荐的方案，适用于任何尺寸。Grid：父容器display: grid; place-items: center，写法更简洁。另外行内元素可以用text-align: center加line-height实现单行文本的居中。
考察意图：面试官想听到的是你能否根据场景选择方案，而不是背几种写法。我通常建议按“现代首选 Flex/Grid，绝对定位用于某些弹层需要脱离文档流时，transform 方式要注意会创建新的层叠上下文”这个框架去回答，自然又清晰。
4.3 层叠上下文与 z-index：为什么 z-index 没用？
问题：为什么两个元素的 z-index 相同但显示顺序却不同？z-index 真的越大越在上面吗？
参考答案：z-index 只对定位元素（position 非 static）或 flex/grid 子项生效，并且在同一层叠上下文中才有效。当一个元素处于不同的层叠上下文时，外层上下文的层级决定了整体顺序，内部再大的 z-index 也无法越过外层。创建层叠上下文的条件包括：position 加 z-index、opacity 小于 1、transform 不为 none、filter、will-change、mix-blend-mode 等。所以调整层级时，如果设置 z-index 没生效，先检查是否被某个祖先元素的层叠上下文限制了，再检查该元素是否满足 z-index 生效的条件。
考察意图：这题很能暴露候选人调试 CSS 的实战经验。面试官大概率会抛出一个具体场景：一个弹层盖不住另一个弹层，怎么排查？我会建议回答时带上实际的调试路径——打开开发者工具 Elements 面板逐个查看祖先元素有没有创建层叠上下文，再结合 Layers 面板查看合成层。
5. 框架与工程化：Vue响应式、diff、组件通信的真实考察方式
框架部分的面试题，不同团队的方向差异较大。金山云这类偏基础设施的团队更关注对框架实现的理解而非“会不会用”，比如这种问题：同样一个功能用 Vue 和 React 实现，差在哪？你选择的依据是什么？
5.1 Vue 响应式原理：从 Object.defineProperty 到 Proxy
问题：Vue 2 和 Vue 3 的响应式原理有什么区别？为什么 Vue 3 要改用 Proxy？
参考答案：Vue 2 的响应式是基于Object.defineProperty实现的，它通过递归劫持对象的每个属性，重写 getter 和 setter 来收集依赖和触发更新。这种方式存在明显局限：新增属性、删除属性无法被拦截，必须使用Vue.set/Vue.delete或者给对象重新赋值；数组的索引和长度变化也不能被直接响应，所以 Vue 2 内部对数组方法做了重写。Vue 3 的响应式改用 Proxy，可以拦截对象的所有读取、写入、删除、枚举等操作，天然支持新增属性和数组索引变化，同时 Proxy 是在对象层面做拦截，不需要逐层递归重写属性，性能也有所提升。
考察意图：这道题考察的不只是框架 API 记忆，而是对 JavaScript 元编程特性的掌握。面试官会追问Reflect的作用（保证 this 指向正确）、WeakMap在依赖收集中的用途（避免内存泄漏）、以及为什么 Proxy 在兼容性上仍不如 defineProperty 广泛。
5.2 虚拟 DOM 与 diff：为什么需要它？
问题：为什么要引入虚拟 DOM？diff 算法的大致流程是怎样的？
参考答案：虚拟 DOM 是真实 DOM 的轻量级 JavaScript 对象表示。引入它主要有两个原因：一是跨平台能力，同样的虚拟节点可以由不同平台的渲染器渲染成原生 UI；二是批量更新的能力，通过 diff 计算最小变更集，减少对真实 DOM 的操作次数。diff 的流程大致如下：对比新旧节点的 key 和 tag，如果相同则复用节点并递归对比子节点，否则直接替换；同层数组子节点通过 key 进行复用与移动判断；没有 key 时使用索引进行判断，容易产生多余的重建操作。
考察意图：面试官在这个问题上非常关注 key 的作用。比如“用数组索引作为 key 会出什么问题”——所以回答时要主动指出 key 的稳定性要求，并解释为什么 key 变化会导致组件状态错乱（例如输入框内容随着列表重排而错位）。工程化场景下，diff 算法不是越复杂越好，很多团队为了性能会强制要求列表 key 用唯一 id 而非索引，这就是面试题与实际工作的接口。
5.3 组件通信：从父子到跨层的完整方式盘点
问题：Vue 中组件通信你用过哪些方式？分别用在什么场景？
参考答案：父子组件通信：父传子用 props，子传父用 emit 事件；也可以使用v-model作为语法糖实现双向同步。跨层级或兄弟组件：最简单的方案是用事件总线（Vue 3 中可以自己实例化一个事件发射器）；全局状态管理用 Pinia 或 Vuex；如果不想引入外部依赖，还可以用依赖注入（provide/inject），但要注意注入的响应式数据最好同时提供修改函数，避免子组件直接改共享状态导致数据流难以追踪。另外还有$attrs和$refs这两种偏底层的通信手段：$attrs用于透传未声明为 props 的属性到深层组件，$refs用于直接调用子组件方法但会建立强耦合。
考察意图：这题考察的是设计取舍。面试官希望通过你对通信方式的选择，判断你是否具有组件设计的抽象思维。我见过一个不错的回答框架：先问父子还是跨层、再问是读多还是写多、最后问状态是否只在局部闭环——按这三个维度选择方案，比直接背方式清单更有说服力。
6. 手写代码题：面试官在手写环节真正想看到的四件事
手写代码题是最难临时准备的环节，但也是短期内提升空间最大的。很多候选人以为手写代码考的是刷题量，其实面试官通常只看四件事：边界条件的考虑是否周全、变量命名是否清晰、代码风格是否规范、以及讲解思路时是否分步拆解。
6.1 手写一个深拷贝：至少考虑循环引用和 Symbol
问题：手写一个深拷贝函数，要求能够处理循环引用和 Symbol 类型的 key。
参考实现：
function deepClone(source, cache = new WeakMap()) { if (source === null || typeof source !== 'object') return source; if (cache.has(source)) return cache.get(source); const hasSymbol = Object.getOwnPropertySymbols(source).length > 0; const target = Array.isArray(source) ? [] : Object.create(Object.getPrototypeOf(source)); if (hasSymbol) { const symbolKeys = Object.getOwnPropertySymbols(source); symbolKeys.forEach((key) => { target[key] = deepClone(source[key], cache); }); } cache.set(source, target); Reflect.ownKeys(source).forEach((key) => { if (target[key]) return; target[key] = deepClone(source[key], cache); }); for (const key in source) { if (Object.prototype.hasOwnProperty.call(source, key) && target[key] === undefined) { target[key] = deepClone(source[key], cache); } } return target; }讲解思路：第一步判断基础类型，直接返回；第二步用 WeakMap 作为缓存，解决循环引用问题；第三步保留原型链和 symbol key；第四步遍历可枚举属性和 symbol 属性，递归拷贝。这里选用 WeakMap 而不是普通 Map 的考虑很关键——WeakMap 是弱引用，不会阻止垃圾回收，在这个场景中更合适。
考察意图：这个题考察的方向很集中：数据结构（WeakMap 用途）、语言 API（Reflect.ownKeys 和 Object.getOwnPropertySymbols）、边界思维（循环引用）。写完代码后，面试官经常接着问性能问题——所以你可以补充说明：实际项目里深拷贝优先考虑结构化克隆（history API 或 postMessage 原理），但手写版本有助于理解底层机制。
6.2 手写防抖与节流：讲清场景选择的判断逻辑
问题：手写防抖函数和节流函数，并说明两者分别适用于什么场景。
参考实现：
function debounce(fn, delay = 300) { let timer = null; return function(...args) { clearTimeout(timer); timer = setTimeout(() => { fn.apply(this, args); }, delay); }; } function throttle(fn, interval = 300) { let lastTime = 0; return function(...args) { const now = Date.now(); if (now - lastTime >= interval) { fn.apply(this, args); lastTime = now; } }; }讲解思路：防抖的本质是“重置等待”——每次触发都取消上一个定时器，只有停止触发一段时间后才真正执行。适用于搜索框输入联想、窗口 resize 后重新计算布局。节流的本质是“固定频率执行”——不管触发多频繁，最多每 interval 毫秒执行一次。适用于滚动加载、按钮点击限频。两者的核心差别在于防抖会推迟执行，节流则确保执行不会完全丢失。
考察意图：面试官极少只让你写代码，通常还会追问两个问题：如何给防抖增加“立即执行”选项（第一次点击立即触发）；如何保证回调中的this正确指向。我个人的建议是，手写这类工具时，务必在所有内部函数中显式保留this，否则面试官会直接指出丢失上下文的问题。
6.3 手写 Promise 的一个静态方法：考察异步与状态机
问题：请实现Promise.all，至少满足传入空数组时返回一个已 resolved 的 Promise、以及任何一个 promise 失败时整体失败的要求。
参考实现：
Promise.myAll = function(promises) { return new Promise((resolve, reject) => { const results = []; let count = 0; if (promises.length === 0) { resolve(results); return; } promises.forEach((promise, index) => { Promise.resolve(promise).then((value) => { results[index] = value; count += 1; if (count === promises.length) { resolve(results); } }, reject); }); }); };讲解思路：这里有几个很关键的细节。一是所有传入值先用Promise.resolve包装，可以兼容非 Promise 的普通值；二是结果数组按传入顺序存放而不是按完成顺序，所以不能用 push；三是失败时直接调用 reject，并且不需要在失败后停止其他请求——因为 Promise 天然具有“失败后仍继续执行其他 promise”的特性。
考察意图：这题考察的是对 Promise 状态机、异步执行时机和 closure 捕获的理解。面试官很可能追问Promise.allSettled与Promise.all的差异，前者等待所有 promise 结束但不会 reject。我在模拟面试时会让候选人再对比一下手动实现时两者的差别，很多人到这一步就开始分不清“失败即返回”和“等待全部”的执行语义了。
6.4 一道偏门但高频的场景题：如何实现一个任务队列？
问题：假设有一组异步任务，要求按顺序执行，前一个完成后才开始下一个，应该如何实现？
参考实现：
async function runTasks(tasks) { for (const task of tasks) { await task(); } }讲解思路：这个题的正确解法非常简洁。关键点在于理解await会让出当前执行线程，让下一个任务在微任务队列中排队执行。如果要求并发限制，可以改用信号量实现。问题在于：很多候选人会写成tasks.forEach(async (task) => { await task(); })，这会导致所有任务立即开始执行，完全违背顺序执行的要求——这恰恰是本题的经典陷阱。考察意图：这个题从实现上看只有几行，但非常考验对异步并发模型的理解。面试官真正想看的是候选人能不能指出 forEach 的坑，以及能否将这个问题延伸到“并发控制”“Promise 的竞态处理”等工程场景。
整理完这批题，一个很明显的感受是：面试题目本身没有秘密，真正的分水岭在于能否把答案讲出层次。一道原型链题，可以三句话说清，也可以十分钟讲不透。面试官要听的从来不是标准答案的复述，而是你在自己项目里用过什么样、踩过什么坑、沉淀了什么判断标准。
这篇文章的上半部分先覆盖到这。手写题的最后一节还会继续补充深拷贝与异步并发之外的场景代码，比如组合函数、Lazy 缓存等等；浏览器安全（XSS、CSRF）、工程化（Webpack/Vite 原理、Babel 流程）的题目也会放在下半部分详细拆解。如果准备面试的时间有限，我建议先把这一篇里的事件循环、BFC、响应式原理和深拷贝彻底吃透——这几道题几乎在我整理的所有云厂商前端面经里都出现过，属于真正的“高频中的高频”。
