# 深圳某海外电商（一面）

# 原型链

每个对象有 __proto__，指向构造函数的 prototype
找属性沿着链向上找，到 Object.prototype 还没有就 undefined
Function.__proto__ === Function.prototype（鸡生蛋蛋生鸡）
Object.prototype.__proto__ === null（链尾）

简版：对象通过 __proto__ 串成链，查属性沿链向上找，链尾是 null。

# 闭包

函数 A 内部的函数 B 引用 A 的变量，B 就是闭包。本质是 B 的作用域链里持有 A 的活动对象。

经典 var 循环问题三种解法：IIFE、setTimeout 第三参数、let。

简版：内部函数引用外部变量就是闭包，让外部变量不被 GC。

# 浏览器渲染原理

简化版：

HTML → Tokens → Nodes → DOM Tree
CSS → CSSOM Tree
DOM + CSSOM → Render Tree
布局（Layout） → 绘制（Paint） → 合成（Composite） → 屏幕

@前端进阶之旅: 代码已经复制到剪贴板

阻塞规则：

解析 HTML 遇到 <script> 默认阻塞
defer：并行下载、HTML 解析完按顺序执行
async：并行下载、下完立即执行（不保序）

简版：HTML 转 DOM、CSS 转 CSSOM，合并成 Render Tree，再 Layout → Paint → Composite。

# 为什么操作 DOM 慢

DOM 在渲染引擎，JS 在 JS 引擎，跨线程通信有成本
每次操作可能触发回流/重绘
频繁操作就是不停跨线程 + 重排

优化：批量操作（DocumentFragment）、合并样式、虚拟滚动、用 transform 替代 top。

简版：跨线程通信 + 触发回流，频繁操作就是双重消耗。

# 重绘和回流（Reflow / Repaint）

回流：几何属性变化（宽高、位置、布局）→ 必须重新计算布局，开销大
重绘：只是颜色、背景等不影响布局的视觉变化，开销小
回流必引起重绘，反之不一定

减少手段：

transform 替代 top/left
visibility: hidden 替代 display: none（只重绘）
一次性更新（写入到一个 class，而不是改多次内联样式）
will-change 提升图层
离屏处理（DocumentFragment、requestAnimationFrame 批处理）

简版：动几何 = 回流，只动样式 = 重绘。回流贵，能用 transform 就别用 top。

# XSS 防御

持久型 XSS：恶意脚本被存进数据库（评论、富文本）
反射型 / DOM 型：恶意脚本通过 URL 注入

防御：

输入输出转义
富文本走白名单（DOMPurify、xss）
CSP（Content-Security-Policy）
HttpOnly + Secure cookie 减少 cookie 被窃取风险

简版：转义 + CSP + 富文本白名单 + cookie HttpOnly。

# CSRF 防御

SameSite Cookie（Lax / Strict）
CSRF Token（同步表单令牌）
验证 Referer / Origin
关键操作二次验证（验证码 / 短信）

简版：SameSite + CSRF Token + Referer 校验，三件套基本够用。

# 点击劫持防御

设置 X-Frame-Options: DENY 或 SAMEORIGIN
用 CSP frame-ancestors
JS 兜底：if (top !== self) top.location = self.location

简版：响应头加 X-Frame-Options，禁止被 iframe 嵌套。

# 浏览器缓存机制

缓存位置（优先级从高到低）：Service Worker → Memory Cache → Disk Cache → Push Cache → 网络

缓存策略：

强缓存：Expires（HTTP/1）/ Cache-Control（HTTP/1.1，优先级更高）
协商缓存：Last-Modified + If-Modified-Since 或 ETag + If-None-Match，命中返 304

实战：

HTML 不缓存或短缓存
静态资源（带 hash 文件名）Cache-Control: max-age=31536000, immutable

简版：先强缓存（Cache-Control），过期再协商（ETag / Last-Modified），HTML 不缓存，静态资源一年永久缓存。

# 技术选型怎么做

要素：

框架：业务场景（CSR / SSR / SSG）、团队熟悉度
语言：TS 优先（除非小项目）
工程化：构建工具（Vite / Webpack）、CI、Lint / Commit
评估维度：社区成熟度、招聘市场、学习成本、性能、长期可维护性

陷阱：

「为了用而用」最新技术，没考虑团队
单看 GitHub Star，不看实际生产案例
没考虑迁移成本

简版：从业务、团队、成本三角度评估，不要只看技术新潮。

# Event Loop（浏览器与 Node 区别）

浏览器：每个宏任务结束清空所有微任务，再检查是否要渲染。 Node：分阶段（timers / poll / check / close 等），每个阶段间清空微任务；process.nextTick 优先级高于 Promise。

console.log(1)
setTimeout(() => console.log(2))
Promise.resolve().then(() => console.log(3))
console.log(4)
// 1 4 3 2

@前端进阶之旅: 代码已经复制到剪贴板

简版：宏任务执行完清微任务再渲染。Node 多了几个阶段 + nextTick 最高优先级。

# Vue2 / Vue3 双向绑定原理

Vue2：Object.defineProperty 劫持 getter/setter，无法监听新增属性、数组下标
Vue3：Proxy 直接代理整个对象，监听更全面，性能更好（懒代理）

简版：Vue2 用 defineProperty，Vue3 用 Proxy，Proxy 能监听新增、删除、数组下标。

# 内存泄漏检测与场景

检测：Chrome DevTools Memory 面板（Heap Snapshot / Allocation Timeline / Leak Detector）

常见场景：

全局变量未清理
定时器 / 监听器未 clear / removeEventListener
闭包持有大对象不释放
DOM 引用残留（节点已移除但 JS 还引用）
Map / Set 累积不清理（用 WeakMap / WeakSet 改善）

简版：DevTools Memory 抓快照对比，看哪些对象不该活还活着。

# 某 AI 工具公司（一面）

# 谈谈你对 Skills、MCP、Agent 的理解

概念	一句话
Skill	AI 能力的「插件」，把功能模块化打包
MCP	AI 连外部世界的「USB-C」，统一协议
Agent	能自主思考和行动的 AI 实体 = LLM + 工具 + 记忆 + 规划

简版：Skill 是插件，MCP 是协议，Agent = LLM + 工具 + 记忆。

# 某矩阵投放公司（一面）

# useEffect 全套

是什么：React Hook，处理副作用（数据获取、订阅、DOM 操作等）。

执行时机：

无依赖：每次渲染后执行
空数组 []：仅首次渲染后执行
有依赖 [count]：依赖变化才执行
清理函数：下次 effect 前 + 卸载时

常见坑：

async 不能直接做回调（要在内部声明 async 函数）
闭包陷阱：依赖没写全 → 永远拿到首次渲染的值
用 setState(prev => ...) 或 useRef 解决闭包问题

简版：渲染后执行，依赖控制时机，返回函数做清理；async 要在内部声明，闭包陷阱靠依赖或 ref 解。

# 微前端样式隔离方案

CSS Modules
CSS-in-JS
Shadow DOM（彻底隔离）
命名空间前缀（自动化加 prefix）
iframe（最强但体验差）

简版：CSS Modules、Shadow DOM、加前缀，最强是 iframe。

# 为什么不用 webpack 5 模块联邦

模块联邦对按需加载不友好（共享模块整体加载）
本地联调多应用很麻烦（要起多个端口）
版本冲突复杂（共享模块的版本协商）
调试体验差

替代方案：基于 npm 包共享 + monorepo（pnpm workspace + Turborepo）。

简版：联邦在按需加载、本地联调、版本协商上都有坑，monorepo + 包共享更简单可控。

# RSC（React Server Components）

解决什么：

服务端组件不打包到客户端 bundle
局部 hydration，只 hydrate 客户端组件
路由切换时局部更新

Server vs Client：

	Server Components	Client Components
渲染	服务端 → HTML	SSR + Hydrate + CSR
Bundle	不进客户端	进客户端
交互	❌	✅
状态	❌	✅

最佳实践：能用 Server 就用 Server，需要交互再下移到 Client，用 props 传数据。

简版：服务端组件不进 bundle、不能用 hooks，把客户端组件往叶子节点推，bundle 体积大幅下降。

# 某交易所（一面）

# Redux / Zustand / MobX 区别

	Redux	Zustand	MobX
范式	单向数据流 + Reducer	Store + Hooks	响应式 Proxy
模板代码	多	极少	少
学习成本	中	低	中
调试	DevTools 很强	一般	一般
适合	大型 / 严格规范	中小项目	想写最少代码

简版：Redux 严但啰嗦，Zustand 极简，MobX 自动响应式。中小项目首推 Zustand。

# React 合成事件原理

React 17+ 把事件绑到 root 容器（不再是 document，方便多版本共存）
用户点击 → React 根据 fiber 树找到组件 → 构造 SyntheticEvent → 按冒泡/捕获走完
事件对象池化，渲染完销毁

简版：绑到 root，统一分发，构造合成事件对象，按冒泡走完。

# Vue 组件渲染流程

模板 → AST → render 函数 → VNode → diff → 真实 DOM

@前端进阶之旅: 代码已经复制到剪贴板

更新时响应式收集依赖，触发 re-render → 新 VNode → diff → 最小化更新。

简版：模板编译成 render 函数，执行产 VNode，diff 后最小化更新 DOM。

# Vue2 vs Vue3 响应式

Vue2：Object.defineProperty，递归遍历，数组要重写 7 个方法，新增属性要 Vue.set
Vue3：Proxy 代理整个对象，懒代理（访问到才代理嵌套对象），新增 / 删除 / 数组下标都能监听

简版：defineProperty 改 Proxy，能监听新增、删除、数组下标。

# WebSocket 握手

客户端：HTTP 请求带 Upgrade: websocket + Sec-WebSocket-Key
服务端：HTTP 101 + Sec-WebSocket-Accept
之后：双方在同一个 TCP 上全双工通信

@前端进阶之旅: 代码已经复制到剪贴板

简版：HTTP 升级握手，101 切协议，之后跑 TCP 全双工。

# Next.js SSR 原理

App Router 默认 Server Components，配合 Suspense 可流式分块。

JS 沙箱：

…

前端高频面试题-前端面经汇总

前端高频面试题-前端面经汇总