已解析题目
前端工程师相关题目
前端从 Ajax、Node.js 到数据驱动之后，下一阶段趋势是什么？
这是一道开放型趋势判断题，重点不是猜中唯一答案，而是能把前端发展的主线讲清楚：Ajax 让页面具备局部数据交互能力，Node 把前端从浏览器内扩展到工程化、构建、SSR 和 BFF，数据驱动让 UI 开发进入组件化、声明式和状态管理阶段。下一个阶段更可能不是单点技术，而是智能化、全栈边缘化、跨端运行时、设计工程协同、性能与可观测性等方向的融合。
浏览器输入 URL 到页面渲染经历哪些步骤？
这道题考察的是浏览器导航生命周期的完整理解，不只是背诵 DNS、TCP、HTTP、渲染几个名词，而是要把输入 URL 后的导航调度、缓存命中、Service Worker、网络连接复用、服务端响应、HTML 增量解析、资源优先级、JS 阻塞、渲染流水线和性能指标串成一条因果链。优秀答案应体现浏览器、网络协议、前端性能和运行时机制之间的关系。
同公司岗位有 2 条面经记录
一个 HTTP 请求的全过程
这题考察从 URL 到响应处理的完整链路，回答要按缓存、DNS、连接、TLS、HTTP 报文、服务端处理和客户端渲染顺序展开。
同题还出现在 2 个公司岗位
节流函数如何实现？
这道题考察的不是背出一个节流函数片段，而是能否清楚说明高频事件限流的边界语义：节流与防抖的区别、时间戳方案和定时器方案的触发时机差异、是否支持首次立即执行与最后一次补偿执行，以及如何正确保留 this、参数、取消能力和返回值限制。
React/Vue 列表渲染中 key 的作用是什么？
key 的核心作用是在虚拟 DOM diff 或 reconciliation 过程中，为同一父节点下的一组子节点提供稳定身份标识。它帮助框架判断哪些节点是同一个、哪些需要移动、插入、删除或重新创建，从而减少错误复用和不必要的 DOM 操作，同时影响组件实例与内部 state 的保留或重置。
后端慢 SQL 会如何影响前端体验？
后端慢 SQL 不只是后端问题，它会沿着请求链路放大为前端可感知的卡顿、白屏、加载时间过长、按钮无响应、接口超时、重复提交和数据不一致。核心机制是数据库读写占用锁、CPU、IO 和连接，进一步拖慢应用线程、连接池、网关队列与浏览器请求队列，最终影响页面渲染、交互反馈和业务流程完成率。
前端构建工具如何优化构建速度和产物体积？
前端构建优化要同时回答构建速度和产物体积两个目标。速度侧关注开发冷启动、热更新、全量打包、CI 构建是否少做重复工作；体积侧关注未使用代码、重复依赖、静态资源、拆包和浏览器缓存。高质量回答不只是背 Vite 或 Webpack 配置名，而是能解释每个手段解决了构建链路里的哪一段瓶颈。
跨域请求需要携带 Cookie 时，前端该怎么设置？
前端请求不一定必须携带 Cookie。是否携带取决于业务是否依赖 Cookie 做登录态、会话、灰度、风控等状态识别，以及浏览器、前端请求配置、Cookie 属性和服务端 CORS 配置是否同时满足条件。跨域场景下，前端单独设置不够，必须前后端配合：前端开启 credentials，服务端允许带凭证，并返回精确的 Access-Control-Allow-Origin 和 Access-Control-Allow-Credentials。
写完代码后，如何回答还有哪些可以改进？
这类追问考察的不是候选人是否能临场再写一个完美版本，而是能否在完成代码后进行工程化复盘：先确认核心逻辑正确，再有层次地说明边界、复杂度、可读性、可维护性、前端运行环境和测试保障上的可改进空间，同时避免把已有答案说成完全不可用。
如果absolute外面再包一个absolute，是什么效果？
absolute 外面再包一个 absolute，本质上是两层脱离普通文档流的定位关系：外层 absolute 先相对自己的包含块定位，内层 absolute 再相对最近的已定位祖先定位。由于外层本身就是 position:absolute，它通常会成为内层 absolute 的包含块，所以内层的 top、left、right、bottom、百分比尺寸等都会以外层盒子的 padding box 为参照，而不是直接以页面或更外层容器为参照。
怎么学习前端的？
这道题考察的不是学过哪些技术名词，而是候选人是否有稳定、系统、可验证的学习方法。回答要体现：先打基础，再用项目验证，再从文档和源码补齐原理，最后通过复盘、输出和指标证明学习有效。
前端监控系统应该如何实现？
前端监控的核心不是简单收集日志，而是建设一套从 SDK 采集、数据清洗、可靠上报、服务端聚合、指标分析、告警响应到问题复盘的闭环体系。它通常覆盖错误监控、性能监控、用户行为埋点、接口质量、业务转化、环境信息和隐私合规。面试回答时要强调：监控目标先于技术实现，数据质量先于数据规模，告警闭环先于报表展示。
Rem 和 em的区别？
rem 和 em 都是 CSS 中的相对长度单位，核心区别在于参照对象不同：em 通常相对于当前元素或其父级继承后的 font-size，rem 始终相对于根元素 html 的 font-size。面试回答时要讲清楚参照基准、继承影响、适用场景和移动端适配实践。
面向对象和面向过程？
面向过程强调“按步骤解决问题”，核心是过程、函数和控制流；面向对象强调“围绕对象建模问题”，核心是对象、状态、行为和协作。两者不是绝对优劣关系，而是适合不同复杂度、变化方向和性能要求的设计范式。前端开发中，组件化、状态封装、事件响应、接口抽象都体现了面向对象思想，但具体实现常常会混合函数式、声明式和面向过程写法。
Array.sort的实现原理？
Array.prototype.sort 的核心不是某一个固定算法，而是 ECMAScript 规定排序语义，各 JavaScript 引擎自行选择实现。面试回答要区分三层：默认比较规则是转字符串后按 UTF-16 码元排序；传入 compareFn 后按返回值正负决定顺序；ES2019 之后规范要求稳定排序，但时间、空间复杂度仍由实现决定。以 V8 为代表的现代实现采用稳定排序方案，并需要处理 undefined、空槽、访问器、原型链、副作用等 JavaScript 动态特性。
有考虑过什么情况下服务器压力会过大？
服务器压力过大本质上不是“访问量大”这一件事，而是系统在当前容量下无法稳定满足目标延迟、吞吐和错误率要求。常见原因包括流量突增、请求复杂度升高、CPU 或内存耗尽、磁盘和网络 IO 瓶颈、数据库慢查询与锁等待、缓存失效、线程池或连接池耗尽、下游依赖变慢、重试放大以及缺少限流降级和弹性扩容能力。面试回答时应从“压力来源、瓶颈位置、观测指标、保护手段、扩容治理”几个层次展开。
箭头函数和普通函数有什么区别？
箭头函数是 ES6 引入的一种更简洁的函数写法，但它不只是语法糖。它最大的特点是没有自己的 this、arguments、super 和 new.target，其中 this 会按词法作用域从外层函数或模块环境中捕获，因此特别适合回调、数组方法和需要保留外层 this 的场景；但它不能作为构造函数，也没有 prototype，不适合对象方法、原型方法、构造器、事件处理器中依赖动态 this 的场景。
ES6的新特性有什么？
ES6 是 JavaScript 现代化的关键版本，核心价值不是新增若干语法糖，而是系统性解决了旧版 JavaScript 在变量作用域、异步流程、模块组织、数据结构、面向对象表达、可迭代协议和元编程能力上的工程问题。面试回答应从语法特性切入，再说明它们分别改善了可读性、可维护性、作用域安全、异步可控性、模块边界和复杂数据建模能力。
JavaScript 中 sleep 函数如何实现？
这道题考察的不是让 JavaScript 真正暂停线程，而是如何用异步机制表达“等待一段时间后继续执行”。高质量回答应说明 Promise 配合 setTimeout 的非阻塞实现、async/await 的调用方式、事件循环中宏任务与微任务的执行顺序，以及为什么忙等会卡死主线程。
v-model的原理？
v-model 本质上是 Vue 提供的双向绑定语法糖，它把数据到视图的绑定和视图到数据的事件更新组合起来。理解它不能只停留在自动同步四个字上，还要能区分原生表单元素、组件封装、Vue2 与 Vue3 约定、修饰符处理、多 v-model 以及响应式更新链路。
如果将列表的index设置为key会有什么问题？
把列表的 index 当作 key，最大问题不是性能差一点，而是把位置误当成了数据身份。当列表发生插入、删除、排序、过滤时，同一个 index 会指向不同数据，框架会错误复用组件实例和 DOM 节点，导致本地 state、输入值、动画状态、缓存结果和副作用都可能跟真实数据错位。
字符串"dadsa,adsadsad,dasdas,aaa"按逗号分割，怎样性能最高？
JavaScript 字符串按逗号分割时，普通业务场景下最合适的答案通常是 String.prototype.split(',')。它语义清晰、原生优化成熟、复杂度已经是线性；只有在超大数据、热点循环、严格内存控制并经过基准验证时，才考虑 indexOf 或 charCodeAt 手写扫描。
vue2是怎么进行数组的方法重写的？
Vue2 对数组响应式的核心不是给每个下标都做 Object.defineProperty，而是创建一个继承自 Array.prototype 的 arrayMethods，重写 push、pop、shift、unshift、splice、sort、reverse 这 7 个会改变数组自身的方法。数组被 observe 时会挂上 __ob__，并把当前数组实例的原型指向 arrayMethods；调用被重写的方法后，Vue2 会先执行原生数组操作，再对新增元素 observeArray，最后通过 ob.dep.notify() 通知依赖更新。
说一下position的几个属性 css 有哪些单位？
这道题可以分成两部分回答：先讲 CSS 的 position 定位机制，包括 static、relative、absolute、fixed、sticky 的行为、参照物、是否脱离文档流以及对层叠关系的影响；再讲 CSS 单位体系，包括绝对单位、字体相关相对单位、视口单位、百分比以及时间、角度、分辨率等专用单位。核心不是背属性名，而是说明元素如何确定自己的位置、尺寸如何继承或换算，以及不同单位在响应式布局、可访问性和动画中的使用边界。
react18的事件系统相比于之前有什么变化？
React 18 的事件系统不是一次彻底重写，而是在 React 17 已经完成的 root 级事件委托基础上，进一步和自动批处理、事件优先级、并发渲染调度协同。回答时应先区分 17 和 18 的边界：委托位置从 document 迁移到 root 容器主要发生在 React 17，React 18 更重要的变化是让事件更新进入统一批处理模型，并根据事件优先级影响更新调度。
JavaScript 原型链的查找机制是什么？
JavaScript 原型链的查找机制，本质是对象属性访问时的一套逐级委托规则：先查对象自身属性，找不到再沿对象内部的 [[Prototype]] 指向继续查找，直到找到属性或到达 null 为止。面试中不仅要能说出查找顺序，还要区分 __proto__、构造函数的 prototype、实例对象之间的关系，并理解属性屏蔽、hasOwnProperty、in、class 语法糖这些高频追问点。
let、const 和 var 有什么区别？
这道题考察的不只是三种声明方式的表层语法，而是 JavaScript 变量绑定模型：作用域边界、提升行为、暂时性死区、重复声明、重新赋值、全局对象映射、循环闭包以及 const 对引用值的真实约束。面试中应从执行上下文和词法环境解释差异，再落到工程实践：默认使用 const，需要变更绑定时用 let，尽量避免 var。
闭包是什么，闭包会导致什么？
这题考察词法作用域、变量保留、封装能力和内存风险。回答要说明闭包不是天然泄漏，只有无必要长期持有引用才会形成问题。
同题还出现在 1 个公司岗位
React Hooks 的设计约束和原理是什么？
React Hooks 的核心不是给函数组件加几个 API，而是把组件的状态、副作用和复用逻辑从 class 实例模型迁移到 render 快照模型。它解决了 class 中状态逻辑难复用、生命周期拆散同一业务逻辑、this 绑定和高阶组件嵌套等问题，但也引入了稳定调用顺序、依赖数组和闭包快照等严格约束。
Virtual DOM 和真实 DOM 的区别是什么？
Virtual DOM 是用 JavaScript 对 UI 结构和状态结果做的一层描述；真实 DOM 是浏览器直接维护、参与样式计算、布局、绘制、事件和可访问性树等流程的节点对象。二者的关键区别在层级：Virtual DOM 让框架先在 JS 层计算 UI 变化、做 reconciliation 与调度，再把必要变更提交到真实 DOM。
Vue和React在创建组件的时候，说说最应该注意哪三点？
创建 Vue 和 React 组件时最应该注意三点：职责边界是否清晰、数据流与状态归属是否合理、副作用与性能边界是否可控。Vue 和 React 写法不同，但优秀组件都应该低耦合、可组合、可预测、易测试、易维护。
前端首屏性能优化有哪些关键手段？
首屏性能优化不是单点技巧，而是围绕关键渲染路径、资源下载、代码执行、数据返回和用户感知建立一套闭环。面试中要先讲清 FCP、LCP、TTI、INP 等指标口径，再分别说明构建产物、渲染模式、缓存 CDN、图片字体、接口与监控如何共同影响首屏体验。
Promise 的状态流转和 then 链式调用机制是什么？
Promise 的核心不是“异步容器”这么简单，而是一套状态机、回调注册机制、返回值吸收规则和微任务调度规则的组合。面试回答要把 pending 到 fulfilled 或 rejected 的单向迁移、then 返回新 Promise、回调异步执行、值穿透、异常传播、thenable 展开和微任务边界串成完整链路。
浏览器跨域问题如何解决？
跨域问题的本质不是浏览器完全禁止请求发出去，而是同源策略限制脚本读取不同源响应。标准解法优先是服务端正确配置 CORS；工程上还会结合同源反向代理、本地开发代理、JSONP、postMessage、WebSocket 等方案，但它们适用场景和安全边界不同。
怎么优化网络链接速度？
优化网络连接速度，本质是缩短从用户发起请求到可用响应返回的整条链路耗时。前端不能只盯着资源体积，还要拆开 DNS、TCP/TLS 握手、协议协商、服务器处理、传输拥塞、缓存命中、资源优先级和渲染阻塞等环节。回答应先给出度量口径，再按连接建立、协议升级、缓存复用、资源调度、传输压缩、CDN 边缘化和监控闭环展开。
HTTPS 的握手过程讲一讲？
HTTPS 的握手本质是 HTTP 通信前先通过 TLS 建立安全通道：客户端和服务端先协商 TLS 版本、密码套件和扩展参数，然后服务端用证书证明身份，双方通过密钥协商生成共享的对称会话密钥，再用 Finished 消息确认握手过程没有被篡改。握手完成后，HTTP 数据才通过对称加密、完整性校验和防重放机制进行传输。现代面试答案应以 ECDHE、TLS 1.2 和 TLS 1.3 为主，不能只讲早期 RSA 加密随机数的旧流程。
HTTP协议基于TCP做了哪些封装？
HTTP 并不是简单把数据塞进 TCP 发送，而是在 TCP 提供的可靠、有序、面向字节流的传输能力之上，定义了一整套应用层封装：报文格式、请求响应语义、头部元数据、消息体边界、连接管理、缓存协商、Cookie 状态、代理转发、安全传输以及不同版本的分帧和复用机制。TCP 只负责把字节可靠送达，不理解“请求”“响应”“URL”“状态码”“缓存”“Cookie”，这些都是 HTTP 在应用层补上的语义。