前端面试题解析

小程序生命周期，生命周期内都做什么？

这题考察是否能按 App、Page、Component 三层说明生命周期职责，并把初始化、显示刷新、渲染完成和资源清理放在正确阶段。

webpack 打包原理

这题考察 Webpack 从入口构建依赖图、转换模块、生成 chunk 和注入运行时代码的完整链路。回答要区分模块、chunk、bundle、loader、plugin 和 runtime。

CSS 单位说说

这题考察 CSS 单位的参照对象和适用场景。高质量回答要按绝对单位、字体相对单位、百分比、视口单位、容器相关单位和 Grid 单位分类。

CSS 水平垂直居中方案

这题考察居中方案的适用前提，而不是背一个固定写法。回答要按现代布局、定位方案、文本场景和未知尺寸边界分类。

数组常用的 API，哪些能改变原数组？

这题考察数组 API 的可变性和返回值语义。回答时按会修改原数组、返回新数组、只读取查询三类整理，并强调 sort、reverse、splice 是高频坑。

浏览器强缓存和协商缓存分别依赖哪些 HTTP 头？

浏览器强缓存主要依赖响应头 Cache-Control 和 Expires，协商缓存主要依赖 ETag/If-None-Match 与 Last-Modified/If-Modified-Since。Cache-Control 的优先级通常高于 Expires，ETag 的优先级通常高于 Last-Modified。

强缓存和协商缓存有什么区别？

强缓存和协商缓存的根本区别在于是否向服务器发请求。强缓存有效时浏览器直接使用本地副本；协商缓存需要发条件请求，由服务器判断资源是否变化，未变化返回 304。

CSS 如何实现垂直居中？

CSS 垂直居中没有唯一答案，要根据已知高度、未知高度、单行文本、多行内容、父容器布局和兼容性选择方案。现代布局优先使用 flex 或 grid，特殊场景再考虑 absolute+transform、line-height、table-cell 等方法。

哪些 CSS 属性会触发重排？

会触发重排的 CSS 属性，本质上都是会改变元素几何信息、文档流占位、字体度量、滚动尺寸或布局上下文的属性。典型包括 width、height、margin、padding、border、display、position、top、left、float、font-size、line-height、grid、flex 相关属性等；而 color、background-color 通常只触发重绘，transform、opacity 在合成层上变化时通常可以避开主线程布局。

requestAnimationFrame 属于什么任务，适合解决什么问题？

requestAnimationFrame 不是普通宏任务，也不是微任务，而是浏览器在一次渲染机会中、绘制之前执行的动画帧回调。它适合把视觉更新对齐到屏幕刷新节奏，用来做动画、滚动联动、分批 DOM 更新和避免 setTimeout 与刷新率不一致造成的卡顿。

Vue 父子组件有哪些通信方式？

Vue 父子组件通信最基础的是 props 向下传递数据、emit 向上传递事件；更复杂的场景还包括 v-model 双向约定、slot 和作用域插槽传递渲染能力、ref 与 defineExpose 暴露子组件方法、provide/inject 跨层传递依赖，以及通过 Pinia 或 Vuex 管理跨组件共享状态。

Vue 3 相比 Vue 2 有哪些优势？

Vue 3 相比 Vue 2 的优势主要体现在 Composition API 带来的逻辑组织能力、基于 Proxy 的响应式系统、更好的 TypeScript 支持、更小更可摇树优化的包结构、更快的编译和运行时性能，以及 Fragment、Teleport、Suspense、多 v-model 等工程能力。

CSS 渲染过程是怎样的？

CSS 渲染过程从解析 HTML 和 CSS 开始，浏览器构建 DOM 与 CSSOM，经过级联、继承和选择器匹配计算样式，再生成渲染树，随后执行布局、绘制、栅格化和合成。理解这条链路可以解释为什么 CSS 会阻塞渲染、为什么某些属性触发重排或重绘，以及为什么 transform、opacity 更适合高频动画。

CSRF 的原理、攻击形式和防御方式是什么？

CSRF 是跨站请求伪造，核心是攻击者诱导已登录用户的浏览器向目标站点发起请求，浏览器会自动携带目标站点的 Cookie，从而让服务端误以为请求来自用户本人。常见攻击包括隐藏表单提交、img 或链接触发 GET 请求、跨站 POST 和配合不安全 CORS 的接口调用；防御重点是 SameSite Cookie、CSRF Token、Origin/Referer 校验、避免 GET 改状态和敏感操作二次确认。

影响前端首屏性能的关键因素有哪些？

前端首屏性能受网络链路、服务端响应、资源体积、渲染阻塞 CSS、JavaScript 下载和执行、图像与字体、接口数据依赖、缓存策略、第三方脚本、设备算力和框架水合成本共同影响。优化首屏要围绕关键渲染路径，优先让首屏所需 HTML、关键 CSS、必要 JS、核心数据和 LCP 资源尽快可用。

懒加载和虚拟列表如何优化首屏性能？

懒加载通过延后非首屏图像、组件、路由和数据请求，减少首屏需要下载和执行的资源；虚拟列表通过只渲染视口附近的列表项，减少 DOM 数量、布局计算和绘制成本。两者都能优化首屏，但前提是不要延后首屏核心内容，并要处理占位尺寸、预加载、滚动体验和可访问性。

Cookie 有哪些常见属性？

Cookie 常见属性包括 Name、Value、Domain、Path、Expires、Max-Age、Secure、HttpOnly、SameSite、Priority、Partitioned 等。它们共同决定 Cookie 的内容、有效期、发送范围、安全边界和跨站行为，是登录态、个性化和安全防护中的基础机制。

XSS 和 CSRF 的区别、原理和防御方式是什么？

XSS 和 CSRF 都属于 Web 安全问题，但攻击面不同。XSS 是让恶意脚本在可信页面里执行，CSRF 是诱导已登录浏览器向可信站点发起非预期请求。防御要分别围绕脚本执行边界和请求意图校验来设计。

节流函数如何实现？

这道题考察的不是背出一个节流函数片段，而是能否清楚说明高频事件限流的边界语义：节流与防抖的区别、时间戳方案和定时器方案的触发时机差异、是否支持首次立即执行与最后一次补偿执行，以及如何正确保留 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 的场景。

前端从 Ajax、Node.js 到数据驱动之后，下一阶段趋势是什么？

这是一道开放型趋势判断题，重点不是猜中唯一答案，而是能把前端发展的主线讲清楚：Ajax 让页面具备局部数据交互能力，Node 把前端从浏览器内扩展到工程化、构建、SSR 和 BFF，数据驱动让 UI 开发进入组件化、声明式和状态管理阶段。下一个阶段更可能不是单点技术，而是智能化、全栈边缘化、跨端运行时、设计工程协同、性能与可观测性等方向的融合。

ES6的新特性有什么？

ES6 是 JavaScript 现代化的关键版本，核心价值不是新增若干语法糖，而是系统性解决了旧版 JavaScript 在变量作用域、异步流程、模块组织、数据结构、面向对象表达、可迭代协议和元编程能力上的工程问题。面试回答应从语法特性切入，再说明它们分别改善了可读性、可维护性、作用域安全、异步可控性、模块边界和复杂数据建模能力。

JavaScript 中 sleep 函数如何实现？

这道题考察的不是让 JavaScript 真正暂停线程，而是如何用异步机制表达“等待一段时间后继续执行”。高质量回答应说明 Promise 配合 setTimeout 的非阻塞实现、async/await 的调用方式、事件循环中宏任务与微任务的执行顺序，以及为什么忙等会卡死主线程。

v-model的原理？

v-model 本质上是 Vue 提供的双向绑定语法糖，它把数据到视图的绑定和视图到数据的事件更新组合起来。理解它不能只停留在自动同步四个字上，还要能区分原生表单元素、组件封装、Vue2 与 Vue3 约定、修饰符处理、多 v-model 以及响应式更新链路。

浏览器输入 URL 到页面渲染经历哪些步骤？

这道题考察的是浏览器导航生命周期的完整理解，不只是背诵 DNS、TCP、HTTP、渲染几个名词，而是要把输入 URL 后的导航调度、缓存命中、Service Worker、网络连接复用、服务端响应、HTML 增量解析、资源优先级、JS 阻塞、渲染流水线和性能指标串成一条因果链。优秀答案应体现浏览器、网络协议、前端性能和运行时机制之间的关系。

同公司岗位有 2 条面经记录

如果将列表的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。

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、图片字体、接口与监控如何共同影响首屏体验。