一面

← 已是第一轮 · 返回本次面经 · 第 1 轮 → 本轮要点： 本轮面试侧重于考察候选人的JavaScript基础知识、CSS布局能力、对浏览器工作原理的理解以及实际编码能力。重点在于事件循环、异步编程、闭包、原型链等核心概念，同时也涵盖了跨域、缓存等常见Web问题。 本轮共 11 道题。答案默认折叠，便于先自行作答。 1. 实现一个三栏布局，左右侧固定200px，中间自适应，写出至少两种方案。追问：Grid布局中fr单位的作用？如何解决Flex布局的浏览器兼容问题？ 题目要点 CSS布局能力：面试官想确认你是否熟练掌握现代CSS布局技术，如Flexbox和Grid，以及是否了解传统的布局方法。 布局方案的优劣对比：能否分析不同方案的适用场景和优缺点，体现出技术选型的思考能力。 CSS单位的理解：对fr这类现代布局单位的深入理解，表明你不是只会“复制粘贴”代码。 兼容性处理经验：在实际项目中如何处理浏览器兼容性问题，这是衡量工程师经验的重要指标。 参考答案 1.1 原理说明 三栏布局是前端开发中的经典布局问题，旨在实现一个两侧宽度固定、中间区域宽度自适应的页面结构。核心是处理中间区域如何填满剩余空间。 Flexbox（弹性盒子布局）：是一种一维布局模型，它让容器内的项目（item）能够灵活地分配空间。通过设置父容器display: flex，并为子项设置flex-grow（放大比例）、flex-shrink（缩小比例）和flex-basis（基准大小），可以轻松实现空间的自适应分配。对于三栏布局，可以将中间栏的flex-grow设为1，使其占据所有剩余空间。 Grid（网格布局）：是一种二维布局模型，可以将页面划分为行和列，并在这些行列构成的单元格中放置内容。通过grid-template-columns属性，可以精确定义每一列的宽度，使用fr单位可以非常方便地实现自适应。 fr 单位：fr是 “fractional unit”（分数单位）的缩写，用于Grid布局中。它代表了可用空间的一等份。例如，grid-template-columns: 200px 1fr 200px;意味着第一个和第三个元素宽度为200px，中间的元素占据所有剩余的可用空间。如果是1fr 2fr，则表示两者按1:2的比例分配可用空间。 1.2 核心用法 + 示例代码 方案一：Flexbox 布局这是目前最常用和推荐的方案，代码简洁且语义化。 使用场景：适用于绝大部分现代浏览器项目，尤其是一维方向（行或列）的布局。 注意点：需要注意旧版本浏览器的兼容性问题。 <div class="container-flex"> <div class="left">左侧固定</div> <div class="main">中间自适应</div> <div class="right">右侧固定</div> </div> <style> .container-flex { display: flex; height: 100vh; } .left, .right { width: 200px; background-color: #f0f0f0; } .main { flex: 1; /* 等同于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */ background-color: #e0e0e0; } </style> 方案二：Grid 布局Grid布局在处理二维对齐时更具优势，实现三栏布局同样非常简单。 ...

← 已是第一轮 · 返回本次面经 · 已是最后一轮 → 本轮要点： - 考点覆盖：网络协议（HTTP/HTTPS、OSI、WebSocket、QUIC、CORS）、安全（XSS、缓存投毒）、性能优化（缓存、懒加载/预加载）、工程化（版本更新、路由）、Vue框架细节。 难易度：中等偏上。前6题基础网络必会，7-10题需理解协议差异与实战场景，11-16题偏重安全与缓存的落地策略，17-20题考察框架原理与工程思维，梯度合理但深度要求高。 本轮共 21 道题。答案默认折叠，便于先自行作答。 1. 统计出现次数最多的字符以及出现的次数 题目描述： 编写一个函数，接收一个字符串作为输入，统计并返回出现次数最多的字符及其出现的次数。如果有多个字符出现次数相同且最多，则返回所有这些字符及其出现次数。 输入输出要求： 输入：一个字符串（只包含字母和数字）。 输出：一个对象，包含出现次数最多的字符及其出现次数。 示例： const input = "aabbccddde"; const result = mostFrequentChar(input); console.log(result); // 输出：{ a: 2, b: 2, c: 2, d: 3, e: 1 } 题目要点 时间复杂度：O(n)，需要遍历字符串两次 空间复杂度：O(k)，k为不同字符的数量 关键点：正确理解题意，返回所有出现次数最多的字符 优化：可以在统计过程中同时记录最大值，减少遍历次数 参考答案 这道题需要统计字符串中每个字符的出现次数，然后找出出现次数最多的字符。需要注意的是，题目要求如果有多个字符出现次数相同且最多，要返回所有这些字符。 解题思路： 遍历字符串，使用Map或对象统计每个字符的出现次数 找出最大出现次数 筛选出所有达到最大出现次数的字符 返回结果对象 代码实现： function mostFrequentChar(str) { // 边界情况处理 if (!str || str.length === 0) { return {}; } // 统计每个字符的出现次数 const charCount = {}; for (let char of str) { charCount[char] = (charCount[char] || 0) + 1; } // 找出最大出现次数 const maxCount = Math.max(...Object.values(charCount)); // 筛选出所有达到最大出现次数的字符 const result = {}; for (let [char, count] of Object.entries(charCount)) { if (count === maxCount) { result[char] = count; } } return result; } // 优化版本：使用Map，一次遍历完成 function mostFrequentCharOptimized(str) { if (!str || str.length === 0) { return {}; } const charCount = new Map(); let maxCount = 0; // 统计字符出现次数，同时记录最大值 for (let char of str) { const count = (charCount.get(char) || 0) + 1; charCount.set(char, count); maxCount = Math.max(maxCount, count); } // 构建结果对象 const result = {}; for (let [char, count] of charCount) { if (count === maxCount) { result[char] = count; } } return result; } 测试用例： ...

← 已是第一轮 · 返回本次面经 · 已是最后一轮 → 本轮共 13 道题。答案默认折叠，便于先自行作答。 1. 简历提到你熟悉Git，请问如何处理代码合并时的冲突？ 题目要点 面试官出这道题主要想确认哪些知识维度？ Git基础操作：考察候选人对Git版本控制工具的熟悉程度，尤其是合并（merge）和解决冲突（conflict resolution）等核心操作。 问题解决能力：在实际开发中遇到代码冲突时，候选人如何分析问题、定位冲突并有效解决。 协作开发经验：在团队协作中，如何避免冲突，以及在发生冲突后如何与其他团队成员协作解决。 该题所考知识点中有哪些高频实际应用点？ 日常代码合并：开发者在日常工作中频繁进行分支合并，冲突处理是不可避免的环节。 版本回溯与管理：理解冲突解决机制有助于更好地进行版本管理和历史回溯。 团队协作效率：高效解决冲突能够提高团队的开发效率和代码质量。 参考答案 1.1 原理说明 Git冲突是指在合并（merge）或变基（rebase）分支时，不同分支对同一个文件的相同部分进行了修改，或者一个分支修改了文件而另一个分支删除了该文件，导致Git无法自动判断保留哪个修改时发生的情况。Git会暂停合并操作，并将冲突部分标记出来，等待用户手动解决。 冲突的产生： 当两个或多个开发者对同一个文件的同一行或同一区域进行修改，并将各自的修改推送到远程仓库，在合并这些修改时，Git会提示冲突。 冲突的类型： 内容冲突：最常见，发生在同一个文件的相同行或相邻行被不同分支修改。 文件冲突：一个分支修改了文件，另一个分支删除了该文件；或者两个分支都创建了同名文件但内容不同。 1.2 核心用法 + 示例代码 处理Git合并冲突的主要步骤如下： 更新本地仓库：在进行合并操作前，通常需要先拉取远程最新代码，确保本地分支是最新的，减少潜在冲突。 git pull origin <your-branch> 执行合并操作：当你尝试将一个分支合并到另一个分支时，如果存在冲突，Git会提示并停止合并。 git merge <other-branch> 或者使用rebase： git rebase <other-branch> 识别冲突标记：Git会在冲突文件中插入特殊标记，通常是： <<<<<<&lt; HEAD // 当前分支的修改 ======= // 待合并分支的修改 >>>>>>> <commit-id-or-branch-name> <<<<<<&lt; HEAD：表示当前分支（HEAD指向）的代码。 =======：分隔符，表示冲突的开始和结束。 >>>>>>> <commit-id-or-branch-name>：表示待合并分支的代码。 手动解决冲突： 编辑冲突文件：根据业务需求，手动修改冲突文件，决定保留哪些代码，删除哪些代码。你可以选择保留其中一个分支的修改，或者结合两者的修改，甚至编写全新的代码。 删除冲突标记：在解决冲突后，务必删除<<<<<<<、=======和>>>>>>>这些Git自动添加的标记。 将解决后的文件标记为已解决： git add <conflicted-file-name> 提交合并结果：在所有冲突文件都标记为已解决后，提交合并。 ...

← 已是第一轮 · 返回本次面经 · 第 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 轮 → 本轮要点： 本次面试主要考察前端基础知识和工程化实践 本轮共 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对象操作。 ...