一面

← 已是第一轮 · 返回本次面经 · 已是最后一轮 → 本轮概述： 这场面试主要围绕前端项目的实际工程能力展开，重点考察了候选人对动态路由、权限控制和状态管理的理解与实践。 同时涉及网络请求优化、缓存机制及组件复用等中高级工程问题，体现出对项目可维护性和性能的关注。 面试还关注了候选人对 TypeScript 应用、学习方法和职业规划的思考，考察其成长潜力与技术视野。 本轮要点： 跨域相关 本轮共 16 道题。答案默认折叠，便于先自行作答。 1. 如何在前端项目中实现动态路由？ 题库原题：如何在前端项目中实现动态路由？ 题目要点 动态路由的核心是将路由配置从静态定义转为运行时生成或挂载。常见做法包括“前端维护完整路由表后过滤”以及“后端下发路由配置”。 具体实现依赖框架提供的 API（如 addRoute、useRoutes），同时需要兼顾权限控制、懒加载与导航组件的解耦，才能在保证安全性的同时保持可扩展性和良好的用户体验。 参考答案 在前端项目中实现动态路由，本质上是根据用户权限、接口返回的数据或者运行时条件，动态地生成或加载路由配置，从而决定页面的可访问性和导航结构。 以 React Router 和 Vue Router 为例，核心思路有一些共通点： 在应用启动时，会有一个静态的基础路由表，用来保证最基本的页面可以正常访问（例如登录页、404 页、Layout 容器等）。而真正需要按用户角色、接口数据控制的路由，则通过接口请求或预置配置动态挂载进路由系统。 常见的实现方式有两类： 一种是前端自行维护完整的路由表，用户登录后，后端返回权限信息（角色、菜单、可访问模块 ID 等），前端在已有的路由表中做过滤，只保留当前用户有权限的部分，再动态挂载到路由系统。这种方式对前端掌控力更强，体验流畅，但需要在前端同步维护一份路由和权限的映射关系。 另一种是由后端直接下发路由配置（通常带有 path、component 标识、子路由结构等），前端拿到配置后再通过组件映射表动态生成路由。这种方式能减轻前端维护压力，但会带来接口设计和前后端耦合的问题。 在技术层面，React Router v6 提供了 useRoutes 可以直接基于对象动态生成路由，Vue Router 也支持 router.addRoute 在运行时动态添加路由。对于懒加载组件，还需要结合 import() 或 defineAsyncComponent（Vue）来实现，避免一次性加载所有页面。 此外，动态路由不仅仅是技术实现，还涉及安全性和用户体验。例如： 在前端动态路由实现时，不能只依赖前端的路由控制，还需要后端接口做权限校验，避免用户绕过前端访问受限页面。 路由结构最好和菜单、面包屑等导航组件解耦，通过统一的数据结构管理，保证后续扩展的灵活性。 在大规模项目中，动态路由还常与微前端、模块化加载结合，按需挂载子应用或子模块。 2. Vue3的addRoute与React Router的动态useRoutes有何区别？如何解决动态路由刷新后失效的问题？ 题库原题：Vue3的addRoute与React Router的动态useRoutes有何区别？如何解决动态路由刷新后失效的问题？ 题目要点 Vue3 的 addRoute 属于“增量挂载”，可以在运行时动态向现有路由表中追加新配置；React Router 的 useRoutes 则是基于配置对象动态生成，强调整体渲染而不是单点挂载。动态路由刷新后失效的根本原因是路由配置只存在于内存中，需要在应用初始化时通过本地存储或接口请求恢复路由数据，才能保证页面刷新后仍能正确访问。 ...

← 已是第一轮 · 返回本次面经 · 第 1 轮 → 本轮概述： 这些题目全面考察了前端工程师在实际项目中需要掌握的核心技术和解决问题的能力，涵盖了从基础原理到工程实践的各个层面。 本轮共 23 道题。答案默认折叠，便于先自行作答。 1. 自我介绍、项目介绍 题目要点 技术栈熟练度、架构经验、性能优化成果、团队协作能力 参考答案 具有3年前端开发经验，专注于现代化前端技术栈和工程化实践。主要负责过大型电商平台的前端架构设计和性能优化工作，熟练掌握 Vue/React 生态系统。在项目中主导了从传统架构向微前端架构的迁移，通过模块联邦和组件库建设提升了团队开发效率。同时在性能优化方面有丰富实践，将核心页面的首屏加载时间优化至2秒以内。 2. 可视化搭建平台中，如何设计数据规范保证组件间数据兼容性？请求收效的具体实现方案是什么？ 题目要点 Schema规范、数据校验、适配器模式、请求优化策略 参考答案 建立统一的数据协议规范，定义标准的组件 Schema 结构，包含 props、events、slots 等接口描述。通过 JSON Schema 进行数据校验，确保组件间数据传递的类型安全。实现数据适配器模式，当组件接口不兼容时自动进行数据转换。请求收效方面，采用请求去重和缓存策略，相同请求在短时间内只发送一次，同时建立请求优先级队列，确保关键数据的及时响应。 3. 组件的拖拽行为如何实现？如何为组件动态注入行为（如拖拽、缩放）？ 题目要点 事件序列处理、状态管理、装饰器模式、行为解耦 参考答案 拖拽实现基于原生 Drag API 或鼠标事件，通过监听 mousedown、mousemove、mouseup 事件序列。建立拖拽状态管理，记录拖拽起始位置、当前位置和目标位置。动态行为注入采用装饰器模式或高阶组件，将行为逻辑与组件本身解耦。通过 mixin 或 composition API 的方式，在运行时为组件添加拖拽、缩放等交互能力。 4. 如何解决拖拽过程中频繁触发事件导致的性能问题？ 题目要点 节流防抖、requestAnimationFrame、事件委托、计算优化 参考答案 使用节流（throttle）限制事件触发频率，通常设置为 16ms 以保持 60fps 的流畅度。采用 requestAnimationFrame 优化动画渲染，确保在浏览器重绘时机执行位置更新。实现事件委托减少事件监听器数量，在容器元素上统一处理拖拽事件。对于复杂计算，使用防抖（debounce）延迟执行，避免在拖拽过程中进行不必要的重计算。 5. 性能优化关注的指标有哪些（如FCP、TTI）？你用了哪些具体手段？ 题库原题：前端性能优化指标有哪些？怎么进行性能检测？ 题目要点 前端性能评估主要围绕三个维度展开： 页面加载速度、交互响应能力以及页面稳定性。常见指标包括 FP、FCP、LCP 等加载指标，FID 和 INP 等交互指标，以及 CLS 布局稳定性指标。 性能检测通常分为两类方式：开发阶段使用 Lighthouse、Chrome DevTools、WebPageTest 等工具进行实验室分析； 线上环境通过 Performance API 或 web-vitals 采集真实用户性能数据，并结合监控平台进行统计与优化。 参考答案 前端性能通常不会只看单一指标，而是从用户感知加载速度、交互响应速度以及页面稳定性三个维度进行评估。当前行业中比较主流的一套指标体系来自 Google 提出的 Web Vitals，并结合传统的加载性能指标共同评估。 ...

← 已是第一轮 · 返回本次面经 · 第 1 轮 → 本轮共 23 道题。答案默认折叠，便于先自行作答。 1. Vue 3.0 相比 Vue 2.0 有哪些改进？ 题目要点 响应式系统升级、Composition API、性能优化、TypeScript支持、Fragment支持 参考答案 Vue 3.0 在架构层面进行了重大重构，采用了基于 Proxy 的响应式系统替代了 Object.defineProperty，这使得可以直接监听数组变化和动态属性添加。组合式 API 的引入提供了更好的逻辑复用和类型推导能力。在性能方面，通过 Tree-shaking 支持、更小的包体积、以及编译时优化显著提升了运行效率。 2. Composition API 解决了 Options API 的哪些问题？ 题目要点 逻辑聚合、代码复用、类型推导、避免mixin问题 参考答案 Options API 在处理复杂组件时会出现逻辑分散的问题，相关的数据、方法、计算属性被强制分离到不同的选项中。Composition API 通过 setup 函数将相关逻辑聚合在一起，提高了代码的可维护性。同时解决了 mixin 命名冲突和来源不清晰的问题，提供了更好的 TypeScript 类型推导支持。 3. Proxy 相比 Object.defineProperty 在响应式上有何优势？ 题目要点 对象级别监听、动态属性支持、数组监听、更多拦截操作 参考答案 Proxy 可以直接监听整个对象而不需要遍历每个属性，支持动态属性的添加和删除监听。对于数组操作，Proxy 可以直接监听数组的变化，而 Object.defineProperty 需要重写数组方法。Proxy 还支持更多的拦截操作，如 has、deleteProperty 等，提供了更完整的响应式能力。 4. nextTick 如何保证 DOM 更新后执行回调？ 题目要点 事件循环、微任务队列、异步更新、降级策略 ...

← 已是第一轮 · 返回本次面经 · 第 1 轮 → 本轮共 15 道题。答案默认折叠，便于先自行作答。 1. 讲一下项目的难点和亮点 题目要点 突出解决问题的能力，说明遇到过的复杂问题和优化方案，亮点要体现价值和可扩展性。 参考答案 在大型前端项目中，常见难点在于性能优化和复杂业务的抽象。比如数据量大时页面渲染和交互卡顿，需要通过虚拟列表、懒加载、分片渲染等方式解决；跨端适配和复杂状态管理也是典型难点。亮点可以体现在工程化和架构设计上，例如通过模块化拆分、微前端架构提高可维护性，或通过自动化工具链提升研发效率。 2. 项目的规范是如何制定的，如何执行的 题目要点 强调自动化工具与制度双管齐下，执行靠工具、评审和 CI 流程。 参考答案 前端规范一般从编码规范、组件封装规范、目录结构、Git 提交规范等方面制定。执行时可以依赖工具保障，比如 ESLint + Prettier 自动化格式化，Husky + lint-staged 在提交时校验，CI/CD 流程中增加检测。对组件层面，约定统一的 API 风格和文档，保证多人协作一致性。 3. 说说vue中的diff算法 题库原题：说说vue中的diff算法 题目要点 diff算法是一种高效的比较算法，主要用于比较虚拟DOM节点，以确定如何更新真实DOM。它具有两个特点：只会在同层级进行比较，不会跨层级比较；在比较的过程中，循环从两边向中间收拢。 在Vue中，diff算法用于比较新旧VNode节点，以决定如何更新真实DOM。 这个过程分为以下几个步骤： 比较新旧VNode节点：如果新旧节点相同，则不做任何操作；如果新旧节点都不存在子节点，则直接结束比较；如果新旧节点都有子节点，则进入updateChildren函数比较子节点。 更新子节点：在updateChildren函数中，设置新旧VNode的头尾指针，然后从两边向中间比较。如果新旧头尾指针相同，则直接patchVnode；如果新旧头尾指针不同，则根据情况调用patchVnode、createElm创建新节点，或者从哈希表寻找key一致的旧VNode节点再进行分情况操作。 patchVnode方法：如果新旧节点都有文本节点且不相等，则设置真实dom的文本节点为新节点的文本节点；如果旧节点有子节点而新节点没有，则删除旧节点的子节点；如果旧节点没有子节点而新节点有，则将新节点的子节点真实化后添加到旧节点；如果两者都有子节点，则进入updateChildren函数比较子节点。 通过diff算法，Vue能够高效地比较新旧VNode节点，以决定如何更新真实DOM，从而提高页面渲染的性能。 参考答案 一、是什么 diff 算法是一种通过同层的树节点进行比较的高效算法 其有两个特点： 比较只会在同层级进行, 不会跨层级比较 在diff比较的过程中，循环从两边向中间比较 diff 算法的在很多场景下都有应用，在 vue 中，作用于虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较 二、比较方式 diff整体策略为：深度优先，同层比较 比较只会在同层级进行, 不会跨层级比较 比较的过程中，循环从两边向中间收拢 ...

← 已是第一轮 · 返回本次面经 · 第 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 轮 → 本轮共 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 变换： ...