面试

← 已是第一轮 · 返回本次面经 · 第 1 轮 → 本轮要点： 基础知识面不少，进一步考察实际工程和性能优化能力 本轮共 12 道题。答案默认折叠，便于先自行作答。 1. BFC的作用及触发条件，使用场景讲一下 题目要点 CSS 样式中 BFC 的概念、特性和触发条件 BFC 应用场景：避免多列排版间隔折行问题、清除浮动、各区域形成隔离 参考答案 1.1 原理说明 BFC (Block Formatting Context)，即块级格式化上下文。它是 W3C CSS2.1 中的一类属性，是一个独立的布局环境，在该环境里，按照特定规则进行元素排列和布局。 主要特性： BFC 内部的元素不会和外部的元素受 margin 折行的影响 BFC 可以包裹内部浮动元素，解决父容器高度不拉伸问题 BFC 不会被浮动元素拉动 触发 BFC 的条件： 样式中定义此元素为 float (non-none) 正文模型 overflow 为 hidden, scroll, auto display 为 inline-block, table-cell, flex, grid, flow-root position 为 absolute 或 fixed 1.2 核心用法 + 示例代码 场景1：清除浮动 常用 BFC 包裹元素，使父元素的高度得以支撑 ...

← 已是第一轮 · 返回本次面经 · 已是最后一轮 → 本轮要点： 本次面试主要考察校招生的前端基础内容和项目经验。 本轮共 20 道题。答案默认折叠，便于先自行作答。 1. 前端学习路径 题目要点 本题为主观题，没有标准答案，主要考察候选人的学习能力、知识体系构建能力以及持续学习的动力。 面试官希望了解候选人获取新知识、解决问题的途径和习惯，以及对前端知识的理解是否系统、全面。 建议回答结构：我的前端启蒙与基础学习阶段 → 深入学习特定框架/技术 → 通过项目实践巩固与提升 → 持续学习与关注前沿技术。 参考答案 我的前端学习路径可以分为几个阶段。最初，我对互联网技术充满好奇，通过[提及学习方式，例如：慕课网上的入门课程和MDN文档]开始了前端的启蒙。在这个阶段，我扎实掌握了HTML、CSS和JavaScript这"三驾马车"的基础知识，理解了DOM操作、盒模型、BFC等核心概念。为了更好地实践，我还搭建了一些简单的静态页面和交互功能，这让我对前端有了初步的认识。 随着学习的深入，我意识到框架在大型项目开发中的重要性。我选择了[提及选择的框架，例如：React作为第一个深入学习的框架]，因为它在业界应用广泛且社区活跃。我通过[提及学习方式，例如：阅读官方文档、跟随开源项目教程，以及阅读《React设计模式与最佳实践》等书籍]，系统学习了React的组件化思想、生命周期、Hooks、状态管理（如Redux或Context API）等。为了融会贯通，我模仿并实现了一些[提及实践项目，例如：电商网站的商品详情页、用户管理后台界面]，并在其中积极实践了组件复用和性能优化。 在掌握React后，我又学习了Vue，主要是为了拓宽技术栈，了解不同框架的设计哲学。通过对比学习，我能更好地理解它们在数据响应式、模板语法、生态系统等方面的差异，这让我在技术选型时能有更全面的考量。项目实践是检验学习成果的最佳方式，我总是尝试将所学知识应用到实际项目中，例如[提及具体项目中的实践，例如：在一个数据可视化项目中，我负责了图表组件的封装和数据渲染优化，并解决了跨域请求等问题]，通过解决实际问题来加深理解和提升能力。 此外，我始终保持持续学习的习惯。我关注前端技术社区，如GitHub Trending、掘金、知乎专栏等，定期阅读技术博客和行业报告，了解最新的前端趋势和技术发展，比如[提及关注的新技术，例如：WebAssembly、微前端、Serverless等]。我认为前端技术发展迅速，只有不断学习和实践，才能保持竞争力。当遇到新的技术挑战时，我通常会先查阅官方文档，然后搜索相关的技术文章和社区讨论，如果依然无法解决，会向有经验的同事或社区前辈请教。这个过程不仅帮助我解决了问题，也锻炼了我独立思考和解决问题的能力。 2. 你提到对React和Vue都了解，对比两者的差异？在项目中如何选择？ 题目要点 框架基础掌握：确认候选人对React和Vue两大主流前端框架的核心概念、工作原理有深入理解。 异同点辨析：考察候选人能否准确对比两者在数据管理、模板语法、生态系统等方面的差异。 项目选型能力：评估候选人是否具备根据项目需求、团队情况等因素，合理选择技术栈的决策能力。 参考答案 1.1 原理说明 React和Vue都是目前主流的前端UI框架，用于构建用户界面。它们都采用了组件化的开发思想和虚拟DOM技术来提高开发效率和性能。 React： React是一个由Facebook开发的用于构建用户界面的JavaScript库。它强调"一次学习，随处编写"，以其声明式视图、组件化、以及单向数据流而闻名。React的核心是JSX（JavaScript XML），一种允许在JavaScript中编写类似HTML结构的语法，这使得UI的逻辑和视图紧密结合。React的更新机制是基于状态的变化，当组件状态更新时，React会创建一个新的虚拟DOM树，然后与旧的虚拟DOM树进行对比（diff算法），最后只更新真实DOM中发生变化的部分。 Vue： Vue是一个渐进式JavaScript框架，用于构建用户界面。它被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，易于上手，同时也方便与其他库或现有项目整合。Vue的主要特点包括双向数据绑定、基于HTML的模板语法（也可以使用JSX）、组件化以及响应式系统。Vue的响应式系统基于Object.defineProperty（Vue 2.x）或Proxy（Vue 3.x），能够追踪数据的变化并自动更新视图。 相关概念之间的联系和区别： 共同点： 组件化： 两者都提倡组件化开发，将UI拆分为独立的、可复用的组件。 虚拟DOM： 都使用虚拟DOM来提高性能，减少直接操作真实DOM的开销。 响应式： 都提供了响应式的数据绑定机制，数据变化时视图自动更新。 生态系统： 都拥有庞大且活跃的社区，提供丰富的工具、库和插件。 区别： 数据流： React推崇单向数据流（从父组件到子组件），而Vue支持双向数据绑定（v-model），使得表单处理等场景更为便捷。 模板语法： React倾向于使用JSX，将HTML和JS逻辑写在一起；Vue默认使用基于HTML的模板语法，通过指令（如v-if, v-for）增强HTML功能，也可以选择使用JSX或渲染函数。 状态管理： React通常结合Redux或Context API进行状态管理；Vue有官方的Vuex。两者都有各自的解决方案来管理复杂应用的状态。 学习曲线： 通常认为Vue的学习曲线相对平缓，对前端新手更友好；React由于其JSX和函数式编程的理念，可能需要一定的学习成本。 性能优化： Vue的响应式系统在很多情况下能自动进行细粒度的更新，减少开发者手动优化的工作；React的性能优化则更多依赖于shouldComponentUpdate、React.memo等手动优化手段。 1.2 核心用法 + 示例代码（如题目涉及） 由于题目是对比差异和选择，这里主要通过对比说明其在项目中的选择场景： ...

← 已是第一轮 · 返回本次面经 · 已是最后一轮 → 本轮概述： 中级偏上难度，适合有扎实基础和一定项目经验的应届生。既考察理论知识的深度，也注重实践能力的广度，需要候选人具备较强的学习能力和技术整合能力。 本轮要点： ### 考察范围 这轮校招面试主要考察四个维度： 个人经历和项目实战：通过学习经历、项目搭建、协作经验考察实际开发能力 移动端和多端开发：小程序开发、多端适配、移动端优化等实用技能 前端基础知识：JavaScript核心概念、Vue框架原理、浏览器工作机制等 工程化和架构思维：打包工具、插件开发、系统设计等高级能力 重点准备知识点 项目经验的系统性总结和技术亮点提炼 小程序开发框架和多端适配方案 JavaScript作用域、变量提升等核心机制 Vue组件通信、生命周期、插槽等框架特性 前端性能优化和工程化实践 实时通讯和AI集成的技术方案 本轮共 25 道题。答案默认折叠，便于先自行作答。 1. 介绍自己的学习和实习经历 题目要点 学习路径：从基础到框架的系统性学习过程 实习经验：具体项目和技术栈的实践应用 协作能力：与团队成员的配合和沟通经验 技术深度：不仅会用还要理解原理的学习态度 参考答案 在学习经历方面，计算机科学专业背景为前端开发奠定了扎实的理论基础。大学期间系统学习了数据结构、算法、计算机网络等核心课程，这些知识在后续的前端开发中发挥了重要作用。 前端技术的学习路径比较系统，从HTML、CSS、JavaScript基础开始，逐步深入到现代前端框架。先掌握了Vue.js的基本用法，然后学习了React和小程序开发。在学习过程中特别注重实践，每学习一个新技术都会通过项目来巩固理解。 实习经历主要集中在两个阶段。第一次实习主要负责公司官网的维护和功能迭代，使用Vue.js技术栈，参与了从需求分析到上线部署的完整流程。这个过程中学会了如何与产品经理、设计师协作，也了解了企业级项目的开发规范。 第二次实习参与了一个移动端项目的开发，使用uni-app框架实现多端适配。在这个项目中主要负责用户中心模块的开发，包括登录注册、个人信息管理、订单查询等功能。通过这次实习深入了解了移动端开发的特点和挑战。 在学习和实习过程中，特别注重技术深度的挖掘。不仅学会了如何使用各种技术，更重要的是理解了技术背后的原理。比如学习Vue时，会去了解响应式系统的实现机制；学习webpack时，会研究打包优化的各种策略。 2. 讲一下你的项目搭建过程，用到了哪个脚手架，有没有做其他工作？ 题目要点 脚手架选择：Vue CLI vs Vite的适用场景和特点 配置定制：代码规范、构建优化、环境管理 开发规范：团队协作的标准化流程 工程化实践：组件库、测试、部署等完整流程 参考答案 项目搭建通常会根据具体需求选择合适的脚手架工具。对于Vue项目，主要使用Vue CLI和Vite两种方案。Vue CLI适合需要复杂配置的企业级项目，提供了完整的插件生态和配置选项。Vite则适合快速开发，启动速度更快，热更新体验更好。 具体的搭建流程包括几个关键步骤。首先是技术栈选择，根据项目需求确定使用的框架、UI库、状态管理方案等。然后使用脚手架创建基础项目结构，配置开发环境和构建流程。 在基础搭建完成后，会进行一系列的定制化配置。包括配置ESLint和Prettier确保代码质量，设置路由和状态管理的基础结构，配置axios拦截器处理API请求，设置环境变量管理不同环境的配置。 还会建立项目的开发规范，包括目录结构规范、组件命名规范、Git提交规范等。这些规范对于团队协作非常重要，能够保证代码的一致性和可维护性。 在构建优化方面，会配置代码分割、压缩、缓存等策略。对于生产环境，还会配置CDN、Gzip压缩、性能监控等。这些配置虽然不是核心业务逻辑，但对项目的性能和稳定性有重要影响。 除了技术层面的工作，还会考虑项目的可持续发展。比如建立组件库，提取公共组件和工具函数；配置自动化测试，保证代码质量；建立CI/CD流程，实现自动化部署。 3. 讲一下你在学校参与的协作项目 题目要点 项目背景：技术栈选择和架构设计 个人职责：具体负责的模块和功能实现 协作流程：Git管理、代码审查、敏捷开发 问题解决：接口对接、代码规范等实际挑战 参考答案 在学校期间参与了一个在线学习平台的开发项目，这是一个5人团队的协作项目，持续了一个学期。项目采用前后端分离的架构，前端使用Vue.js，后端使用Node.js。 在项目中主要负责用户管理和课程展示模块的开发。用户管理包括注册登录、个人信息维护、学习进度跟踪等功能。课程展示模块需要支持视频播放、课件下载、评论互动等复杂功能。 团队协作方面，使用Git进行版本控制，建立了完整的分支管理策略。主分支用于生产环境，开发分支用于功能集成，每个人都有自己的特性分支。通过Pull Request的方式进行代码审查，确保代码质量。 项目管理使用敏捷开发方法，每周进行一次迭代规划，每天有简短的站会同步进度。使用Trello进行任务管理，每个功能都有明确的负责人和完成时间。 ...

← 已是第一轮 · 返回本次面经 · 已是最后一轮 → 本轮概述： 中高级难度。既有基础概念的深度考察，也有复杂业务场景的解决方案设计，对于校招同学有一定的挑战。 本轮要点： ### 考察范围 这轮面试主要考察三个维度： 项目实战能力：通过虚拟列表、Token管理等具体技术方案考察解决复杂业务问题的能力 前端基础功底：涵盖浏览器原理、JavaScript核心机制、CSS布局、性能优化等核心知识 计算机基础：通过算法题考察数据结构和算法基础 重点准备知识点 虚拟列表等性能优化方案的深度理解和实践经验 HTTP协议、浏览器工作原理、缓存机制等网络基础 JavaScript事件循环、闭包、原型链等语言核心特性 Vue/React框架原理，特别是响应式系统和虚拟DOM CSS布局方案和BFC等核心概念 前端工程化和性能优化实践 基础算法和数据结构 建议 深入理解前端核心概念，不仅知其然还要知其所以然 积累实际项目经验，特别是性能优化和复杂业务场景的解决方案 保持对新技术的敏感度，了解技术发展趋势 加强计算机基础，算法和数据结构是技术能力的重要体现 培养系统性思维，能够从多个角度分析和解决问题 本轮共 20 道题。答案默认折叠，便于先自行作答。 1. 请讲一下你项目中的的虚拟列表，包括实现原理、优化过程以及如何设置缓冲区？ 题目要点 核心原理：只渲染可视区域，动态计算显示范围 关键技术：滚动监听、索引计算、位置缓存 优化重点：动态高度处理、缓冲区设置、滚动性能 实际考虑：内存占用与性能平衡 参考答案 虚拟列表是解决大数据量列表渲染性能问题的核心方案。其实现原理基于"只渲染可视区域"的思想。 具体实现上，首先需要确定容器的可视高度和每个列表项的高度。通过监听滚动事件，实时计算当前滚动位置对应的起始索引和结束索引。核心公式是：起始索引 = Math.floor(scrollTop / itemHeight)，结束索引 = 起始索引 + Math.ceil(containerHeight / itemHeight)。 在优化过程中遇到的主要挑战是处理动态高度的列表项。解决方案是维护一个位置缓存数组，记录每个列表项的实际高度和累计偏移量。当列表项高度发生变化时，需要更新缓存并重新计算后续项的位置。 缓冲区设置是性能优化的关键。通常在可视区域前后各增加5-10个列表项作为缓冲，具体数量需要根据列表项的复杂度和渲染耗时来调整。缓冲区过小会导致快速滚动时出现白屏，过大则会增加内存占用和渲染负担。 对于滚动性能优化，还需要结合防抖节流、requestAnimationFrame等技术，确保滚动的流畅性。 2. 在虚拟列表中，如何结合防抖和节流技术优化性能？ 题目要点 节流应用：滚动事件实时响应，保证连续性操作的流畅度 防抖应用：计算密集操作、数据预加载等非实时场景 组合策略：根据不同操作特性选择合适的优化方案 参数调优：时间间隔需要平衡性能和用户体验 参考答案 在虚拟列表的性能优化中，防抖和节流扮演着不同但互补的角色。 对于滚动事件本身，节流是更合适的选择。因为滚动是连续性操作，用户期望得到实时反馈，而不是等待操作结束后才响应。通常设置16-33ms的节流间隔，对应60-30fps的更新频率，既保证了流畅度又避免了过度计算。 防抖则主要用于一些计算密集型的操作。比如当滚动停止后，可能需要进行数据预加载、图片懒加载等操作，这些可以使用防抖来避免频繁触发。另外，对于搜索框结合虚拟列表的场景，搜索关键词的处理也适合使用防抖。 在实际实现中，还需要考虑组合使用的场景。比如可以对滚动事件使用节流进行实时响应，同时对复杂的重新计算逻辑使用防抖进行优化。这样既保证了用户体验，又避免了不必要的性能消耗。 需要注意的是，节流和防抖的时间设置需要根据具体业务场景调整，过短可能达不到优化效果，过长则会影响用户体验。 3. 如何使用 requestAnimationFrame 优化虚拟列表的滚动性能？ 题目要点 核心优势：与浏览器重绘周期同步，避免无效渲染 应用场景：DOM更新调度、动画优化、时间切片 性能提升：减少重排重绘、合并多次操作、避免掉帧 注意事项：刷新率适配、兼容性考虑 参考答案 requestAnimationFrame是浏览器提供的专门用于动画优化的API，它能够确保回调函数在浏览器下一次重绘之前执行，这对虚拟列表的滚动性能优化具有重要意义。 ...

← 已是第一轮 · 返回本次面经 · 已是最后一轮 → 本轮要点： 主要几种在以下几个方向： vue3原理 前端工程化：webpack、vite、pnpm、monorepo 前端安全 计算机网络 本轮共 21 道题。答案默认折叠，便于先自行作答。 1. JSON数组扁平化&数据过滤 假设有一个模拟接口 fetchData()，返回 Promise 对象，数据格式为： { "data": [ { "id": 1, "value": 5 }, { "id": 2, "value": 10, "children": [ { "id": 3, "value": 8 } ] } ] } 要求： 将接口返回的嵌套数据结构扁平化为一维数组； 筛选出 value 大于等于 8 的元素； 按 id 升序排列后，渲染为 <ul> 列表。 示例输出： <ul> <li>id:2, value:10</li> <li>id:3, value:8</li> </ul> 题目要点 递归与数据结构处理：考查候选人是否理解如何处理嵌套结构。 数组操作基础：filter/sort/map 等高阶方法掌握情况。 异步处理能力：是否熟悉 Promise 的使用。 原生 DOM 操作：不用框架的情况下渲染 HTML。 参考答案 1.1 原理说明 此题本质是一个数据处理与 DOM 渲染综合题，目标包括： ...

← 第 1 轮 · 返回本次面经 · 已是最后一轮 → 本轮要点： 本次面试主要考察候选人的项目经验、技术深度与广度，以及解决实际问题的能力和算法基础。 本轮共 16 道题。答案默认折叠，便于先自行作答。 1. 介绍一下实习项目的业务背景 题目要点 ● 该题是主观型问题，不设"唯一标准答案"。 ● 面试官主要考察答题者能否清晰、有条理地阐述复杂业务，并展现其系统性思考和沟通表达能力。 ● 建议的答题结构是：首先概述项目所属行业与核心痛点，接着阐述项目目标与解决方案，最后简要提及项目成果及个人职责。 参考答案 高质量参考范文： 我之前在一家电商公司实习，主要负责一个名为"智能商品推荐系统"的项目。该项目的业务背景是，随着电商平台商品数量的激增，用户在海量商品中找到心仪商品变得越来越困难，导致用户体验下降，同时也影响了平台的转化率和GMV。为了解决这一痛点，我们团队着手开发智能推荐系统，旨在通过算法分析用户的行为数据（如浏览历史、购买记录、搜索偏好等），结合商品自身的属性，为用户提供个性化、精准的商品推荐，从而提升用户的购物效率和满意度。 在这个项目中，我的主要职责是负责推荐结果的前端展示和交互优化。具体来说，我参与了推荐模块的UI设计与实现，确保推荐流的加载流畅性，并针对不同场景（如首页推荐、详情页关联推荐、购物车推荐等）进行了布局和样式的适配。此外，我还负责埋点方案的实施，以便后续对推荐效果进行数据分析和A/B测试。通过这个项目，我们发现精准推荐能够显著提高用户的点击率和转化率，帮助平台更好地匹配用户需求与商品供给，最终促进了业务增长。 2. 假如你是一个项目的负责人，面对一个新需求你会如何判断以及决策？ 题目要点 ● 该题是主观型问题，不设"唯一标准答案"。 ● 面试官主要考察答题者在项目管理、需求分析、风险评估和决策制定方面的系统性思维和实践能力。 ● 建议的答题结构是：首先明确需求分析的步骤，接着说明决策制定的考量因素，最后强调风险管理与团队协作。 参考答案 高质量参考范文： 作为项目的负责人，面对新需求时，我会采取一个结构化的判断和决策流程。首先，我会进行深入的需求分析和理解。这包括与产品经理、业务方进行充分沟通，明确需求的来源、业务目标、用户价值和预期效果，同时也会收集用户反馈和市场数据进行辅助验证，确保我们对需求有全面的认知，而不是停留在表面。我会问自己几个关键问题：这个需求解决什么问题？能带来多大的业务价值？目标用户是谁？ 其次，我会进行可行性评估和方案设计。从技术角度，我会组织技术团队评估实现方案的技术难度、所需资源（人力、时间、技术栈）、潜在风险以及对现有系统的影响。同时，我也会考虑多种技术方案，并对比它们的优劣，力求选择一个既能满足需求又具备良好扩展性和维护性的方案。在这个阶段，我会与团队成员进行充分讨论，集思广益。 接着是优先级排序和决策制定。在资源有限的情况下，我会根据需求的业务价值、技术复杂度、风险高低以及与其他需求的关联性进行综合评估，制定优先级。我会与产品、运营等相关方进行协商，达成一致的优先级共识，并最终确定新需求的上线计划和资源投入。例如，我们会将需求划分为"必须有"、“应该有”、“可以有"等层级，确保核心价值的优先实现。在整个过程中，我会持续关注风险管理，提前识别潜在的技术或业务风险，并制定相应的预案，确保项目能够顺利推进。 3. 功能上线后如何判断这个功能上线前后的影响和优化有多少呢？ 题目要点 ● 该题是主观型问题，不设"唯一标准答案”。 ● 面试官主要考察答题者对数据分析、效果评估、用户反馈和持续优化闭环的理解与实践能力。 ● 建议的答题结构是：首先说明数据指标的定义与埋点，接着阐述A/B测试的重要性，最后强调用户反馈收集和持续迭代。 参考答案 高质量参考范文： 功能上线后，为了准确判断其影响和优化效果，我通常会从几个维度进行综合评估。首先是数据指标的监控与分析。在功能设计阶段，我们就会明确核心的业务指标（如点击率、转化率、留存率、DAU/MAU等）和技术指标（如页面加载速度、接口响应时间等）。功能上线前，我们会确保所有相关的用户行为和系统性能都有完善的埋点方案。上线后，通过数据分析平台（如GA、神策、友盟等）持续追踪这些指标的变化趋势。对比功能上线前后的数据，可以直观地量化功能带来的影响。 其次，A/B测试是评估功能影响最科学的方法之一。如果条件允许，我们会将新功能通过A/B测试的方式灰度上线，将用户分成对照组和实验组。对照组用户使用旧功能，实验组用户使用新功能。通过对比两组用户的核心指标数据，可以排除其他干扰因素，更准确地评估新功能带来的实际增益或负面影响。这能帮助我们判断新功能是否达到了预期目标，或者是否需要进一步优化。 最后，用户反馈的收集与分析也至关重要。我们会通过多种渠道收集用户对新功能的反馈，包括用户调研问卷、用户访谈、线上评论、客服反馈等。这些定性数据可以帮助我们理解用户在使用过程中遇到的具体问题、痛点以及他们的真实感受，从而发现数据指标无法揭示的深层问题。我们会定期复盘这些反馈，结合数据分析的结果，识别功能潜在的优化点，并将其纳入后续的产品迭代计划中，形成一个持续优化、不断提升用户体验的闭环。 4. 有去了解过用户反馈最多的问题或者诉求最强的问题是什么吗？ 题目要点 ● 该题是主观型问题，不设"唯一标准答案"。 ● 面试官出这道题主要想确认哪些知识维度？ ● 考察候选人是否关注用户、理解用户痛点，并具备从用户角度思考问题的能力。 ● 评估候选人是否具备主动发现问题并寻求解决方案的意识。 ● 该题所考知识点中有哪些高频实际应用点？ ● 用户研究与用户画像分析 ● 竞品分析与行业趋势洞察 ● 用户体验（UX）与产品优化 ...

← 第 1 轮 · 返回本次面经 · 第 1 轮 → 本轮要点： 本次面试主要考察前端基础知识、项目经验和算法能力。 本轮共 12 道题。答案默认折叠，便于先自行作答。 1. 简单介绍一下你上一段实习中觉得做的比较好的项目 题目要点 ● 主观型问题，无唯一标准答案。 ● 面试官主要考察你的项目理解深度、技术选型能力、问题解决能力、以及对项目成果的复盘与表达能力。 ● 建议的答题结构：首先简要介绍项目背景和你的角色；接着详细阐述你在项目中负责的具体工作、遇到的挑战及如何解决；最后总结项目成果和你的收获。 参考答案 我在XX公司实习期间，参与了一个内部运营效率工具的开发，其中我主导了"智能数据报表系统"的前端部分，这个项目我个人觉得做得比较好。项目背景是，之前的运营数据统计完全依赖人工手动导出和整理，效率低下且易出错。我们团队的目标是构建一个自动化、可视化的报表系统，让运营人员能够实时查看核心数据指标。 我主要负责报表的可视化组件开发和数据交互逻辑。在技术选型上，我没有简单地套用现有图表库，而是深入调研了业务需求，最终选择了ECharts进行定制化开发，因为它的灵活性和丰富图表类型能很好地满足我们多样化的报表展示需求。开发过程中最大的挑战是如何处理海量数据在前端的渲染性能问题。初期我们尝试直接加载全部数据，导致页面卡顿严重。我查阅资料并与后端协商，最终采用了数据分批加载和前端数据虚拟化的方案，即只加载当前视图所需数据，并对表格和图表进行局部渲染。这不仅大幅提升了页面响应速度，也降低了后端的数据传输压力。 另一个亮点是，我设计并实现了一个可配置的报表生成器。运营人员可以通过拖拽组件、配置数据源和筛选条件，自定义生成各种报表，极大地提高了他们的工作效率，也减少了开发人员的维护成本。在项目上线后，我通过用户反馈持续迭代，例如增加了数据导出功能、优化了图表联动效果，使得系统更加完善。这个项目让我深刻体会到了前端工程化和性能优化的重要性，也锻炼了我从需求分析到方案设计、再到具体实现和持续优化的全链路项目能力。 2. 想知道你们的项目大概是什么样的结构，你在开发的时候会从什么地方下手？ 题目要点 ● 主观型问题，无唯一标准答案。 ● 面试官主要考察你对项目整体架构的理解、系统性思维、以及实际开发流程的把控能力。 ● 建议的答题结构：首先概述项目采用的架构模式（如微前端、Monorepo、单体应用等）；接着描述核心模块的划分和技术栈；然后详细说明当你接到一个开发任务时，会从哪些方面着手分析和实现；最后可以提及一些你在开发流程中的最佳实践或思考。 参考答案 我们团队负责的XX系统，其整体架构是一个典型的微前端应用。具体来说，我们采用了基于qiankun的微前端方案，将整个系统拆分为多个独立的子应用，例如用户管理、订单中心、数据分析等。每个子应用都可以独立开发、独立部署，但在主应用中进行集成和路由管理。这样的好处是，团队成员可以专注于各自的子应用开发，降低了耦合度，也便于技术栈的演进和模块的复用。 当我接到一个开发任务时，通常会遵循以下步骤： 首先是需求分析和理解。我会仔细阅读需求文档，明确用户故事和业务目标，如果存在不清晰的地方，会主动与产品经理或设计师沟通，确保我对需求的理解是准确和全面的。这一步至关重要，它决定了后续开发的方向。 其次是技术方案设计。我会根据需求，结合当前项目的架构和技术栈，思考实现方案。这包括：是否需要新增组件或模块？数据流如何设计？接口如何定义？是否涉及到性能优化或兼容性问题？例如，如果是一个新功能模块，我会考虑其在微前端架构下的集成方式，以及与主应用之间的通信机制。如果涉及复杂的数据处理，我会优先考虑数据在前端的缓存策略，以及如何减少不必要的渲染。 接着是代码实现。我会根据设计好的方案，开始编写代码。我会严格遵循团队的代码规范和组件化原则，确保代码的可读性和可维护性。在实现过程中，我会注重模块的拆分和函数的封装，避免出现冗余代码。 在开发过程中，我非常重视自测和调试。我会编写单元测试和集成测试，确保自己实现的功能符合预期。如果遇到问题，会利用浏览器开发工具进行调试，分析问题原因并及时解决。此外，我也会关注代码的性能，例如使用Chrome DevTools进行性能分析，寻找优化点。 最后是代码评审和部署。在完成开发和自测后，我会提交代码进行代码评审，听取团队成员的建议，并对代码进行优化。通过评审后，会按照CI/CD流程进行部署，并在部署后关注线上监控，确保功能稳定运行。 这种结构化的开发流程，使得我在面对复杂任务时能够有条不紊地进行，并能及时发现和解决问题，保障了项目的开发质量和效率。 3. IntersectionObserver的事件回调是宏任务还是微任务？如何判断呢？ 题目要点 ● JavaScript 事件循环机制：考察对宏任务和微任务的理解，以及它们在事件循环中的执行顺序。 ● 浏览器 API 原理：考察对 IntersectionObserver 这一 Web API 的底层工作原理的掌握，特别是其回调函数的执行时机。 ● 实际应用与判断：考察如何在实际开发中判断异步操作的类型，并理解其对程序性能和行为的影响。 参考答案 1.1 原理说明 IntersectionObserver 的事件回调是微任务。 宏任务 (MacroTask)：包括 script (整体代码)、setTimeout、setInterval、setImmediate (Node.js 独有)、I/O、UI 渲染等。每次事件循环只会执行一个宏任务，执行完后会检查微任务队列。 微任务 (MicroTask)：包括 Promise.then()/.catch()/.finally()、MutationObserver、process.nextTick (Node.js 独有)、queueMicrotask。微任务在当前宏任务执行完毕后，下一个宏任务开始之前执行，且会清空所有微任务。 IntersectionObserver 的回调函数被设计为微任务，是为了保证在当前帧的 DOM 更新完成之后、但浏览器渲染之前执行。这样可以确保在回调函数中进行的 DOM 操作能够及时反映在当前帧的渲染中，避免了不必要的布局抖动或视觉闪烁。 ...

← 已是第一轮 · 返回本次面经 · 第 1 轮 → 本轮要点： 本次面试主要考察前端基础知识和工程化实践 本轮共 19 道题。答案默认折叠，便于先自行作答。 1. 介绍一下简历中的组件库项目 题目要点 非唯一标准答案：本题是主观型问题，没有唯一的标准答案，主要考察面试者的综合能力。 考察能力：面试官主要考察您的表达能力、对项目背景和技术细节的理解、解决问题的思路系统性，以及项目复盘和总结的能力。 答题结构建议：建议从项目背景和目的、技术选型与核心功能、遇到的挑战与解决方案、个人贡献与收获等方面展开阐述，力求条理清晰、重点突出。 参考答案 高质量参考范文： 在我的简历中，我提到了一个组件库项目，这个项目是我在实习期间为了统一团队UI规范，提升开发效率而主导或参与开发的。我们的目标是构建一套覆盖常用UI组件（如按钮、输入框、弹窗、表格等）的跨框架（或特定框架如Vue/React）的组件库，以满足业务快速迭代的需求，并保证产品界面的一致性。 在技术选型上，我们选择了Vue 3 + TypeScript + Vite + Sass Modules作为核心技术栈。Vue 3 的 Composition API 帮助我们更好地组织组件逻辑，提升了组件的复用性和可维护性；TypeScript则保证了代码的类型安全，尤其是在大型项目协作中大大减少了潜在的类型错误。Vite作为构建工具，极大地提升了开发服务器的启动速度和热更新效率。在样式方面，我们采用了Sass Modules，确保了组件样式的局部作用域，避免了全局污染，同时通过Sass的变量和混入特性，提升了样式代码的可维护性。 在核心功能实现上，我们关注了组件的通用性和可配置性。例如，在实现一个Select组件时，我们不仅考虑了基本选择功能，还加入了搜索过滤、多选、自定义渲染模板、异步加载选项等高级特性。每个组件都经过了详细的API设计和文档编写，确保其他开发者能够快速上手和正确使用。我们还集成了单元测试和端到端测试，以保证组件的质量和稳定性。 在项目过程中，我们也遇到了一些挑战。例如，如何设计一套灵活的主题机制，使得组件库能够轻松适应不同业务线的品牌风格，我们最终通过CSS Variables和一套主题生成工具解决了这个问题。另一个挑战是性能优化，特别是大型组件（如虚拟列表的表格）的渲染性能，我们通过按需加载、虚拟滚动等技术手段，确保了组件在处理大量数据时依然保持流畅。 通过这个组件库项目，我不仅深入理解了前端组件化开发的最佳实践，也锻炼了我在项目规划、技术选型、问题解决和团队协作方面的能力。我觉得最大的收获是，看到自己开发的组件被其他业务方广泛使用，并有效提升了他们的开发效率时，那种成就感是非常大的。这个项目也让我对前端工程化有了更深刻的理解，认识到标准化、自动化和高质量交付对于前端开发的重要性。 2. vite 和 webpack 有什么区别？ 题目要点 构建工具的理解：面试官希望了解面试者对前端构建工具的整体认知，包括它们在前端开发流程中的作用和重要性。 Vite与Webpack的核心差异：考察面试者是否能清晰阐述两者在开发模式（Dev Server）和生产模式（Build）上的根本性区别，特别是它们处理模块依赖和启动开发服务器的方式。 性能优化：面试官想确认面试者是否能从性能角度分析两者的优劣，特别是Vite如何利用ESM（ECMAScript Modules）和原生浏览器支持实现快速的开发体验。 技术趋势：考察面试者是否关注前端生态的新技术发展，并能理解新技术带来的优势和对现有工具的影响。 参考答案 1.1 原理说明 Webpack： Webpack 是一个模块打包器。在开发模式下，Webpack 会将整个应用的所有模块（JavaScript、CSS、图片等）打包成浏览器可以识别的静态资源。在启动开发服务器之前，它需要完成整个打包过程。当代码发生修改时，Webpack 会重新编译并生成新的打包文件，然后通过热模块替换（HMR）机制将更新注入到浏览器中。 Vite： Vite 是一种基于浏览器原生 ES Modules 的构建工具。在开发模式下，Vite 不会预先打包整个应用。它利用浏览器对 ES Modules 的原生支持，当浏览器请求某个模块时，Vite 会即时地对该模块进行转换（例如处理 TypeScript、Vue/React 单文件组件等），然后直接提供给浏览器。这极大地减少了开发服务器的启动时间和热更新的时间。 核心区别与联系： 开发模式启动速度：Webpack 需要先打包再启动服务，随着项目规模增大，打包时间会显著增加。Vite 则利用浏览器原生 ES Modules 按需加载，实现了"冷启动"的秒开。 热更新（HMR）机制：Webpack 的热更新通常需要重新编译被修改的模块及其依赖链。Vite 的热更新同样基于 ES Modules，当一个模块被修改时，Vite 只需要精确地替换该模块及其直接相关的部分，更新速度更快，因为不需要重新构建整个依赖图。 生产环境构建：尽管开发模式下两者原理不同，但在生产环境构建时，Vite 内部仍然会使用 Rollup 进行打包，类似于 Webpack 的打包输出，以获得最佳的兼容性和性能优化（例如代码分割、Tree-shaking 等）。这意味着 Vite 在生产构建阶段也进行打包，并非完全无打包。 底层技术：Webpack 依赖于自己的模块解析和打包机制，而 Vite 则深度依赖于浏览器原生的 ES Modules 特性。 为什么会出现 Vite：随着前端项目日益庞大，基于打包器的开发服务器在冷启动和热更新方面的性能瓶颈日益凸显。Vite 的出现正是为了解决这一痛点，通过利用浏览器原生能力，显著提升开发效率和体验。 1.2 核心用法 + 使用场景 Vite 的优势使用场景： 大型项目开发：对于拥有大量模块和复杂依赖的项目，Vite 的即时按需编译能够显著缩短开发服务器的启动时间和热更新响应时间，提升开发效率。 追求极致开发体验：如果你希望在开发过程中获得近乎瞬时的代码修改反馈，Vite 是一个理想的选择。 新建项目：对于新项目，Vite 提供了更现代、更快速的开发起点。 Webpack 的优势使用场景： 老旧项目或复杂构建需求：对于历史项目，或需要高度定制化构建流程（例如微前端、特殊资源处理）的项目，Webpack 成熟的生态系统和灵活的配置依然是其优势。 对浏览器兼容性有极高要求：Webpack 拥有更广泛的浏览器兼容性处理能力，可以通过各种 Loader 和 Plugin 支持老旧浏览器特性。 核心用法体现： 无论是 Vite 还是 Webpack，它们的核心目标都是为了提供更好的开发体验和生产环境下的代码优化。Vite 通过"开发阶段无打包"的理念解决了传统打包器的性能痛点，而 Webpack 则以其强大的生态和高度可配置性，满足了各种复杂的构建需求。开发者在项目中选择使用哪种工具，通常取决于项目规模、团队熟悉度、对开发效率和生产环境性能的权衡。 1.3 常见误区或面试陷阱 误区一：Vite 在生产环境也是无打包的。 这是一个常见的误解。Vite 在开发环境利用原生 ESM 实现按需加载，确实没有预打包的步骤。但为了在生产环境中获得最佳的性能和兼容性（例如代码压缩、Tree-shaking、兼容性处理等），Vite 仍然会使用 Rollup 进行打包。面试时如果直接说 Vite 生产环境也无打包，会暴露对 Vite 工作原理理解不深。 误区二：Vite 能够完全替代 Webpack。 尽管 Vite 在许多方面表现出色，尤其是在开发体验上，但它并不能在所有场景下完全替代 Webpack。Webpack 的生态系统更加庞大和成熟，拥有更多针对特定场景的 Loader 和 Plugin，其配置灵活性也更高。例如，一些复杂的构建需求、特定的兼容性要求或集成旧技术栈时，Webpack 可能会是更稳健的选择。 误区三：只强调速度快，不深入原理。 面试官更希望听到你对 Vite 和 Webpack 底层原理的理解，而不仅仅是停留在"Vite 比 Webpack 快"的表层认知。理解它们在模块处理、HMR 实现、构建流程上的差异，并能结合实际场景分析各自的优劣，才能体现出更深入的理解。 误区四：混淆"打包"和"编译/转换"。 Vite 在开发模式下不是"打包"，而是对单个文件进行"编译/转换"以适应浏览器。而 Webpack 则是在启动服务前进行完整的"打包"过程。清晰区分这两个概念很重要。 3. vite 打包可能会有什么问题呢？需要怎么处理？ 题目要点 Vite 生产环境构建的理解：考察面试者是否清楚 Vite 在开发和生产环境的不同工作机制，特别是它在生产环境如何进行打包。 常见打包问题及解决方案：面试官想了解面试者是否遇到过 Vite 打包过程中可能出现的问题，以及如何诊断和解决这些问题，体现解决实际问题的能力。 Rollup 配置的掌握：由于 Vite 生产环境依赖 Rollup，面试官会关注面试者是否了解如何通过配置 Rollup 来解决特定的打包问题。 性能优化与兼容性：考察面试者在打包层面如何考虑应用的性能和浏览器兼容性，以及如何通过打包工具进行优化。 参考答案 1.1 原理说明 尽管 Vite 在开发模式下以其"无打包"的理念提供极速体验，但在生产环境，它仍然需要对代码进行打包，以实现最佳的性能优化和兼容性。Vite 内部使用 Rollup 作为其生产环境的打包工具。Rollup 的优势在于其高效的 Tree-shaking（清除未使用的代码）和生成优化过的 ES Modules 捆绑包。因此，Vite 打包时可能遇到的问题，很多时候是与 Rollup 的打包特性、插件机制以及项目本身的特定需求相关的。 ...

← 已是第一轮 · 返回本次面经 · 第 1 轮 → 本轮要点： 本次面试主要考察校招生的基础内容 本轮共 21 道题。答案默认折叠，便于先自行作答。 1. 数组排序：实现一个函数，对包含数字和字符串的混合数组进行排序，数字在前按升序，字符串在后按字母顺序。 题目要点 JavaScript算法。 参考答案 function sortMixedArray(arr) { return arr.sort((a, b) => { const typeA = typeof a; const typeB = typeof b; if (typeA !== typeB) { return typeA === 'number' ? -1 : 1; } if (typeA === 'number') { return a - b; } else { return a.localeCompare(b); } }); } 2. 发布订阅模式：实现一个简单的EventEmitter类，包含on, emit, off方法。 题目要点 JavaScript设计模式。 参考答案 class EventEmitter { constructor() { this.events = {}; } on(event, callback) { if (!this.events[event]) { this.events[event] = []; } this.events[event].push(callback); } emit(event, ...args) { if (this.events[event]) { this.events[event].forEach(callback => { callback(...args); }); } } off(event, callback) { if (this.events[event]) { this.events[event] = this.events[event].filter(cb => cb !== callback); } } } 3. lodash.get实现：实现一个类似lodash.get的函数，安全地获取嵌套对象属性。 题目要点 JavaScript对象操作。 ...

← 第 1 轮 · 返回本次面经 · 已是最后一轮 → 本轮要点： 本次面试主要考察校招生的基础内容 本轮共 15 道题。答案默认折叠，便于先自行作答。 1. 自我介绍 题目要点 自我认知。 参考答案 您好！我是一名对前端开发充满热情的工程师，拥有[X]年的开发经验。我熟练掌握HTML、CSS和JavaScript等前端技术，并在多个项目中运用Vue、React等框架构建用户友好的应用。在大学期间，我主修计算机科学，这为我打下了坚实的编程基础。通过参与各类项目，我不仅提升了技术能力，还培养了良好的团队协作和问题解决能力。我热爱学习新技术，经常阅读技术博客并参与开源项目。在之前的实习和工作中，我积累了丰富的实战经验，能够独立完成项目开发并优化性能。我期待能在贵公司继续我的前端开发之旅，为团队贡献我的技能和热情。 2. 什么时候开始接触前端？ 题目要点 学习经历。 参考答案 我是在大学二年级的时候开始接触前端开发的。当时，我选修了一门网页设计与开发的课程，这让我对前端开发产生了浓厚的兴趣。从那时起，我便开始系统地学习HTML、CSS和JavaScript等前端技术，并通过大量的实践项目不断提升自己的技能。毕业后，我继续深入学习前端框架和工具，如Vue、React等，并在实际工作中不断积累经验。 3. 复杂度比较高的项目有哪些 题目要点 项目经验。 参考答案 我参与过一个大型电商平台的前端开发，该项目的复杂度较高，主要体现在以下几个方面： 1. 技术栈丰富：项目中使用了Vue.js、Vuex、Vue Router、Vite、TypeScript等技术，结合了 Vuex 进行状态管理，Vue Router 实现了复杂的路由管理，Vite 作为构建工具提高了开发效率。 2. 性能要求高：由于平台需要支持大量的商品列表和用户并发访问，对性能的要求极高。我们通过代码分割、懒加载、图片优化等手段确保了页面的快速加载和流畅交互。 3. 功能模块复杂：涉及商品展示、购物车、订单管理、用户中心等多个功能模块，各模块之间需要紧密协作和数据共享。 4. 跨团队协作：前端团队与后端团队、设计团队紧密合作，确保项目的顺利交付。 4. 实习中的全栈部分做了什么 题目要点 全栈开发能力。 参考答案 在实习期间，我参与了多个全栈开发项目，主要负责以下工作： 1. 后端接口开发：使用Node.js和Express框架开发RESTful API接口，与前端进行数据交互。我设计并实现了用户认证、商品管理、订单处理等功能的API。 2. 数据库设计与操作：负责MySQL数据库的设计和优化，包括表结构设计、索引优化和查询性能提升。编写SQL语句进行数据的增删改查操作。 3. 前端与后端的联调：确保前后端数据格式的一致性和接口的稳定性，处理可能出现的跨域问题和数据验证问题。 4. 部署与运维：参与项目的部署工作，使用Docker容器化应用，并通过Nginx进行反向代理配置。监控应用的运行状态，及时处理线上问题。 5. Vue 和 React 都是什么时候开始接触的 题目要点 技术学习历程。 参考答案 我是在大学期间开始接触Vue和React的。具体来说： 1. Vue：在大三时，我通过一个个人项目开始学习Vue。当时，我被Vue简洁的语法和强大的组件化特性所吸引，于是深入研究了Vue的文档，并通过实践项目掌握了Vue的基本使用方法，包括组件的创建、数据绑定、事件处理等。 2. React：在大四时，我为了扩展自己的技术栈，开始学习React。我通过官方文档和在线教程了解了React的组件化思想、JSX语法以及Hooks的使用。通过一个小型的社交媒体项目，我实践了React的单向数据流和状态管理。 6. 对原生 JS 如何学习的，掌握程度怎么样 题目要点 JavaScript能力。 ...