前端开发面试常见问题及准备思路（校招 / 社招）

前端工程师负责用户直接看到、直接点到的那一层：网页、H5 活动页、小程序、管理后台、桌面端（Electron 类）甚至部分跨端 App 的界面和交互。日常工作大致是：把设计稿还原成页面，接后端接口把数据跑通，处理各种浏览器和机型兼容，盯性能和线上报错，维护组件库和构建配置。

常见方向有几类，面试侧重点会跟着变：

• 业务前端：电商、内容、社区、SaaS 后台等，最常见。重点是框架熟练度、组件设计、和产品后端的协作效率。
• 基础架构 / 前端工程化：脚手架、构建、发布流水线、监控、微前端、低代码平台。会深问构建原理、Node.js 和工程规范。
• 可视化 / 图形：图表、地图、Canvas、WebGL。会问渲染性能和图形学基础。
• 跨端 / 客户端：小程序、React Native、Flutter、Electron。会问桥接通信、包体积、启动性能。
• 全栈倾向：用 Node.js 写 BFF 层或 SSR 服务，会问服务端渲染、接口聚合、稳定性。

级别上大致是：实习 / 初级（能独立完成页面和模块）→ 中级（能负责一个业务的前端，做技术方案）→ 高级 / 资深（能定架构、带小组、推动工程体系）→ 专家 / 负责人（跨团队技术规划）。级别越高，面试里「你为什么这么做」的比重越大，「这个 API 怎么用」的比重越小。

JD 上的每一句要求，几乎都能对应到面试里的一类问题。拿到 JD 先按下表拆一遍，就知道该重点准备哪里。

小技巧：JD 里出现的「加分项」（如 Node.js、可视化、跨端、SSR）不一定会考，但如果你恰好会，就在自我介绍里主动带一句，给面试官一个追问的抓手。

不同公司轮次不完全一样，互联网公司常见的结构如下：

社招常见的变化：一面就会深挖项目，基础题占比下降；可能多一轮「业务面」，和业务方负责人聊你对业务的理解；高级岗位会有一轮系统设计类的「前端架构题」。实习面试通常是 2–3 轮技术 + 1 轮 HR，难度比正式校招略低，但手写题和基础题一样会考。

1. 01什么是 BFC？它能解决哪些布局问题？专业知识技术一面校招 · 实习基础

   考察点： 是否理解 CSS 布局的底层规则，而不是只会背「清除浮动」。

   答题思路：

   • 先下定义：BFC（块级格式化上下文）是一块独立的布局区域，内部元素的布局不影响外部，外部也不影响内部。
   • 说触发方式：overflow 不为 visible、display: flow-root、display: inline-block / flex / grid（严格说 flex、grid 建立的是各自的格式化上下文，但同样有隔离效果）、position: absolute / fixed、float 不为 none。
   • 说能解决的三件事：父元素包住浮动子元素（高度塌陷）、阻止相邻块的外边距合并、让旁边的块不被浮动元素覆盖（自适应两栏）。
   • 加一句实战判断：现在新项目多用 flex / grid，BFC 更多出现在维护老代码和排查奇怪间距的时候；display: flow-root 是语义最干净的触发方式。

   校招怎么答 / 社招怎么答： 校招讲清定义、触发条件和三个用途就够；社招可以带一个排查过的真实布局问题，说明你是怎么定位到外边距合并或塌陷的。

   可能的追问： 外边距合并在哪几种情况下发生？overflow: hidden 触发 BFC 有什么副作用？

   练一练
2. 02实现水平垂直居中有哪些方法？flex 和 grid 怎么选？专业知识技术一面校招 · 实习基础

   考察点： 布局基本功，以及能否按场景选方案。

   答题思路：

   • 按「是否知道子元素宽高」分类说，比一口气报十种方法更显条理。
   • 通用方案：父元素 display: flex; justify-content: center; align-items: center，或 display: grid; place-items: center。
   • 定位方案：position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)，不需要知道宽高。
   • 行内内容：text-align: center 配合 line-height（单行文字）。
   • flex 和 grid 的区别：flex 是一维布局（一行或一列），grid 是二维布局（行列同时控制）；导航栏、按钮组用 flex，整页框架、卡片墙用 grid。

   可能的追问： transform 方案在什么情况下会让文字发虚？flex: 1 是哪三个属性的简写？

   练一练
3. 03回流（重排）和重绘有什么区别？怎么减少？专业知识技术一面校招 · 社招基础

   考察点： 是否把 CSS 和浏览器渲染流程联系起来。

   答题思路：

   • 回流：元素的几何信息（尺寸、位置）变了，浏览器要重新计算布局；重绘：只是外观（颜色、背景）变了，不需要重新布局。回流一定会引起重绘，反过来不一定。
   • 触发回流的常见操作：改宽高、改字体大小、增删 DOM、读取 offsetWidth、getBoundingClientRect 这类需要最新布局的属性（会强制同步布局）。
   • 减少方法：批量修改样式（改 class 而不是逐条改 style）、读写分离（先集中读，再集中写）、动画优先用 transform 和 opacity（通常可以交给合成层处理，跳过布局和绘制）、复杂动画元素脱离文档流。
   • 提一句工具：用浏览器开发者工具的 Performance 面板能看到 Layout 和 Paint 的耗时，排查时先看数据再动手。

   校招怎么答 / 社招怎么答： 校招讲清区别和优化手段；社招最好说一次真实的动画卡顿排查，比如发现循环里「读一次写一次」导致的强制同步布局。

   可能的追问： 什么是合成层？will-change 能不能随便加？

   练一练
4. 04什么是闭包？实际开发中哪里用到了？会有什么问题？专业知识技术一面校招 · 实习基础

   考察点： 对作用域和函数执行机制的理解，以及能否联系实际。

   答题思路：

   • 定义：函数和它定义时所在的词法作用域的组合。函数在外部被调用时，依然能访问定义时作用域里的变量。
   • 原理：JS 是词法作用域，函数在定义时就确定了能访问哪些变量；只要内部函数还被引用，外层的变量就不会被回收。
   • 实际用途：模块化封装私有变量、防抖节流里保存定时器、柯里化、React hooks 里的回调捕获状态。
   • 问题：持有大对象可能导致内存不能及时释放；React 里「闭包陷阱」——回调捕获的是旧的 state。
   • 经典例子：for 循环里用 var 声明再 setTimeout 打印，全是最后一个值；改用 let（每轮循环一个新绑定）或立即执行函数即可。

   可能的追问： 闭包一定会造成内存泄漏吗？怎么用开发者工具查内存泄漏？

   练一练
5. 05原型和原型链是怎么回事？new 一个对象时发生了什么？专业知识技术一面校招 · 实习基础

   考察点： JS 对象模型和继承机制。

   答题思路：

   • 每个对象都有一个内部链接指向它的原型（可通过 Object.getPrototypeOf 访问），函数的 prototype 属性是用它 new 出来的实例的原型。
   • 访问属性时先找自身，找不到就沿原型一层层往上找，直到 Object.prototype，再往上是 null，这条链就是原型链。
   • new 做了四件事：创建一个新对象；把新对象的原型指向构造函数的 prototype；以新对象为 this 执行构造函数；如果构造函数返回了对象就用它，否则返回新对象。
   • 能顺手手写一个简易 new，并说明 class 本质上是原型继承的语法糖（但有一些差异，比如 class 必须用 new 调用）。

   可能的追问： instanceof 的原理？怎么实现一个继承（组合继承、寄生组合继承的区别）？

   练一练
6. 06this 的指向是怎么确定的？专业知识技术一面校招 · 实习基础

   考察点： 能否系统地说出规则，而不是靠记例子。

   答题思路：

   • 普通函数的 this 在调用时确定，看「怎么调用」，按优先级： 1. new 调用：指向新创建的对象； 2. call / apply / bind 显式绑定：指向传入的对象； 3. 作为对象方法调用 obj.fn()：指向 obj； 4. 直接调用 fn()：非严格模式指向全局对象，严格模式是 undefined。
   • 箭头函数没有自己的 this，用的是定义时外层作用域的 this，call / bind 也改不了。
   • 常见坑：把对象方法赋值给变量或作为回调传出去后，this 丢失。

   可能的追问： 手写 bind，并处理 new 调用 bind 返回函数的情况？事件处理函数里的 this 是什么？

   练一练
7. 07讲一讲浏览器的事件循环，宏任务和微任务的执行顺序是什么？专业知识技术一面校招 · 社招进阶

   考察点： 是否理解 JS 单线程如何处理异步，以及能否准确判断代码输出顺序。

   答题思路：

   • JS 主线程是单线程，异步任务完成后，回调会放进任务队列，等主线程空了再取出来执行，这个循环就是事件循环。
   • 任务分两类：宏任务（脚本整体、setTimeout、setInterval、I/O、用户交互事件等）和微任务（Promise.then / catch / finally、queueMicrotask、MutationObserver）。
   • 顺序规则：执行一个宏任务 → 清空当时所有微任务（执行中新产生的微任务也会在这一轮清空）→ 视情况进行页面渲染 → 取下一个宏任务。
   • async / await：await 后面的代码相当于放进了一个微任务里。
   • 可以补一句：Node.js 的事件循环分阶段，和浏览器有差异（如 process.nextTick 优先级高于 Promise 微任务）。

   示范回答（校招版）：

   JS 在浏览器里是单线程执行的，遇到定时器、网络请求这类异步操作，会交给浏览器的其他线程去处理，处理完以后把回调放到任务队列里。主线程每次从队列里取一个宏任务执行，比如整段脚本本身就是第一个宏任务。这个宏任务执行完，会把微任务队列全部清空，比如 Promise.then 的回调；如果清空的过程中又产生了新的微任务，也会在这一轮一起执行完。之后浏览器有机会做一次渲染，再取下一个宏任务，比如 setTimeout 的回调。所以同一段代码里，同步代码最先输出，然后是 Promise 的回调，最后才是 setTimeout。await 后面的代码我理解为放进了微任务里，所以它会在当前同步代码之后、定时器之前执行。我在【课程项目 / 实习项目】里遇到过一个问题：在【某个数据加载后立即读取 DOM】时拿不到最新结果，后来知道是渲染时机的问题，改成在合适的回调里处理就好了。

   示范回答（社招版）：

   规则层面就是「一个宏任务、清空微任务、可能渲染、下一个宏任务」。我更想说一下它在项目里的影响。第一是长任务：一个宏任务执行太久，后面的用户输入和渲染都得等，用户会觉得点了没反应。我们在【某个表格导入功能】里，一次性处理【几万行】数据导致页面卡住【数秒】，后来把计算拆成小块，用 setTimeout 或 requestIdleCallback 分片让出主线程，重计算的部分放到 Web Worker 里，交互卡顿基本消失。第二是微任务过多也会阻塞渲染：如果在微任务里递归地产生新的微任务，页面会一直不渲染，这和用 setTimeout 递归不一样。第三是框架的批量更新，React 和 Vue 都会把同一轮里的多次状态修改合并后统一更新，理解了事件循环就知道为什么修改状态后马上读 DOM 拿不到新值，以及 nextTick 这类 API 是在哪个时机执行的。

   可能的追问： 给你一段混合了 setTimeout、Promise、async/await 的代码说出输出顺序？requestAnimationFrame 在事件循环的哪个位置执行？

   练一练
8. 08Promise 解决了什么问题？async / await 和它是什么关系？手写 Promise.all。专业知识技术一面校招 · 社招进阶

   考察点： 异步编程的理解 + 手写能力。

   答题思路：

   • Promise 解决回调嵌套过深、错误处理分散的问题，把异步结果包装成一个有三种状态（pending、fulfilled、rejected）的对象，状态一旦改变就不再变。
   • 链式调用：then 返回新的 Promise，可以一路往下传值；catch 统一捕获前面链路的错误。
   • async / await 是基于 Promise 的语法糖，让异步代码写起来像同步；错误用 try / catch 处理。
   • 手写 Promise.all 要点：返回新 Promise；按下标存结果保证顺序；计数全部完成才 resolve；任何一个失败立即 reject；对非 Promise 值用 Promise.resolve 包一下；空数组直接 resolve。
   • 顺带区分 all、allSettled、race、any 的使用场景。

   校招怎么答 / 社招怎么答： 校招重在讲清状态和手写正确；社招可以加一个并发控制的场景，比如「同时最多发 N 个上传请求」怎么实现，以及请求失败重试、超时取消（AbortController）怎么做。

   可能的追问： 实现一个带并发上限的请求调度器？await 一个永远不 resolve 的 Promise 会怎样？

   练一练
9. 09从输入 URL 到页面展示，中间发生了什么？专业知识技术一面校招 · 社招进阶

   考察点： 知识面是否成体系，能否按层次讲清楚。

   答题思路：

   • 按阶段讲，每段点到关键词，然后挑自己最熟的一段深入： 1. 解析 URL，检查缓存（浏览器缓存、Service Worker）； 2. DNS 解析拿到 IP； 3. 建立 TCP 连接（三次握手），HTTPS 还有 TLS 握手； 4. 发送 HTTP 请求，服务器返回响应； 5. 浏览器解析 HTML 生成 DOM 树，解析 CSS 生成 CSSOM，合成渲染树； 6. 布局（计算位置大小）→ 绘制 → 合成，显示到屏幕； 7. 遇到 <script> 会阻塞 HTML 解析（除非加 defer 或 async），CSS 会阻塞渲染。
   • 结尾可以说：每一段都对应着优化手段，比如 DNS 预解析、连接复用、资源压缩、关键 CSS 内联。

   校招怎么答 / 社招怎么答： 校招把链路讲完整、术语准确；社招建议把链路和自己做过的优化对上号，比如「在第 4 步我们做了接口合并，在第 5 步做了关键 CSS 内联」。

   可能的追问： defer 和 async 有什么区别？HTTP/2 相比 HTTP/1.1 改进了什么？

   练一练
10. 10浏览器缓存是怎么工作的？强缓存和协商缓存有什么区别？专业知识技术一面校招 · 社招基础

    考察点： HTTP 缓存头的理解，以及实际部署中的缓存策略。

    答题思路：

    • 强缓存：浏览器根据 Cache-Control（如 max-age）或旧的 Expires 判断资源没过期，直接用本地副本，不发请求。
    • 协商缓存：过期后带上 If-None-Match（对应服务器给的 ETag）或 If-Modified-Since（对应 Last-Modified）去问服务器，资源没变返回 304，浏览器继续用本地副本。
    • no-cache 是「每次都要协商」，no-store 才是「完全不缓存」，这两个常被说反。
    • 实际部署策略：带内容哈希的静态资源（JS、CSS、图片）设长期强缓存；HTML 入口文件用协商缓存或不缓存，保证用户能拿到最新版本的资源引用。

    社招加分点： 讲讲发版后用户还看到旧页面的排查经历，以及 CDN 缓存和浏览器缓存叠在一起时怎么处理。

    可能的追问： ETag 和 Last-Modified 同时存在时谁优先？Service Worker 缓存和 HTTP 缓存是什么关系？

    练一练
11. 11什么是跨域？常见的解决方案有哪些？专业知识技术一面校招 · 社招基础

    考察点： 同源策略和 CORS 机制。

    答题思路：

    • 同源 = 协议、域名、端口都相同。浏览器限制的是「脚本读取跨源响应」，请求其实可能已经发出去了。
    • 主流方案 CORS：服务器返回 Access-Control-Allow-Origin 等响应头。非简单请求（如带自定义头、Content-Type: application/json）会先发一个 OPTIONS 预检请求。
    • 带 Cookie 跨域：前端设置 credentials: 'include'（或 withCredentials），服务器必须返回具体的 Origin（不能是 *）且 Access-Control-Allow-Credentials: true。
    • 其他方案：开发环境用构建工具的代理；生产环境用 Nginx 反向代理把前后端放到同源；postMessage 处理窗口间通信；JSONP 只支持 GET，属于历史方案。

    可能的追问： 预检请求能不能缓存？为什么跨域限制能防住一部分攻击但防不住 CSRF？

    练一练
12. 12HTTPS 是怎么保证安全的？和 HTTP 有什么区别？专业知识技术一面校招 · 社招进阶

    考察点： 加密基础和证书机制。

    答题思路：

    • HTTP 明文传输，有被窃听、篡改、冒充三个风险；HTTPS 在 HTTP 和 TCP 之间加了 TLS 层。
    • 核心思路：用非对称加密（或密钥交换算法）安全地协商出一个对称密钥，之后的数据用对称加密传输，兼顾安全和性能。
    • 证书解决「你是不是你」：服务器出示由受信任机构签发的证书，浏览器沿证书链验证签名和域名。
    • 完整性：通过消息认证码防止数据被篡改。
    • 前端相关的点：混合内容（HTTPS 页面加载 HTTP 资源会被拦截或警告）、HSTS 强制走 HTTPS、Cookie 的 Secure 属性。

    可能的追问： 中间人攻击是怎么回事，证书如何防住它？为什么不全程用非对称加密？

    练一练
13. 13虚拟 DOM 是什么？diff 算法为什么需要 key？专业知识技术二面校招 · 社招进阶

    考察点： 是否理解框架更新机制，而不是只会用。

    答题思路：

    • 虚拟 DOM 是用 JS 对象描述的 UI 结构。状态变化时生成新的虚拟树，和旧树比较出差异，只把差异应用到真实 DOM。
    • 它的价值主要是「声明式写法 + 足够好的性能 + 跨平台渲染能力」，并不是在所有场景都比直接操作 DOM 快。
    • diff 的常见简化策略：只做同层比较；类型不同直接替换整棵子树；列表用 key 识别节点。
    • key 的作用：帮框架判断「哪个节点是哪个」，从而复用、移动而不是销毁重建。用数组下标当 key，在列表插入、删除、排序时会导致状态错位（比如输入框内容跑到别的行）。

    校招怎么答 / 社招怎么答： 校招讲清概念和 key 的作用；社招可以对比 React（Fiber 架构，可中断的渲染）和 Vue 3（编译期标记静态节点，减少运行时比较）的思路差异，并说说在你项目里遇到过的渲染性能问题。

    可能的追问： React 的 Fiber 解决了什么问题？Vue 3 的编译优化做了哪些事？

    练一练
14. 14React Hooks 有哪些使用规则？什么是「闭包陷阱」，怎么解决？专业知识技术二面校招 · 社招进阶

    考察点： React 主力开发者的必考题，看是否真正写过。

    答题思路：

    • 两条规则：只在函数组件或自定义 Hook 的顶层调用，不能放在条件、循环里；只在 React 函数里调用。原因是 React 按调用顺序把每个 Hook 和它的状态对应起来。
    • 闭包陷阱：useEffect 或定时器回调捕获的是创建时那一次渲染的 state，之后 state 更新了，回调里拿到的还是旧值。
    • 解决：依赖数组写全（配合 lint 规则）；用函数式更新 setCount(c => c + 1)；需要「最新值但不触发重渲染」时用 useRef 保存。
    • 顺带说清 useEffect 的清理函数时机，以及 useMemo / useCallback 不是越多越好，只在确有昂贵计算或需要稳定引用时用。

    校招怎么答 / 社招怎么答： 校招说清规则和一个闭包陷阱的例子即可；社招可以说团队里怎么约定自定义 Hook 的封装、怎么排查过因依赖不全导致的线上 bug。

    可能的追问： useEffect 和 useLayoutEffect 的区别？为什么开发环境下 effect 会执行两次？

    练一练
15. 15Vue 的响应式原理是什么？Vue 2 和 Vue 3 有什么不同？专业知识技术二面校招 · 社招进阶

    考察点： Vue 方向的核心原理题。

    答题思路：

    • 核心思路：读取数据时收集依赖（记录「谁用到了我」），修改数据时通知依赖去更新。
    • Vue 2 用 Object.defineProperty 劫持属性的 getter / setter，缺点是新增、删除属性和通过下标改数组检测不到，需要 Vue.set 之类的补救。
    • Vue 3 用 Proxy 代理整个对象，能拦截新增、删除等更多操作，且是访问到才递归代理，初始化开销更小。
    • 更新是异步批量的：同一轮多次修改只触发一次渲染，nextTick 用来在 DOM 更新后执行代码。
    • 可以补一句 ref 和 reactive 的区别和使用习惯。

    可能的追问： computed 和 watch 有什么区别？响应式数据解构后为什么会丢失响应性？

    练一练
16. 16组件间通信有哪些方式？什么时候需要引入全局状态管理？专业知识技术二面校招 · 社招进阶

    考察点： 组件设计能力和状态管理选型判断。

    答题思路：

    • 先列通信方式：父子用 props 和回调 / 事件；跨层级用 Context（React）或 provide / inject（Vue）；兄弟组件提升到共同父级；全局用状态管理库。
    • 什么时候需要全局状态：多个不相关的页面或组件共享、修改同一份数据（如登录信息、购物车），且修改逻辑复杂、需要可追踪。
    • 服务端数据和客户端状态最好分开：接口数据用请求缓存类方案管理（自动缓存、重新请求、失效），真正的界面状态才放进全局 store。
    • 选型说取舍：Redux 类方案规范、可追踪但样板代码多；轻量方案上手快；Pinia 是 Vue 官方推荐。重点是讲清「为什么这个项目选它」。

    校招怎么答 / 社招怎么答： 校招讲清通信方式和一个使用场景；社招重点讲「状态放哪里」的原则，以及项目里因为状态设计不当踩过的坑（比如全部塞进全局 store 导致到处重渲染）。

    可能的追问： Context 有什么性能问题？你会怎么组织一个中型项目的状态？

    练一练
17. 17说说打包构建工具的原理。Webpack 和 Vite 有什么区别？专业知识技术二面校招 · 社招进阶

    考察点： 工程化理解，社招必问。

    答题思路：

    • 打包的核心流程：从入口出发解析依赖，构建依赖图；用 loader 把非 JS 资源（CSS、图片、TS）转换成模块；用 plugin 在构建各阶段做额外处理（生成 HTML、压缩、注入变量）；最后输出一个或多个 bundle。
    • 常见优化：代码分割（按路由懒加载）、Tree Shaking（依赖 ES Module 的静态结构去掉未使用代码）、压缩、内容哈希文件名配合长期缓存。
    • Vite 开发启动快的原因：开发时不打包，直接利用浏览器原生 ES Module 按需加载，第三方依赖预构建；生产构建仍然会打包。
    • Webpack 生态成熟、可配置性强，适合复杂老项目；Vite 开发体验好，新项目用得多。

    校招怎么答 / 社招怎么答： 校招讲清 loader 和 plugin 的区别、懒加载即可；社招讲一次构建优化：比如构建时间从【X 分钟】降到【Y 分钟】，产物体积从【A】降到【B】，用了哪些手段、怎么分析出瓶颈。

    可能的追问： Tree Shaking 在什么情况下会失效？什么是 sideEffects 配置？

    练一练
18. 18首屏加载慢，你会怎么排查和优化？专业知识技术二面校招 · 社招深挖

    考察点： 性能优化的方法论：先度量、再定位、再优化、再验证。

    答题思路：

    • 先度量：用浏览器开发者工具的 Lighthouse、Performance、Network 面板，关注 LCP（最大内容渲染）、INP（交互响应）、CLS（布局偏移）等指标；线上要有真实用户数据。
    • 再定位：慢在网络（资源大、请求多、接口慢）、解析执行（JS 体积大、长任务）还是渲染（阻塞资源、图片未优化）。
    • 常用手段：路由懒加载和代码分割；压缩和按需引入第三方库；图片换现代格式、懒加载、设置尺寸；关键资源预加载；CDN 和缓存策略；接口合并或并行；骨架屏改善感知；必要时 SSR 或静态生成。
    • 最后验证：优化前后同环境对比，上线后看真实数据。

    示范回答（校招版）：

    我会先找到它到底慢在哪，而不是直接上手段。我会打开开发者工具的 Network 面板看资源加载瀑布图，再用 Lighthouse 跑一遍拿到 LCP 这类指标。在我的【课程项目 / 个人项目】里，发现首页主包有【1.8 MB】，其中大部分是一个图表库和一个 UI 组件库全量引入。我做了三件事：第一，路由懒加载，把非首页的页面拆出去；第二，组件库改为按需引入，图表库只在用到的页面动态加载；第三，首页大图换成压缩后的格式并加上懒加载。改完之后主包降到【600 KB】左右，本地模拟慢速网络下 LCP 从【3.2 秒】降到【1.5 秒】。这个过程让我意识到优化要先有数据，否则不知道改的是不是瓶颈。

    示范回答（社招版）：

    我们之前负责的【某业务首页】，线上监控显示移动端 LCP 的较慢分位数在【4 秒】以上，而且有用户反馈白屏。我按「度量—定位—优化—验证」做：先接入真实用户的性能上报，按机型和网络分组，发现慢主要集中在低端安卓和弱网；再用 Performance 面板看，问题有三块——主包体积太大导致解析执行时间长、首屏依赖两个串行的接口、首屏图片没有尺寸导致布局偏移。对应做了：按路由和组件拆包，把首屏不用的模块延后加载；和后端商量把两个串行接口合成一个首屏聚合接口；图片走 CDN 的尺寸和格式适配，并预留占位尺寸。上线前做了灰度，对比两组的数据，LCP 较慢分位数降到【2.5 秒】左右，CLS 也明显下降。之后我们把包体积和核心指标加进了 CI 检查，超过阈值会提醒，避免以后慢慢退化回去。这件事我最大的体会是：性能优化不是一次性的项目，要靠监控和门禁持续守住。

    可能的追问： 怎么做前端性能监控和上报？SSR 一定能让首屏更快吗？有什么代价？

    练一练
19. 19TypeScript 在项目里带来了什么？泛型和类型收窄怎么理解？专业知识技术一面校招 · 社招进阶

    考察点： 是否真正用 TS 写过业务，而不是全是 any。

    答题思路：

    • 价值：编译期发现错误、接口约定清晰、重构时有保障、编辑器提示更好。代价是学习成本和部分类型体操的复杂度。
    • 泛型：让类型「参数化」，例如一个请求函数 request<T>() 返回 Promise<T>，调用时传入具体的数据类型。
    • 类型收窄：通过 typeof、instanceof、in、字面量判断、自定义类型守卫，让 TS 在分支内知道更具体的类型；联合类型配合「可辨识字段」处理不同状态很常用。
    • interface 和 type：大多数场景可以互换；interface 可声明合并、更适合描述对象结构，type 能表达联合、交叉、映射等更复杂的类型。
    • 能手写一两个工具类型，比如 MyPartial<T>、MyPick<T, K>。

    校招怎么答 / 社招怎么答： 校招讲清概念并手写简单工具类型；社招讲在团队里怎么推进 TS（如从 JS 渐进迁移、严格模式开启策略、接口类型自动生成），以及类型帮你挡住过哪类 bug。

    可能的追问： unknown 和 any 的区别？never 类型有什么用？

    练一练
20. 20XSS 和 CSRF 分别是什么？前端怎么防？专业知识技术一面校招 · 社招进阶

    考察点： 基本的 Web 安全意识。

    答题思路：

    • XSS（跨站脚本）：攻击者把恶意脚本注入到页面里执行，能窃取数据、冒充用户操作。分存储型、反射型、DOM 型。
    • XSS 防护：对输出做转义（框架默认会转义文本插值）；谨慎使用 innerHTML、dangerouslySetInnerHTML、v-html，确需使用时先做白名单过滤；配置 CSP 限制脚本来源；敏感 Cookie 设 HttpOnly，让脚本读不到。
    • CSRF（跨站请求伪造）：用户已登录 A 站，访问恶意站点时被诱导向 A 站发请求，浏览器会自动带上 A 站的 Cookie。
    • CSRF 防护：Cookie 设置 SameSite；关键接口要求 CSRF Token；服务端校验 Origin / Referer；改用请求头携带的 Token 鉴权（不依赖自动发送的 Cookie）。
    • 一句话区分：XSS 是「在你的站里执行了别人的代码」，CSRF 是「借你的身份从别的站发请求」。

    可能的追问： 富文本编辑器的内容怎么安全展示？Token 存在 localStorage 和 Cookie 各有什么风险？

    练一练
21. 21手写防抖和节流，并说说它们的区别和使用场景。专业知识技术一面校招 · 实习 · 社招基础

    考察点： 手写能力、闭包和定时器的综合运用、边界意识。

    答题思路：

    • 防抖：事件触发后等一段时间再执行，期间再触发就重新计时。适合搜索框输入联想、窗口 resize 结束后再计算。
    • 节流：一段时间内最多执行一次。适合滚动监听、拖拽、按钮防连点。
    • 防抖写法：闭包保存定时器，每次触发先清掉旧定时器，再设新的；用 apply 保留 this 和参数。
    • 节流写法：时间戳版（记录上次执行时间）或定时器版；可以说明首次是否立即执行、最后一次是否补执行。
    • 加分：提供 cancel 方法，支持「立即执行」选项。

    示范回答（校招版）：

    防抖和节流都是用来控制高频事件的执行次数。防抖是「等你停下来再执行」，比如搜索框，用户一直在打字就不发请求，停下【300 毫秒】再发；节流是「固定频率执行」，比如滚动时每【100 毫秒】最多算一次位置。写防抖时，我用闭包保存一个定时器变量，每次触发先 clearTimeout，再重新 setTimeout，回调里用 fn.apply(this, args) 保证 this 和参数不丢。写节流时，我记录上一次执行的时间戳，当前时间减去上次时间大于间隔才执行，并更新时间戳。如果要求最后一次也要执行，我会再配合一个定时器补一次。我在【项目名】的搜索功能里用了防抖，避免每输入一个字就请求一次接口。

    示范回答（社招版）：

    实现本身不难，我更关注在业务里怎么用对。一是选型：搜索联想用防抖，滚动加载和埋点上报用节流，按钮防重复提交其实更推荐用「请求进行中就禁用」的状态控制，比纯时间节流更可靠。二是在 React 里用要注意，防抖函数如果每次渲染都重新创建，计时器就失效了，我们一般用 useRef 或 useMemo 保证同一个实例，并在组件卸载时调用 cancel，避免卸载后还去更新状态。三是对于搜索这种场景，防抖只能减少请求数量，解决不了「后发先至」的问题，所以我们还会配合取消旧请求或者比对请求序号，只渲染最后一次的结果。团队里这些逻辑我们封装成了【公共 Hook】，统一处理了取消和卸载清理。

    可能的追问： 手写深拷贝（处理循环引用、日期、正则）？手写一个简易的发布订阅（EventEmitter）？

    练一练
22. 22前端面试的算法题怎么准备？常见会考到什么程度？专业知识技术一面校招 · 实习 · 社招进阶

    考察点： 基本的编程和问题拆解能力。

    答题思路：

    • 前端岗位的算法题多数在简单到中等难度，常见类型：数组和字符串处理、哈希表、双指针、栈和队列、链表、二叉树遍历、简单的递归和动态规划。
    • 和前端结合的题目也常见：数组扁平化、树形结构和扁平列表互转、对象按路径取值、版本号比较、LRU 缓存、模板字符串解析。
    • 做题习惯：先确认输入输出和边界，再说思路和复杂度，再写代码，最后自己用例子跑一遍。
    • 准备节奏：按类型刷，而不是随机刷；每类做到能说出通用模板。校招建议系统刷完常见类型；社招保持手感，重点放在和前端结合的题。

    可能的追问： 你的解法时间和空间复杂度是多少？能不能优化？

    练一练
23. 23介绍一个你最有挑战的项目，你在里面做了什么？行为题（STAR）技术二面校招 · 社招深挖

    考察点： 真实参与度、技术深度、解决问题的思路。几乎必问，后面的追问往往决定这一轮的结果。

    答题思路：

    • 用 STAR 结构：背景（项目是什么、为什么难）→ 任务（你负责哪块）→ 行动（你怎么做，重点讲技术决策）→ 结果（可量化的结果，用你自己的真实数据）。
    • 「难」要具体：性能瓶颈、复杂交互、数据量大、多端适配、时间紧、老系统改造，挑一个说透。
    • 主动讲取舍：当时考虑过哪些方案，为什么没选。
    • 准备好被追问三层：「为什么这么做」「有没有更好的办法」「如果重来会怎么改」。

    校招怎么答 / 社招怎么答： 校招可以讲实习、比赛、课程或个人项目，重点是你亲手写的部分，不用夸大规模；社招要讲清业务背景、你的角色（是负责人还是参与者）、方案对比和落地后的业务效果，最好能体现推动和协作。

    可能的追问： 这个功能如果数据量再大十倍怎么办？项目里最不满意的地方是什么？

    练一练
24. 24你做过的技术选型或架构决策里，最关键的一次取舍是什么？专业知识技术二面终面社招深挖

    考察点： 架构判断力、风险意识、能否对结果负责。社招中高级岗位核心题。

    答题思路：

    • 选一个真实决策：比如老项目是否迁移框架、是否引入微前端、是否上 SSR、组件库自研还是用开源、单仓还是多仓。
    • 讲清约束条件：团队人数和技术栈、业务节奏、性能和稳定性要求、维护成本。
    • 列出候选方案和各自的优缺点，说明决策依据。
    • 讲落地过程：怎么小范围验证、怎么灰度、怎么回滚。
    • 讲复盘：结果是否符合预期，如果重来会调整什么。敢讲「哪里没做好」反而加分。

    可能的追问： 如果团队里有人强烈反对你的方案，你怎么处理？这个决策的长期维护成本是多少？

    练一练
25. 25讲一次你处理线上故障或者和产品、后端产生分歧的经历。行为题（STAR）业务面HR面校招 · 社招进阶

    考察点： 稳定性意识、沟通协作、责任心。

    答题思路：

    • 线上故障：先止血（回滚、降级、开关），再定位（日志、监控、复现），再修复，最后复盘（根因、改进措施，比如补监控、补测试、加发布检查）。
    • 协作分歧：说清分歧点是什么（需求排期、交互实现成本、接口设计），你怎么用数据或方案对比去沟通，最后怎么达成一致，结果如何。
    • 带人（社招）：怎么给新人分任务、做 Code Review、沉淀文档，团队效率有什么变化。
    • 避免两种回答：把责任全推给别人；或者说「我从来没跟人有过分歧」。

    校招怎么答 / 社招怎么答： 校招可以讲实习、团队作业或社团活动中的分歧，重点是沟通方式；社招要讲出机制层面的改进，比如推动建立了发布前检查清单、错误监控告警、接口约定流程。

    可能的追问： 那次故障的根因是什么？之后团队流程上改了什么？如果对方坚持不改怎么办？

    练一练

点「练一练」会复制这道题，并跳到页面底部的下载入口；打开 OfferGod 模拟面试后粘贴即可。

你在前端开发工程师面试里遇到过这里没收录的题吗？或者某道题被追问得比这里更深？欢迎通过页面底部「发现内容有误或侵权？告诉我们」那个入口，把题目和你当时的情况发给我们，采纳后会补进题库。