面试

← 已是第一轮 · 返回本次面经 · 已是最后一轮 → 本轮概述： 这一轮主要考察了候选人的自我介绍、职业规划、项目经验、前端技术细节以及算法问题。面试氛围较为全面，涵盖了从基础到高级的多个方面。 面试时间： 45分钟 本轮共 21 道题。答案默认折叠，便于先自行作答。 1. 自我介绍 题目要点 个人背景, 工作经验, 技术栈, 项目经验, 未来展望 参考答案 自我介绍应包括个人背景、工作经验、技术栈、项目经验和对未来的展望。重点在于展示自己的专业能力和对前端技术的热情。 2. 你的职业规划与前端技术方向的关系？ 题目要点 技术趋势, 个人兴趣, 学习和实践, 技能提升, 未来发展 参考答案 回答时可以结合当前的技术趋势和个人兴趣，说明如何通过不断学习和实践来提升自己在前端领域的技能。同时，可以提到对未来技术发展的看法和如何适应这些变化。 3. 讲一个你参与过的项目 题库原题：你参与过哪些前端基建方面的建设？ 题目要点 前端基建涵盖了从项目架构、构建工具配置到开发环境、自动化流程和安全等多个方面。良好的前端基建可以提升开发效率、代码质量和系统性能，为项目的长期维护和扩展打下坚实的基础。 参考答案 可以从以下方面进行回答： 1. 项目架构 目录结构：定义项目文件和目录的组织结构，确保项目的可维护性和可扩展性。 代码规范：统一代码风格和规范，使用 ESLint、Prettier 等工具进行代码检查和格式化。 模块化：采用模块化设计，将代码拆分为独立的模块，提高可重用性和可维护性。 脚手架：自动生成项目的基础结构，包括目录结构、配置文件、示例代码等。 2. 构建工具和配置 构建工具：使用工具如 Webpack、Vite、Rollup 等进行项目的构建和打包。 配置管理：配置构建工具以支持各种功能，如代码分割、热重载、环境变量等。 优化：配置代码压缩、缓存策略、Tree Shaking 等，提升构建产物的性能和效率。 3. 开发环境 开发服务器：设置本地开发服务器，支持热重载和调试功能。 环境配置：管理开发、测试、生产环境的配置和变量。 4. 包管理 依赖管理：使用 npm、Yarn 或 pnpm 等工具管理项目依赖，确保依赖版本一致性。 发布管理：管理和发布自定义的 npm 包或组件库。 5. 自动化流程 CI/CD：配置持续集成（CI）和持续部署（CD）流程，自动化构建、测试和部署。 测试：集成单元测试、集成测试和端到端测试工具，如 Jest、Cypress 等，确保代码质量。 6. 代码质量 静态分析：使用 ESLint、TSLint 等工具进行代码静态检查。 测试覆盖率：监控测试覆盖率，确保关键代码路径被充分测试。 7. 文档 代码文档：编写和维护项目文档，包括 API 文档、开发指南和使用说明。 自动化文档生成：使用工具如 Storybook、JSDoc 等生成组件库和 API 文档。 8. 组件库 设计系统：构建和维护一套一致的设计系统和组件库，提高开发效率和界面一致性。 共享组件：创建和管理共享组件，促进代码复用。 9. 性能优化 前端性能：优化页面加载速度、响应时间和渲染性能。 网络请求：管理和优化网络请求策略，减少请求次数和数据传输量。 10. 安全 安全最佳实践：遵循前端安全最佳实践，如防范 XSS 和 CSRF 攻击。 敏感数据保护：确保敏感数据不被暴露或滥用。 4. 项目中遇到的印象最深的难题是什么？如何解决的？ 题目要点 难题背景, 影响, 解决方案, 最终结果 ...

← 已是第一轮 · 返回本次面经 · 已是最后一轮 → 本轮概述： 该轮主要考察前端基础知识、JavaScript高级特性、HTTP协议、Vue与React框架对比、Git操作以及算法实现能力。问题涵盖理论理解与实际应用，氛围较为专业。 本轮共 16 道题。答案默认折叠，便于先自行作答。 1. 如何判断一个变量是数组？ 题库原题：判断数组的方式有哪些？ 题目要点 推荐方法：使用 Array.isArray()，这是最简单、最可靠的方式来检查一个值是否为数组。 其他方法：instanceof 和 Object.prototype.toString.call() 也很有效，但有一些特定的局限性。constructor 和 isPrototypeOf() 方法不如 Array.isArray() 可靠，且在某些情况下可能会出现问题。 参考答案 判断一个值是否为数组的方式有多种： 1. Array.isArray() 方法 描述：这是 ES5 引入的标准方法，推荐用于检查一个值是否为数组。 语法：Array.isArray(value) 示例： console.log(Array.isArray([1, 2, 3])); // true console.log(Array.isArray('hello')); // false 2. instanceof 操作符 描述：使用 instanceof 操作符来判断对象是否是 Array 的实例。 语法：value instanceof Array 示例： console.log([1, 2, 3] instanceof Array); // true console.log('hello' instanceof Array); // false 3. Object.prototype.toString.call() 方法 描述：使用 Object.prototype.toString.call() 可以准确判断一个对象的类型，包括数组。它返回 [object Array] 对于数组，其他类型则返回不同的结果。 语法：Object.prototype.toString.call(value) 示例： console.log(Object.prototype.toString.call([1, 2, 3])); // [object Array] console.log(Object.prototype.toString.call('hello')); // [object String] 4. constructor 属性 描述：检查 constructor 属性是否为 Array。这种方法不如 Array.isArray() 可靠，因为 constructor 可以被改变。 语法：value.constructor === Array 示例： console.log([1, 2, 3].constructor === Array); // true console.log('hello'.constructor === Array); // false 5. Array.prototype.isPrototypeOf() 方法 描述：检查数组的 prototype 是否在目标对象的 prototype 链上。这种方法也可以用来判断一个对象是否为数组。 语法：Array.prototype.isPrototypeOf(value) 示例： console.log(Array.prototype.isPrototypeOf([1, 2, 3])); // true console.log(Array.prototype.isPrototypeOf('hello')); // false 6. 使用 constructor 属性和原型链 描述：结合 constructor 属性和原型链检查。这个方法有一定的局限性，不推荐使用。 示例： function isArray(value) { return value && typeof value === 'object' && value.constructor === Array; } console.log(isArray([1, 2, 3])); // true console.log(isArray('hello')); // false 2. 讲一下闭包及其优缺点。 题目要点 函数嵌套, 词法作用域, 内存管理 ...

← 已是第一轮 · 返回本次面经 · 已是最后一轮 → 本轮概述： 该轮主要考察前端开发相关知识，包括动画实现、性能优化、React优化、Web Accessibility、计时器处理、WebSocket、缓存策略、国际化、兼容性问题等。题目以主观题为主，注重对核心原理和实际应用场景的理解。 本轮共 18 道题。答案默认折叠，便于先自行作答。 1. 实现一个动画，当用户鼠标悬停在按钮上时，按钮逐渐变大 题目要点 CSS transition, 动画性能优化, 硬件加速, 事件监听 参考答案 在实现此类动画时，可以使用CSS的transition属性或JavaScript的requestAnimationFrame方法。重点在于控制动画的流畅性和性能。可以通过设置合适的过渡时间（transition-duration）和使用硬件加速（如transform: scale()）来提升性能。此外，注意避免不必要的重排和重绘，确保动画的平滑性。 2. 如何避免动画过程中的卡顿？ 题库原题：在解决动画卡顿问题时，会引导硬件加速，那么硬件加速的原理是什么？ 题目要点 硬件加速是指利用 GPU（图形处理单元）来执行图形和动画相关的计算任务，以减轻 CPU（中央处理单元）的负担。GPU 专为处理图形和图像的高吞吐量操作而设计，因此在执行动画和复杂图形渲染时，硬件加速可以提供更流畅的体验。 原理解析 GPU vs CPU： GPU 拥有更多的核心，适合并行处理大量计算任务，而 CPU 核心较少，更适合串行处理复杂逻辑。 图形渲染： GPU 优化了图形渲染流程，包括顶点处理、像素着色等，这些是动画和图形显示的基础。 减少重绘和回流： 通过硬件加速，可以减少浏览器的重绘（repaint）和回流（reflow）次数，这些操作通常由 DOM 变更触发，非常消耗性能。 合成层（Compositing Layer）： 浏览器使用合成层来合并多个层的图形，GPU 可以快速地在这些层上进行变换和动画。 CSS 属性触发： 某些 CSS 属性，如 transform 的 3D 变换（translate3d、scale3d 等）和 opacity 动画，可以触发硬件加速。 浏览器优化： 浏览器会根据性能和资源情况，自动决定是否使用硬件加速。 考察重点 理解：硬件加速的基本概念和 GPU 在图形渲染中的作用。 应用：知道哪些 CSS 属性可以触发硬件加速，以及如何利用它们来优化动画性能。 参考答案 面试中可能会经常会碰到怎么解决动画卡顿的问题，然后会引导到硬件加速。那么究竟什么是硬件加速，为什么它可以提高咱们的动画效率？我们今天就来一探究竟。 ...

← 已是第一轮 · 返回本次面经 · 已是最后一轮 → 本轮概述： 这场面试主要围绕前端项目的实际工程能力展开，重点考察了候选人对动态路由、权限控制和状态管理的理解与实践。 同时涉及网络请求优化、缓存机制及组件复用等中高级工程问题，体现出对项目可维护性和性能的关注。 面试还关注了候选人对 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 轮 · 返回本次面经 · 已是最后一轮 → 本轮共 13 道题。答案默认折叠，便于先自行作答。 1. 讲一下你的低代码平台架构设计 题目要点 分层架构、组件引擎、JSON Schema、热更新机制 参考答案 低代码平台采用分层架构设计：底层是组件引擎，负责组件的注册、渲染和生命周期管理；中间层是可视化编辑器，提供拖拽、属性配置和预览功能；上层是业务逻辑层，处理数据绑定、事件处理和页面路由。技术栈选择 Vue 3 + TypeScript，通过 JSON Schema 描述组件结构，使用虚拟 DOM 进行高效渲染。同时建立了组件市场和模板库，支持组件的版本管理和热更新机制。 2. 动态加载第三方组件时，如何解决样式冲突与DOM管理问题？ 题目要点 样式隔离、容器化渲染、事件总线、冲突检测 参考答案 样式隔离通过 CSS Modules 或 Shadow DOM 实现，为每个组件创建独立的样式作用域。建立样式优先级管理机制，通过 CSS 变量和主题系统统一管理全局样式。DOM管理采用容器化策略，每个第三方组件在独立的容器中渲染，通过事件总线进行通信。同时实现样式冲突检测工具，在组件加载时自动检测并解决潜在冲突。 3. 当业务需求超出平台预设组件能力时，你们是怎么扩展的 题目要点 插槽扩展、开发工具链、能力评估、贡献机制 参考答案 建立组件扩展机制，支持通过插槽（slot）和高阶组件进行功能扩展。提供自定义组件开发工具链，包括脚手架、调试工具和发布流程。实现组件能力评估系统，当检测到需求超出现有能力时，自动推荐相似组件或提供扩展建议。同时建立组件贡献机制，允许开发者提交自定义组件到组件库，经过审核后供全平台使用。 4. 组件的热更新策略是怎么处理的，在不影响用户的使用情况下 题目要点 渐进式更新、状态保持、回滚机制、用户确认 参考答案 采用渐进式热更新策略，通过版本控制和灰度发布确保更新的安全性。实现组件状态保持机制，在更新过程中保存组件的当前状态，更新完成后恢复状态。建立回滚机制，当检测到更新异常时自动回滚到稳定版本。同时提供更新通知和用户确认机制，让用户选择合适的时机进行更新，避免在关键操作时中断用户体验。 5. 组件通信机制如何设计 题目要点 多层次通信、消息路由、协议标准化、调试工具 参考答案 设计多层次的通信机制：父子组件通过 props 和 events 通信，兄弟组件通过事件总线或状态管理，跨层级组件使用 provide/inject 或全局状态。建立消息路由系统，支持组件间的异步通信和消息队列。实现通信协议标准化，定义统一的消息格式和处理流程。同时提供通信调试工具，帮助开发者追踪消息流向和排查通信问题。 6. 移动端适配是什么做的 题目要点 响应式设计、弹性布局、手势支持、性能优化 参考答案 采用响应式设计和移动优先策略，使用 rem/vw 单位实现弹性布局。建立设备适配规则库，根据屏幕尺寸和设备类型自动调整组件样式。实现触摸手势支持，优化移动端的交互体验。同时建立性能优化机制，针对移动设备的性能特点进行资源加载和渲染优化，确保在低性能设备上也能流畅运行。 ...

← 已是第一轮 · 返回本次面经 · 第 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 轮 · 返回本次面经 · 已是最后一轮 → 本轮共 9 道题。答案默认折叠，便于先自行作答。 1. 讲一下你觉得比较有亮点的项目 题目要点 技术选型合理性、渐进式迁移策略、自动化工具、性能保障 参考答案 在负责的一个大型电商平台重构项目中，面临着从传统 jQuery 架构向现代化 Vue 3 + TypeScript 架构迁移的挑战。项目的亮点在于采用了渐进式迁移策略，通过微前端架构实现新老系统的平滑过渡。设计了一套自动化的代码转换工具，将重复性的迁移工作自动化，提升了整体迁移效率 60%。同时建立了完善的性能监控体系，确保迁移过程中用户体验不受影响。 2. 项目的难点，你是怎么推动的 题目要点 风险控制、分阶段实施、灰度发布、跨团队协作 参考答案 最大的难点是在不影响线上业务的前提下完成大规模重构。通过制定详细的迁移计划，将整个项目拆分为多个独立的里程碑，每个阶段都有明确的交付物和验收标准。建立了灰度发布机制，新功能先在小范围用户中验证，逐步扩大覆盖范围。同时与产品、测试、运维团队建立了紧密的协作机制，确保各个环节的顺畅衔接。 3. 页面性能优化你做了哪些工作 题目要点 多维度优化、量化效果、监控体系、持续改进 参考答案 从多个维度进行了系统性优化：资源层面实施了代码分割和懒加载，将首屏加载时间减少 40%；网络层面启用了 HTTP/2 和资源预加载，优化了关键渲染路径；渲染层面使用了虚拟滚动和组件缓存，提升了长列表的交互性能；同时建立了性能监控体系，通过 Performance API 和用户行为分析持续跟踪优化效果。 4. 相关的指标有哪些，怎么去衡量的，标准是什么 题目要点 Core Web Vitals、RUM监控、分类基准、持续监测 参考答案 建立了完整的性能指标体系：Core Web Vitals 作为核心指标，包括 LCP（2.5s 以内）、FID（100ms 以内）、CLS（0.1 以内）；业务指标包括首屏加载时间、页面完全加载时间、接口响应时间等。通过 RUM（真实用户监控）收集线上数据，结合 Lighthouse 进行定期检测。制定了不同页面类型的性能基准，如首页 LCP 控制在 2s 内，列表页控制在 2.5s 内。 5. WebSocket 协议原理 题库原题：说下 websocket 的连接原理 ...

← 第 1 轮 · 返回本次面经 · 已是最后一轮 → 本轮共 10 道题。答案默认折叠，便于先自行作答。 1. 讲一下你的第一个项目 题目要点 突出难点与解决方案，亮点强调可扩展性与价值。 参考答案 第一个项目是一个内部管理系统，主要功能是数据可视化和表单管理。难点在于表单项类型复杂、交互逻辑多。解决方案是抽象出一套动态表单引擎，通过 JSON 配置生成组件，既降低了开发成本，也提升了可扩展性。项目的亮点在于统一了交互和样式规范，同时通过可配置化提高了可维护性。 2. 为什么选择 Vue3 + Vite 而非 React/Webpack 题目要点 Vue3 → 响应式系统和语法优势；Vite → 构建性能显著提升。 参考答案 Vue3 在响应式系统上引入了 Proxy，更适合处理复杂响应式数据，语法上对团队更友好。Vite 基于 ESBuild 和原生 ESM，构建速度远快于 Webpack，特别是在开发阶段的冷启动和热更新体验明显更优。而 Webpack 尽管生态成熟，但在开发构建效率上落后。 3. Vite 的构建速度比 Webpack 快多少 题目要点 冷启动快一个数量级，HMR 延迟极低，原因是按需编译 vs 整包构建。 参考答案 在实际项目中，冷启动通常能快 10 倍以上。例如一个中大型项目，Webpack 启动需要 20-30 秒，Vite 一般在 1-3 秒即可完成；热更新延迟也从秒级缩短到 100ms 以内。这是因为 Vite 基于原生 ESM 做按需编译，而 Webpack 是整包构建。 4. FCP 从 3.2s 降到 1.1s，具体做了哪些优化？ 题目要点 构建优化 + 资源优化 + 网络优化 + SSR 骨架屏。 ...

← 已是第一轮 · 返回本次面经 · 第 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整体策略为：深度优先，同层比较 比较只会在同层级进行, 不会跨层级比较 比较的过程中，循环从两边向中间收拢 ...