面试

← 已是第一轮 · 返回本次面经 · 第 2 轮 → 本轮要点： 本次面试主要考察校招生的前端基础知识、框架理解（Vue和React）、TypeScript应用、手写代码能力以及解决实际问题的能力。面试官重点关注以下几个方面： 前端框架深度理解与实践：不仅要求掌握Vue和React的基础知识，更强调对框架设计原理（如Vue的响应式、虚拟DOM）的理解，以及在实际项目中的应用能力（如Vuex到Pinia的迁移，以及在React中模拟Vue特性的思路）。 JavaScript 核心与异步编程：对Object.defineProperty的数据劫持原理、Promise的深入理解及其各种组合与错误处理方式（Promise.all、Promise.allSettled），以及async/await与Promise的关系是考察重点。手写算法题（数组扁平化、深拷贝）考验基础编码功底。 TypeScript 实际应用：考察对TypeScript的熟练程度，包括基本类型、高级类型（如索引签名定义动态属性）的运用，以及如何在项目中利用TypeScript提升代码质量。 工程化与性能优化：Monorepo 多包依赖管理及冲突解决是工程实践的体现。图片懒加载的实现方式（尤其是Intersection Observer API的应用）及其阈值优化，体现了对前端性能优化的关注和实践经验。 整体而言，面试不仅考察"是什么"，更侧重"为什么"和"如何做"，需要候选人能够结合实际项目经验进行深入分析和解答。 本轮共 20 道题。答案默认折叠，便于先自行作答。 1. 你刚才提到了一些项目经历，讲一个你觉的最有成就感的？ 题目要点 这道题是典型的主观题，面试官并不期待一个"唯一标准答案"。 主要考察的是答题者的表达能力、系统性思考问题的方式、对项目及技术的理解深度以及从项目中复盘和学习的能力。 答题结构建议：简述项目背景与挑战 → 描述你的解决方案及遇到的困难 → 总结项目成果与个人成长。 参考答案 在过去的项目经历中，让我最有成就感的是负责公司内部一个复杂的用户权限管理系统重构。这个系统当时面临着用户反馈权限配置混乱、性能瓶颈突出、以及新功能迭代困难等问题。 当时的核心挑战在于，我们有上百种细粒度的权限点，并且需要支持多维度、动态的权限组合，这在旧系统中已经形成了一个巨大的权限矩阵，任何改动都牵一发而动全身。我首先主导了权限模型的梳理和抽象，将权限点进行了归类和分级，并引入了基于角色的访问控制（RBAC）模型，同时考虑了自定义策略的扩展性。技术选型上，我们从传统的后端硬编码权限逻辑，逐步迁移到了前后端分离、统一鉴权服务的方式，并通过引入缓存机制优化了权限查询性能。 在实现过程中，最大的难点是如何在不影响现有业务的前提下，平滑地进行新旧权限系统的切换。为此，我设计了一套灰度发布方案，通过用户白名单和功能开关，逐步验证新系统的稳定性和准确性。在这个过程中，我们也遇到了一些意想不到的数据同步和兼容性问题，例如在特定场景下，新旧权限解析不一致导致的用户访问异常。我积极与后端团队、产品经理沟通，快速定位问题，并及时调整了数据同步策略和回滚机制，确保了业务的连续性。 最终，重构后的权限系统不仅将权限配置的效率提升了30%，还将核心鉴权接口的响应时间从原来的数百毫秒优化到了几十毫秒，极大地提升了系统的性能和稳定性。更重要的是，它为后续的新业务快速上线提供了坚实的基础，权限迭代周期缩短了50%以上。通过这个项目，我不仅深化了对权限系统设计的理解，也锻炼了我在复杂项目中进行技术选型、架构设计、风险管理和跨团队协作的能力。这次经历让我深切体会到，解决核心痛点并为业务带来实际价值，才是技术工作的最大成就感。 2. 项目里 Monorepo 管理多包依赖怎么实现的； 题目要点 Monorepo 概念：理解 Monorepo 的基本思想和优势。 多包依赖管理工具：了解 Lerna、Yarn Workspaces 或 pnpm Workspaces 等工具。 实现方式：掌握如何配置和使用这些工具来管理多包依赖，包括安装、发布、运行脚本等。 软链接/硬链接：理解这些工具如何通过符号链接解决依赖共享和版本管理问题。 参考答案 1.1 原理说明 Monorepo 是一种代码仓库管理策略，它将多个项目的代码存储在同一个版本控制仓库中，而不是为每个项目创建独立的仓库。这种方式的出现是为了解决多项目开发中代码共享、依赖管理、版本控制和协作效率等问题。它与传统的 Multirepo（多仓库）模式相对。 其核心原理在于通过特定的工具（如 Lerna、Yarn Workspaces 或 pnpm Workspaces）来管理仓库内的多个子包（package），实现： 统一的依赖管理：所有包的依赖都集中在一个地方（通常是根目录的 package.json 或各自的 package.json 结合工具配置），避免了重复安装和版本不一致的问题。工具会通过软链接或硬链接的方式将依赖安装到各个子包的 node_modules 中，实现依赖的共享和复用。 统一的构建、测试、发布流程：可以配置统一的脚本来执行所有或部分包的构建、测试和发布流程，简化 CI/CD。 代码共享与重用：各个子包可以直接相互引用，无需发布到 npm 等外部仓库，方便代码共享和模块化开发。 1.2 核心用法 + 示例代码 以 Yarn Workspaces 为例，它作为 Yarn 包管理器的内置功能，提供了一种轻量级的 Monorepo 解决方案。 ...

← 已是第一轮 · 返回本次面经 · 第 2 轮 → 本轮要点： 本次面试主要考察前端基础知识、React框架原理、算法能力等多个维度的内容。重点关注CSS布局、页面性能优化、React核心概念等方面。 本轮共 18 道题。答案默认折叠，便于先自行作答。 1. 如何实现一个宽高自适应的正方形元素？ 题目要点 CSS布局技巧和响应式设计能力 百分比单位在CSS中的特殊性质理解 现代CSS新特性的应用能力 参考答案 1.1 原理说明 实现宽高自适应的正方形元素的核心在于确保元素的高度能够根据其宽度以1:1的比例进行等比缩放。这通常通过利用CSS中某些属性的特殊计算方式来实现，或者通过现代CSS特性直接声明。以下是几种常见方案的核心原理： 使用padding-top/padding-bottom百分比：在CSS盒模型中，padding属性的百分比值是相对于父元素的宽度来计算的，即使是padding-top和padding-bottom也是如此。因此，当我们将一个元素的height设为0，并将padding-top或padding-bottom设为100%时，它的高度实际上会等于其父元素的宽度，从而形成一个完美的正方形（假设其宽度也为100%）。这种方法利用了这一特性来"撑开"元素的高度。 使用aspect-ratio（现代浏览器支持）：aspect-ratio是CSS的一个新属性，它允许开发者直接指定一个元素的宽高比，浏览器会根据这个比率自动计算元素的尺寸。例如，aspect-ratio: 1/1会强制元素保持1:1的正方形比例。这是一个更语义化、更现代的解决方案，减少了传统方法的 hackiness。 使用vw单位：vw（viewport width）是一个相对单位，1vw等于视口宽度的1%。通过将元素的width和height都设置为相同的vw值，例如50vw，可以确保它们始终保持相等的尺寸，并随着视口宽度的变化而自适应缩放，从而形成正方形。 这些方案各有优缺点，如兼容性、代码语义性等，选择哪种方案取决于具体的项目需求和目标浏览器环境。 1.2 核心用法 + 示例代码 在实际开发中，这些方案可以根据兼容性需求和代码简洁性进行选择。 方案1：使用padding-top/padding-bottom百分比 这种方法兼容性好，几乎所有浏览器都支持。常用于需要兼容旧版浏览器或在图片、视频容器中保持比例的场景。 .square { width: 100%; /* 宽度可以设置为百分比、固定值或vw等 */ height: 0; padding-top: 100%; /* padding百分比相对于父元素宽度计算，确保高度与宽度相等 */ background: #eee; /* 内部内容可以通过绝对定位放置，以避免被padding挤压 */ position: relative; } .square-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #333; } HTML结构示例: <div class="square"> <div class="square-content"> 自适应正方形 </div> </div> 方案2：使用aspect-ratio（现代浏览器支持） 这是CSS3新增的属性，语义化最好，代码最简洁。适用于现代浏览器环境，是推荐的首选方案。 ...

← 已是第一轮 · 返回本次面经 · 已是最后一轮 → 本轮要点： 考察面试者的表达能力、总结归纳能力和个人亮点。 本轮共 17 道题。答案默认折叠，便于先自行作答。 1. 自我介绍 题目要点 主观型问题，无唯一标准答案。 面试官主要考察答题者的表达能力、总结归纳能力、沟通技巧以及对自身经历和技术栈的清晰认知。 答题时建议围绕"我是谁"、“我做了什么”、“我做得怎么样"和"我为什么选择贵公司"这几个核心点展开，突出个人亮点与岗位匹配度。 参考答案 各位面试官好，我叫[您的姓名]，毕业于[您的学校]，专业是[您的专业]。在校期间，我专注于前端开发方向的学习与实践。在技术栈方面，我熟练掌握 HTML、CSS、JavaScript 基础，并深入学习了 Vue.js 框架，对 Vue 生态系统，如 Vuex、Vue Router 也有实际应用经验。在实习期间，我主要负责[您的项目职责，例如：公司官网前端页面的开发与维护，参与了XX功能模块的重构]。具体工作中，我曾独立负责[具体某个功能或模块]，通过[具体技术或方法]，实现了[具体效果或优化]，比如在[某项目中]实现了[某个功能]，有效提升了用户体验[或业务效率]。我个人对前端技术充满热情，具备良好的学习能力和解决问题的能力，期待能将我的技能和经验应用到贵公司，与团队一同成长。 2. 在学校期间有没有参与过什么技术社团或项目，对你的前端学习有什么帮助？ 题目要点 主观型问题，无唯一标准答案。 面试官主要考察答题者在校期间对技术的热情、主动学习能力、团队协作能力以及将理论知识应用于实践的能力。他们希望了解你如何将课外活动与前端学习结合，并从中获得了哪些成长。 答题时建议突出你在社团/项目中承担的角色、遇到的挑战、如何解决问题、学到的技术知识以及对个人成长的影响。 参考答案 在校期间，我积极参与了学校的[例如：创新创业协会或某个技术兴趣小组]。在这些活动中，我曾参与一个[例如：校园兼职平台]的小型项目开发。当时，我们团队面临的挑战是[例如：如何利用有限的资源快速搭建一个具备基本交互功能的前端原型]。我主动承担了前端页面的开发工作，通过自学 Vue.js 的组件化思想和路由管理，将页面拆分为可复用的组件，并实现了前端路由功能。虽然项目规模不大，但它让我第一次有机会将课堂上学习的 HTML、CSS、JavaScript 知识体系化地应用到实际开发中。通过这次经历，我不仅锻炼了独立解决问题的能力，还体会到了团队协作的重要性，比如在开发中与后端同学进行接口联调、与设计师沟通 UI 实现细节等，这对我后续的实习和前端学习都产生了积极的推动作用。 3. 说说你实习项目中遇到的技术难点，以及你是如何解决的？ 题目要点 主观型问题，无唯一标准答案。 面试官主要考察答题者对项目实践的深入理解、问题解决能力、技术深度以及学习和复盘能力。他们希望了解你在面对挑战时，如何分析问题、寻找解决方案并最终达成目标。 答题时建议围绕"遇到什么难点”、“如何分析与定位问题”、“采用了哪些技术方案”、“解决了什么问题"以及"从中获得了哪些经验和教训"等核心点展开，强调思考过程和技术细节。 参考答案 在我的实习项目中，我曾遇到一个比较棘手的性能问题。我们负责的一个电商列表页面，随着商品数量的增多，首次加载时间变得非常慢，用户体验受到严重影响。通过浏览器开发者工具分析，我发现主要瓶颈在于大量图片资源的加载以及首屏渲染时数据量过大导致的卡顿。 为了解决这个问题，我首先考虑了图片懒加载。我引入了一个 Intersection Observer API 的实现，使得图片只有在进入用户视口时才开始加载，这显著减少了初始的 HTTP 请求数量和带宽消耗。其次，针对数据量大的问题，我调研并实现了虚拟列表。核心思路是只渲染当前可见区域的列表项，并动态计算滚动时的偏移量和渲染范围。这避免了一次性渲染数千个 DOM 节点造成的性能压力。具体实现中，我维护了一个可滚动区域，根据滚动位置动态更新展示的数据索引，并结合 requestAnimationFrame 确保滚动动画的流畅性。 经过这些优化措施，页面的首次加载时间从原来的 8 秒降低到了 2 秒以内，列表滚动时的卡顿现象也基本消除。这个过程让我对前端性能优化有了更深层次的理解，特别是如何结合浏览器 API 和数据结构优化来解决实际问题，也锻炼了我分析和解决复杂性能瓶颈的能力。 4. 解释一下 TS 泛型的概念和作用 题目要点 泛型概念：面试官想确认面试者对泛型的基本定义、作用和设计目的的理解。 泛型作用：考察泛型在增强代码灵活性、类型安全和重用性方面的具体应用。 实际应用：理解泛型在实际开发中如何应用于函数、接口、类等场景，以及其在大型项目中的价值。 参考答案 1.1 原理说明 ...

← 已是第一轮 · 返回本次面经 · 已是最后一轮 → 本轮共 21 道题。答案默认折叠，便于先自行作答。 1. 深拷贝浅拷贝有什么区别？怎么实现深拷贝？ 题库原题：深拷贝浅拷贝有什么区别？怎么实现深拷贝？ 题目要点 JS数据类型分别基本数据类型和引用数据类型，基本数据类型保存的是值，引用类型保存的是引用地址(this指针)。 浅拷贝共用一个引用地址，深拷贝会创建新的内存地址。 浅拷贝方法 直接对象复制 Object.assign 深拷贝 JSON.stringify转为字符串再JSON.parse 深度递归遍历 参考答案 一、数据类型存储 前面文章我们讲到，JavaScript中存在两大数据类型： 基本类型 引用类型 基本类型数据保存在在栈内存中 引用类型数据保存在堆内存中，引用数据类型的变量是一个指向堆内存中实际对象的引用，存在栈中 二、浅拷贝 浅拷贝，指的是创建新的数据，这个数据有着原始数据属性值的一份精确拷贝 如果属性是基本类型，拷贝的就是基本类型的值。如果属性是引用类型，拷贝的就是内存地址 即浅拷贝是拷贝一层，深层次的引用类型则共享内存地址 下面简单实现一个浅拷贝 function shallowClone(obj) { const newObj = {}; for(let prop in obj) { if(obj.hasOwnProperty(prop)){ newObj[prop] = obj[prop]; } } return newObj; } 在JavaScript中，存在浅拷贝的现象有： Object.assign Array.prototype.slice(), Array.prototype.concat() 使用拓展运算符实现的复制 Object.assign var obj = { age: 18, nature: ['smart', 'good'], names: { name1: 'fx', name2: 'xka' }, love: function () { console.log('fx is a great girl') } } var newObj = Object.assign({}, obj); slice() const fxArr = ["One", "Two", "Three"] const fxArrs = fxArr.slice(0) fxArrs[1] = "love"; console.log(fxArr) // ["One", "Two", "Three"] console.log(fxArrs) // ["One", "love", "Three"] concat() const fxArr = ["One", "Two", "Three"] const fxArrs = fxArr.concat() fxArrs[1] = "love"; console.log(fxArr) // ["One", "Two", "Three"] console.log(fxArrs) // ["One", "love", "Three"] 拓展运算符 const fxArr = ["One", "Two", "Three"] const fxArrs = [...fxArr] fxArrs[1] = "love"; console.log(fxArr) // ["One", "Two", "Three"] console.log(fxArrs) // ["One", "love", "Three"] 三、深拷贝 深拷贝开辟一个新的栈，两个对象的属性完全相同，但是对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性 ...

← 已是第一轮 · 返回本次面经 · 已是最后一轮 → 本轮共 20 道题。答案默认折叠，便于先自行作答。 1. 有没有使用 Node.js 进行开发的经历？ 题目要点 “不仅仅用过 Node.js，而且能说清楚在前端团队里它解决了哪些实际问题，产生了什么价值。” 这样比单纯回答“用过/没用过”更有亮点。 参考答案 考察的核心是：对 Node.js 的理解深度和在前端/全栈中的实际应用场景。 回答时可以从以下几个角度展开： 1. 使用场景 前端工程化工具链： 使用 Node.js 驱动构建工具（Webpack、Vite、Rollup 等），编写脚本实现自动化构建、代码检查、Mock Server 搭建。 服务端接口开发： 基于 Express、Koa、NestJS 搭建轻量级 API 服务，用于前后端分离项目的接口模拟或小型后台系统。 中间层 / BFF（Backend for Frontend）： 在复杂业务中，用 Node.js 实现前后端解耦，比如统一处理接口聚合、鉴权、缓存。 SSR / SSG 场景： 使用 Next.js 或 Nuxt.js，借助 Node.js 渲染首屏，提升 SEO 和加载体验。 运维与脚本： 编写部署脚本、自动生成文件、批量处理数据。 2. 具体任务 可以结合自身经历强调： 是否搭建过 Mock 服务，辅助前后端并行开发； 是否写过中间层解决跨域、接口聚合问题； 是否在工程化中写过 Node.js 工具脚本（如自动生成路由表、埋点收集脚本）； 是否参与过服务端渲染或静态站点生成相关开发。 3. 收获和亮点 对 事件驱动、非阻塞 I/O 有更深理解，能写出高并发场景下的稳定服务； 学会了在前端视角下如何更好地和后端衔接； 在实际项目中通过 Node.js 提升了团队的开发效率（例如通过脚本工具减少重复劳动）。 2. CSS 3D 变形有哪些常见的属性和方法？ 题目要点 CSS 3D 变形（3D Transform）是 CSS3 提供的一组属性，用来在三维空间中对元素进行旋转、缩放、平移、倾斜等操作。 ...

← 第 1 轮 · 返回本次面经 · 已是最后一轮 → 面试时间： 60分钟 本轮共 21 道题。答案默认折叠，便于先自行作答。 1. 讲一下你在官网开发中的主要职责，开发的模块以及你觉的比较亮点的地方 题目要点 如果是面试官问到“官网开发中的主要职责、开发的模块以及比较亮点的地方”，一般可以从以下几个角度来回答，既展示你的全局把控能力，又体现你在某些点上有深度。 参考答案 如果是面试官问到“官网开发中的主要职责、开发的模块以及比较亮点的地方”，一般可以从以下几个角度来回答，既展示你的全局把控能力，又体现你在某些点上有深度。 下面是一个参考思路： 1. 主要职责 官网整体架构搭建：根据业务和设计稿，使用 React/Vue + Vite/Next.js/Nuxt.js 等技术栈完成整体框架搭建，包括路由、状态管理、多语言支持等。 公共模块封装：抽象公共组件（如导航栏、页脚、轮播、富文本渲染、内容卡片等），提高复用率，减少重复开发。 性能优化：处理首屏加载速度、资源拆分、图片懒加载、SSR/SSG、SEO 优化。 协作沟通：与产品、UI、后端保持沟通，保证页面上线节奏和质量。 2. 负责的模块（可根据实际情况举例） 首页：承担品牌形象展示，涉及 banner 动效、动态数据展示、视频播放等。 产品/解决方案页：结合后端接口，展示不同产品模块，支持筛选、搜索、动态路由。 活动/新闻动态页：接入 CMS（如 Strapi、Sanity、WordPress 等），支持运营人员通过后台直接发布。 多语言切换模块：基于 i18n 实现官网多语言，支持自动识别浏览器语言，静态资源跟随切换。 SEO 优化模块：处理 meta 信息、OG 标签、站点地图、robots.txt，提升搜索引擎收录效果。 3. 亮点/难点突破 性能优化亮点 利用 SSR/SSG（Next.js/Nuxt.js）提升首屏渲染速度，Lighthouse 分数提升到 90+。 使用图片 CDN + WebP 格式，首页加载时间缩短 30%。 按需加载组件、拆分 bundle，减少首次请求体积。 可配置化思路 引入 CMS 系统，实现官网内容可配置，避免频繁改代码上线，运营可直接维护。 封装通用“模块化组件”，如 Banner、富文本、图文组合，做到拖拽/配置式渲染。 前端体验优化 首页/产品页引入 动效（基于 Lottie 或 GSAP），提升视觉冲击力。 交互细节（滚动吸附、视差动画、过渡效果）增强用户沉浸感。 工程化实践 ...

← 已是第一轮 · 返回本次面经 · 第 1 轮 → 本轮共 15 道题。答案默认折叠，便于先自行作答。 1. 前端实现动画有哪些方式？ 题库原题：前端实现动画有哪些方式？ 题目要点 前端开发中，实现动画的方法多种多样，每种方法都有其适用场景和优缺点。以下是一些常见的实现方式： CSS 动画： 使用 @keyframes 和 animation 属性定义动画。 优点：易于实现，性能好，易于维护。 缺点：功能相对简单，难以实现复杂的交互动画。 CSS 过渡（Transitions）： 使用 transition 属性在状态变化时实现平滑过渡。 优点：简单易用，性能优秀。 缺点：只能用于状态变化的过渡，不适合复杂动画。 JavaScript 动画： 使用 JavaScript 直接操作 DOM 元素的样式属性实现动画。 优点：灵活性高，可以控制动画的每一个细节。 缺点：可能影响性能，需要更多的代码实现。 Web Animations API： 使用 Element.animate() 方法实现动画。 优点：提供更丰富的动画控制和更一致的跨浏览器支持。 缺点：兼容性不如 CSS 动画。 SVG 动画： 使用 SVG 元素和 SMIL（Synchronized Multimedia Integration Language）或 CSS 动画实现动画。 优点：适合矢量图形动画，易于集成。 缺点：浏览器支持和性能可能不如 CSS 动画。 Canvas： 使用 HTML <canvas> 元素和 JavaScript 绘制动画。 优点：适合复杂的图形和游戏动画。 缺点：实现复杂，需要手动管理每一帧的绘制。 CSS 3D 变换： ...

← 已是第一轮 · 返回本次面经 · 已是最后一轮 → 本轮要点： 本次面试主要考察前端基础知识，包括数据结构、网络协议、操作系统、JavaScript、CSS、React以及算法等方面。 本轮共 12 道题。答案默认折叠，便于先自行作答。 1. 数组和链表的区别，读取 和 删除 的时间复杂度 题目要点 数据结构基础：考察对数组和链表这两种基本数据结构概念的理解，包括它们的存储方式和特点。 时间复杂度分析：评估数据结构在不同操作下的性能表现，这是衡量算法效率的关键指标。 参考答案 1.1 原理说明 数组：数组是一种将元素存储在连续内存空间中的数据结构。它通过索引来直接访问任意元素，因为所有元素的大小相同且物理地址连续，可以通过首地址和索引计算出元素的确切位置。 链表：链表是一种将元素存储在非连续内存空间中的数据结构。每个元素（称为节点）包含数据本身以及指向下一个元素的指针（或引用）。节点之间通过这些指针逻辑上连接起来，但不要求物理上连续。 联系与区别：数组和链表都是线性数据结构，用于有序地存储和组织数据。它们的主要区别在于内存的物理存储方式和由此带来的对元素访问、插入、删除操作的效率差异。数组支持随机访问，而链表只能顺序访问。 为什么会出现这个技术需求或问题：不同的数据存储和操作场景对数据结构有不同的性能要求。当需要快速随机访问数据时，数组由于其连续存储特性表现更优；而当需要频繁地进行插入和删除操作时，链表由于其灵活的指针连接方式，避免了大量元素移动，因此效率更高。 1.2 核心用法 + 示例代码 读取操作： 数组：通过索引直接访问元素，时间复杂度为 O(1)。无论数组大小，访问任何元素所需时间都是恒定的。 const arr = [10, 20, 30, 40, 50]; console.log(arr[2]); // 输出 30，直接访问，时间复杂度 O(1) 链表：必须从链表的头部节点开始，沿着指针逐个遍历，直到找到目标元素。因此，时间复杂度为 O(n)，其中 n 是链表的长度。在最坏情况下，需要遍历整个链表。 class Node { constructor(val) { this.val = val; this.next = null; } } const head = new Node(10); head.next = new Node(20); head.next.next = new Node(30); let current = head; while (current && current.val !== 30) { current = current.next; } console.log(current ? current.val : 'Not found'); // 输出 30，需要遍历，时间复杂度 O(n) 删除操作： 数组：删除数组中的某个元素后，为了保持内存的连续性，其后的所有元素都需要向前移动以填补空缺。这个移动操作的时间复杂度为 O(n)。 const arr = [1, 2, 3, 4, 5]; arr.splice(2, 1); // 删除索引为2的元素（即3），后续元素（4, 5）前移，时间复杂度 O(n) console.log(arr); // 输出 [1, 2, 4, 5] 链表：如果已知要删除节点的前一个节点，删除操作只需要修改前一个节点的指针，使其指向被删除节点的下一个节点。这个操作的时间复杂度为 O(1)。如果需要先查找再删除，则总时间复杂度为 O(n)（查找的开销）。 // 假设我们有一个链表 1 -> 2 -> 3，我们要删除值为 2 的节点 // 模拟找到值为 1 的节点 (prevNode) 和值为 2 的节点 (nodeToDelete) let headDelete = new Node(1); let node2 = new Node(2); let node3 = new Node(3); headDelete.next = node2; node2.next = node3; let prevNode = headDelete; // 值为 1 的节点 let nodeToDelete = node2; // 值为 2 的节点 prevNode.next = nodeToDelete.next; // 将 1 的 next 指向 3，时间复杂度 O(1) // 现在链表变为 1 -> 3 优势总结： ...

← 已是第一轮 · 返回本次面经 · 已是最后一轮 → 本轮要点： 本次面试主要考察前端基础、框架原理以及性能优化等方面的知识。 本轮共 26 道题。答案默认折叠，便于先自行作答。 1. 1. 项目的难点与亮点是什么？ 题目要点 说明该题是主观型问题，不考"唯一标准答案"。 面试官主要考察答题者的表达能力、思路系统性、技术理解和复盘能力。 答题结构建议：首先简述项目背景，接着阐述难点（遇到的问题、如何解决、技术选型考量），再说明亮点（创新点、技术深度、业务价值），最后进行总结和反思。 参考答案 我们团队在开发 XXX 项目时，有一个核心模块是 YYYY。这个模块的主要难点在于需要处理高并发的数据同步和复杂的权限控制逻辑。具体来说，我们面临的挑战包括： 高并发数据同步：在某个特定场景下，用户操作会导致大量数据实时更新，并且这些更新需要快速同步到多个客户端。初期方案在压力测试时出现了明显的延迟和数据不一致问题。 解决思路：我们分析了瓶颈，发现是由于频繁的数据库写入和全量数据推送导致的。经过讨论，我们最终选择了基于 WebSocket 实现增量数据推送，并引入了消息队列（Kafka）来削峰填谷，后端对数据进行聚合后再批量写入。在前端，我们设计了一个轻量级的数据缓存层，只在接收到增量更新时局部刷新UI，大大减少了DOM操作。 技术权衡：我们对比过轮询、长轮询等方案，但它们在实时性和资源消耗上都不如 WebSocket 配合增量更新。虽然引入消息队列和 WebSocket 增加了系统复杂度，但在百万级并发场景下，它提供了更优的性能和更低的资源占用。 复杂的权限控制：系统需要支持多维度、细粒度的用户权限，包括不同角色对数据和功能的访问权限，并且权限配置是动态可变的。 解决思路：我们设计了一套基于 RBAC（Role-Based Access Control）的权限模型，但在前端实现时，为了避免每次操作都去后端校验权限，我们引入了前端权限路由守卫和组件级权限指令。在用户登录时，后端会返回一个精简的权限列表，前端根据这个列表动态生成菜单、路由，并控制组件的可见性及交互。 技术权衡：这种前后端结合的权限控制方式，兼顾了安全性和用户体验。虽然前端增加了权限逻辑处理，但减少了不必要的后端请求，提升了页面响应速度。我们还考虑过将权限完全放到后端控制，但那样会导致频繁的网络请求，用户体验会下降。 项目的亮点主要体现在两个方面： 技术深度与创新：我们引入的 WebSocket + Kafka 的实时数据同步方案，有效地支撑了高并发场景下的数据一致性和实时性要求，这是项目在技术上的一大突破。此外，我们还自主研发了一套可视化配置工具，让业务人员可以灵活配置数据同步规则，极大地提高了运营效率。 业务价值与用户体验提升：通过解决上述难点，我们成功将核心页面的数据实时同步延迟从平均 5 秒降低到 500 毫秒以内，用户在操作时的卡顿感几乎消除，大幅提升了用户满意度。同时，权限系统的灵活配置也让业务扩展变得更加便捷，支持了新业务的快速上线。 在整个过程中，我们团队通过深入分析、多方案对比和持续优化，不仅攻克了技术难点，也为业务带来了实际的价值。这次经历让我对高并发系统设计和复杂权限管理有了更深刻的理解，也锻炼了我在权衡技术方案和解决实际问题方面的能力。 2. 2. 解决难点时，是否对比过多种方案？最终选择的方案有何权衡？ 题目要点 说明该题是主观型问题，不考"唯一标准答案"。 面试官主要考察答题者解决问题的思路、方案对比能力、技术选型和权衡能力，以及对项目实际情况的理解。 答题结构建议：首先选择一个具体的项目难点，围绕该难点，阐述曾考虑的多种解决方案，对比它们的优劣（技术、成本、风险等），最终说明选择当前方案的理由及权衡过程，并可提及后续优化方向。 参考答案 在我的前端项目中，曾遇到一个挑战，就是如何高效地管理和渲染大规模的动态表单。传统的方案是直接通过 JSON 配置动态生成表单项，但这在表单项过多、层级嵌套复杂时，会导致渲染性能下降，并且表单校验逻辑难以统一管理。 当时我们主要对比了以下几种方案： 方案一：纯粹的 JSON Schema 驱动，一次性渲染 优点：配置简单直观，后端可以方便地控制表单结构。 缺点：对于包含上百个字段甚至更多字段的复杂表单，一次性渲染会导致首次加载时间过长，页面卡顿。当表单数据频繁变化时，DOM 更新开销大，用户体验差。 权衡：虽然开发成本低，但性能瓶颈明显，不适用于我们目标中的大型复杂表单。 方案二：基于组件化和局部更新 ...

← 已是第一轮 · 返回本次面经 · 第 1 轮 → 本轮概述： 一面主要考察前端基础，难度不大。 面试时间： 90分钟 本轮要点： 基础概念理解深入，能够解释原理和应用场景 代码实现思路清晰，考虑边界情况和性能优化 对前端技术栈有系统性认知，了解技术发展趋势 具备解决实际问题的能力和工程化思维 本轮共 12 道题。答案默认折叠，便于先自行作答。 1. 为什么选择前端 题目要点 作为校招生，回答"为什么选择前端"时要避免空喊"热爱"或跟风，建议用具体经历+能力匹配+行业洞察的三段式结构，既体现思考深度又展示成长潜力。 参考答案 以下是分场景的高分回答模板： 版本一：技术驱动型（适合有项目经历的同学） “选择前端源于两次关键经历： 大一用Vue重构学院官网时，发现通过组件化开发能将设计稿像素级还原，这种’所见即所得’的即时反馈让我着迷； 在实习中做低代码平台时，用React+D3.js实现拖拽生成图表，体会到前端不仅是实现UI，更是连接用户与数据的桥梁。 前端技术迭代快（如WebAssembly、微前端）的特点，恰好匹配我热衷通过技术解决实际问题的性格。贵司的XX业务（如电商/数据可视化）对交互体验要求极高，我的XX项目经验（举例）能快速落地。” 版本二：用户导向型（适合非科班转行的同学） “虽然我是工业设计专业，但大三时用Figma做APP原型时，发现静态设计无法验证用户真实体验。于是自学Three.js做了3D产品展示页，通过A/B测试发现3D交互使用户停留时长提升40%。这让我意识到：前端是设计落地的’最后一公里’。 前端独有的**‘技术+设计+心理学’交叉属性**（如用Framer-motion设计微交互引导用户操作），让我能用代码延续设计价值。贵司注重用户体验（如引用官网案例），我的设计背景+代码能力能提供差异化视角。” 版本三：行业趋势型（适合技术视野广的同学） “选择前端是因为它是最接近技术变革一线的领域： 云原生时代：前端从浏览器扩展到全端（如Electron桌面应用、小程序）； AI赋能：WebGL+TF.js让前端直接运行AI模型（如实时人脸检测）； IoT场景：前端技术控制智能家居（如用WebSerial协议与硬件通信）。 我在开源项目参与过WebRTC实时互动功能开发，体会到前端工程师正在定义下一代人机交互标准。贵司的XX业务（如智能硬件/元宇宙）正处于这些趋势的交汇点，我的XX技能（如WebGL/跨端开发）能直接贡献。” 避坑提示 不要只说"喜欢 visible 的结果"：改为**“享受从像素级还原到性能优化的全链路挑战”**（体现技术深度）。 避免"前端简单"的刻板印象：改为**“前端是工程复杂度最高的领域之一，需同时处理兼容性、状态管理、性能优化多端适配”**（展示认知）。 关联公司业务：提前研究官网/技术博客，比如：“注意到贵司用Next.js重构了主站，我对其中SSG/ISR的SEO优化策略很感兴趣”（体现调研）。 最后，用成长型结尾强化潜力：“作为校招生，我清楚自己缺乏高并发场景经验，但已系统学习Chrome DevTools性能分析，并模拟过百万级PV的SSR优化（举例），期待在贵司的实际业务中深化这些能力。” 2. 框架理解 - Nest.js设计思想 题目要点 分层架构、功能增强、多种设计模式应用 参考答案 Nest.js基于Express或Fastify进行封装，采用分层架构设计。底层HTTP服务器提供基础的请求处理能力，Nest.js在此基础上添加了依赖注入、装饰器、模块化等企业级特性。这确实类似装饰器模式，每一层都在不改变核心功能的前提下增强框架能力。 除了装饰器模式，还了解观察者模式（发布-订阅），常用于事件系统和状态管理；工厂模式，用于创建不同类型的对象实例；单例模式，确保全局唯一实例等。 3. 闭包概念和产生原因 题目要点 词法作用域、变量访问权限、执行环境保持 参考答案 闭包是指函数能够访问其外部作用域变量的特性。产生闭包的原因是JavaScript的词法作用域机制，函数在定义时就确定了可访问的变量范围，即使在其他执行环境中调用也能保持这种访问能力。 function createCounter() { let count = 0; return function() { return ++count; }; } const counter = createCounter(); console.log(counter()); // 1 console.log(counter()); // 2 4. 闭包内存问题及解决方案 题目要点 引用保持、垃圾回收阻塞、手动清理、变量提取 ...