二面

← 第 1 轮 · 返回本次面经 · 已是最后一轮 → 本轮共 16 道题。答案默认折叠，便于先自行作答。 1. 为什么大二就开始实习呢？当时是怎么考虑的？ 题目要点 说明该题是主观型问题，不考"唯一标准答案"。 面试官主要考察答题者的表达能力、思路系统性、技术理解和复盘能力。 答题结构建议：首先说明实习的初衷和驱动力，然后结合个人成长和职业规划阐述实习带来的收获和影响，最后可以适当提及对未来发展的思考。 参考答案 其实，我选择在大二就开始实习，主要是出于对前端开发浓厚的热情和对实践经验的渴望。当时在学校学习理论知识时，我逐渐意识到，真正的项目开发与课堂学习存在很大差异。我非常希望能够尽早接触到真实的项目环境，了解企业级开发的流程、规范以及团队协作的方式。 我的考虑是多方面的。首先，我想通过实习来验证自己所学知识的实用性，并在实际工作中发现自身的不足，从而有针对性地提升技能。其次，我相信尽早融入职场能够帮助我更好地理解行业需求，明确未来的职业发展方向。例如，在第一个实习项目中，我参与了一个电商后台管理系统的开发，亲身体验了从需求分析到功能上线的全过程，这让我对前端开发的整体链路有了更深刻的理解，也意识到代码质量、模块化和组件化在大型项目中的重要性。这段经历不仅提升了我的编码能力，也让我学会了如何与产品、设计、后端团队高效沟通协作。可以说，大二的实习对我而言是一个非常重要的转折点，它让我更早地将理论与实践结合，为后续的学习和职业发展打下了坚实的基础。 2. 在实习过程中，有没有发现自己对前端的理解和之前在学校学习时有什么不同？ 题目要点 说明该题是主观型问题，不考"唯一标准答案"。 面试官主要考察答题者的表达能力、思路系统性、技术理解和复盘能力。 答题结构建议：从理论与实践、个人能力成长、团队协作与项目流程、以及对行业理解等几个方面进行对比和阐述。 参考答案 在实习过程中，我对前端的理解确实发生了很大的转变，与之前在学校学习时有了显著的不同。在学校，我们更多地关注理论知识、算法和数据结构，以及一些基础框架的用法，代码往往是为了实现某个功能点而存在，相对独立且注重单一技术点的掌握。比如，我们可能会花很多时间去学习React的生命周期、Redux的状态管理原理，但很少有机会将其应用到真实的、复杂的业务场景中。 然而，实习让我意识到，前端开发远不止写代码那么简单。首先，理论与实践的差异：在实际项目中，需要考虑的不仅仅是技术实现，更要关注业务需求、用户体验、性能优化、代码可维护性等多个维度。我学到，一个"好"的解决方案，不仅要能跑，还要易于维护、易于扩展。例如，在学校里写组件可能只关注功能实现，但在实习中我学会了如何设计可复用、可配置的通用组件，并考虑其在不同业务场景下的兼容性。其次，团队协作与项目流程的重要性远超我的预期。在学校，我们更多是独立完成作业，而在公司，一个项目是多人协作的成果，需要频繁地与产品经理沟通需求，与设计师确认交互，与后端工程师对接接口。我学会了如何通过Code Review、Git工作流来保证团队代码质量和开发效率。 最后，我对前端的广度和深度有了更全面的认知。之前可能觉得前端就是"写页面"，现在才发现它涉及性能优化、跨端开发、工程化、自动化测试、前端安全等诸多领域。实习让我从一个"代码实现者"逐渐向一个"问题解决者"转变，开始更系统地思考如何构建一个高质量、高效率、可持续迭代的前端应用。这让我更加明确了未来学习和发展的方向，也激发了我对前端技术更深层次探索的兴趣。 3. 为什么选择前端开发这个方向？ 题目要点 说明该题是主观型问题，不考"唯一标准答案"。 面试官主要考察答题者的表达能力、思路系统性、技术理解和复盘能力。 答题结构建议：可以从个人兴趣、行业前景、技术特性、以及早期学习或项目经历等方面切入，阐述选择前端的理由。 参考答案 我选择前端开发这个方向，主要是基于多方面的考虑和个人兴趣的驱动。最初接触编程时，我被前端所能实现的直观、可见的用户界面深深吸引。相对于后端更偏向逻辑和数据处理，前端能够将代码立即转化为用户可以直接交互和感知的视觉呈现，这种即时反馈的成就感对我来说非常重要。我喜欢通过自己的代码，让用户能够流畅、舒适地使用产品，并从中获得良好的体验。 其次，前端技术栈的快速发展和广阔的行业前景也是吸引我的重要因素。Web技术日新月异，不断有新的框架、工具和解决方案涌现，这让我觉得前端是一个充满活力和挑战的领域，能够持续学习和成长。从最早的jQuery到现在的React、Vue，再到小程序、跨端框架，前端的应用场景越来越丰富，这让我看到了前端工程师在未来技术发展中的巨大潜力。 此外，在校期间的一些项目经历也进一步坚定了我选择前端的决心。我曾参与开发过一个校园二手交易平台，从零开始搭建前端界面，设计用户交互流程，并解决了一系列兼容性、性能优化等问题。在这个过程中，我不仅提升了技术能力，更重要的是，我从中找到了解决问题的乐趣和创造的成就感。我喜欢与设计师、产品经理沟通，将抽象的需求转化为具体、友好的用户界面，这种跨领域的协作也让我觉得前端工作充满了挑战性和趣味性。综合这些因素，我坚信前端开发是一个既能发挥我兴趣特长，又能持续学习和成长的理想方向。 4. 学前端大概有多久了？之前是否有接触过其他编程语言？ 题目要点 说明该题是主观型问题，不考"唯一标准答案"。 面试官主要考察答题者的表达能力、思路系统性、技术理解和复盘能力。 答题结构建议：首先说明学习前端的时长，然后提及之前接触过的其他编程语言及其对前端学习的帮助，最后可以突出自己持续学习的能力。 参考答案 我接触前端开发大约有三年时间了。从大二开始，我就对前端产生了浓厚的兴趣，并系统地投入到学习中。这三年里，我从基础的HTML、CSS、JavaScript开始，逐步深入学习了React、Vue等主流前端框架，以及Webpack、Vite等构建工具，并参与了一些实际项目开发。 在学习前端之前，我在大学一年级接触过C++和Java等编程语言。C++的学习让我对底层逻辑、数据结构和算法有了初步的认识，培养了我的编程思维和解决问题的能力。而Java的学习则让我对面向对象编程、软件工程的思想有了更深的理解，尤其是在后端开发实践中，我了解了前后端分离、API接口设计等概念，这对于我理解前端与后端的数据交互和系统架构非常有帮助。这些早期的编程语言学习经历，为我后续学习JavaScript和前端框架打下了坚实的基础，让我能够更快地理解前端技术的原理和实现机制，例如，对数据结构和算法的理解，让我能够更好地优化前端应用的性能，提升用户体验。 总的来说，虽然前端是我主要深耕的方向，但其他编程语言的学习经历拓宽了我的技术视野，也让我能够从更全面的角度去思考和解决前端开发中的问题。我始终保持着对新技术的学习热情，并乐于将不同领域的知识融会贯通，应用到实际项目中。 5. 你提到的两个项目，分别是什么？简单介绍一下它们的背景和功能。 题目要点 说明该题是主观型问题，不考"唯一标准答案"。 面试官主要考察答题者的表达能力、思路系统性、技术理解和复盘能力。 答题结构建议：分别介绍项目的背景、你的角色、主要负责的功能、以及项目中使用到的关键技术栈。强调项目亮点和你的贡献。 参考答案 好的，我很乐意介绍我参与的两个主要项目。 第一个项目是一个在线教育平台的前端重构项目。背景是公司原有的教育平台技术栈老旧，用户体验不佳，且维护成本高昂。我作为前端开发实习生，主要负责其中"课程详情页"和"直播互动模块"的重构工作。课程详情页的核心功能是展示课程内容、教师信息、课程大纲和用户评论，并支持课程购买和加入学习。直播互动模块则需要实现实时弹幕、点赞、提问和答疑等功能，确保高并发下的数据同步和流畅交互。 在这个项目中，我主要负责： 课程详情页： 使用 React + Redux 技术栈，重构了页面组件，优化了数据请求和渲染逻辑，显著提升了页面加载速度和用户交互体验。特别是在图片懒加载和评论区无限滚动方面进行了性能优化，将首屏加载时间缩短了约30%。 直播互动模块： 参与了WebSocket通信的实现，确保弹幕消息的实时推送和展示。同时，为了保证在高并发场景下的性能，我们采用了虚拟列表技术来渲染大量弹幕，避免了DOM节点的过度渲染导致的页面卡顿。我还负责了前端的输入校验和敏感词过滤，确保互动内容的合规性。 第二个项目是一个企业内部的"项目管理系统"。这个系统的背景是公司内部各部门的项目信息分散，缺乏统一的管理和协作平台，导致沟通效率低下。我主要负责其"任务看板"和"数据可视化报表"模块的开发。任务看板旨在提供一个直观的Kanban视图，展示项目的任务状态（待办、进行中、已完成），并支持拖拽排序、任务分配、截止日期设置等功能。数据可视化报表则需要将项目进度、成员工作量、缺陷趋势等数据通过图表形式清晰地呈现。 在这个项目中，我主要负责： 任务看板： 采用了Vue 3 + Vuex + Element UIPlus 技术栈，实现了任务的增删改查和拖拽功能。为了提升用户体验，我利用Vue的响应式特性和虚拟DOM，确保了大量任务卡片操作时的流畅性。同时，设计并实现了自定义拖拽指令，提升了组件的通用性和可维护性。 数据可视化报表： 集成了ECharts图表库，根据后端提供的API数据，实现了项目概览、成员工作负荷、Bug趋势等多种报表的动态渲染。我负责了数据的前端处理和格式化，确保图表能够准确、清晰地展示数据，并通过组件化封装，使得报表可以灵活配置和复用。在实现过程中，也针对数据量较大时的图表渲染性能做了优化，例如按需加载图表组件和数据预处理。 通过这两个项目，我不仅巩固了前端基础和框架应用能力，更重要的是，学习了如何在实际复杂项目中进行需求分析、技术选型、性能优化以及团队协作。这些经验让我对前端工程化和项目管理有了更深入的理解。 ...

← 第 1 轮 · 返回本次面经 · 已是最后一轮 → 本轮要点： 二面深入考察了前端核心知识的应用和原理理解。重点包括CSS优先级、闭包与内存管理、JavaScript继承的多种实现方式、原型链的深层理解、虚拟DOM的性能优化原理以及Vue框架的高级特性。题目更侧重于“为什么”和“如何实现”，要求候选人不仅知其然，更要知其所以然。 本轮共 12 道题。答案默认折叠，便于先自行作答。 1. 自我介绍，没有实习过。 题目要点 沟通表达能力：能否清晰、自信地介绍自己。 潜力与热情：在没有实习经历的情况下，如何通过个人项目、技术博客、开源贡献等来证明自己的技术热情和学习能力。 求职动机：为什么选择这个岗位和公司。 参考答案 此题为个人经验总结，请根据自身情况作答。核心是突出自己的优势、学习能力和对前端的热情，用项目经验或学习成果来弥补实习经历的不足。 2. 最终颜色是什么？为什么？ <div class="box" id="content" style="color:red"></div> .box { color: blue } #content { color: green } 题目要点 CSS优先级（Specificity）：这是CSS核心概念之一，考察对不同选择器权重的理解和计算能力。 CSS规则来源：是否了解行内样式、内部样式表、外部样式表的优先级关系。 参考答案 1.1 原理说明 CSS的优先级（Specificity），也常被称为特殊性或权重，是浏览器用来决定当多个规则应用到同一个元素上时，哪一条规则生效的计算方法。 优先级的计算规则可以总结为一个四元组 (a, b, c, d)： a: 行内样式（Inline styles）：如 style="color: red;"。如果存在，a为1，否则为0。 b: ID选择器：如 #content。b为ID选择器的数量。 c: 类选择器、属性选择器、伪类选择器：如 .box, [type="text"], :hover。c为这些选择器的总数量。 d: 标签选择器、伪元素选择器：如 div, ::before。d为这些选择器的总数量。 比较规则：从a开始，逐位比较。a大的胜出；如果a相同，则比较b，b大的胜出；以此类推。只有在优先级完全相同时，才会根据样式在代码中出现的顺序来决定，“后来者居上”。 另外，!important声明拥有最高优先级，它会覆盖任何其他声明，但应避免滥用。 1.2 核心用法 + 示例代码 我们来分析题目中的三个样式规则： 行内样式：style="color:red" 优先级计算：a=1, b=0, c=0, d=0 -> (1, 0, 0, 0) ID选择器：#content { color: green } 优先级计算：a=0, b=1, c=0, d=0 -> (0, 1, 0, 0) 类选择器：.box { color: blue } 优先级计算：a=0, b=0, c=1, d=0 -> (0, 0, 1, 0) 比较结果： ...

← 第 1 轮 · 返回本次面经 · 第 1 轮 → 本轮要点： 本轮面试考察了前端基础能力、网络协议、Vue响应式原理、构建工具底层实现，以及手写能力与业务建模能力，重点在于深入理解底层原理和综合解决问题的能力。 本轮共 11 道题。答案默认折叠，便于先自行作答。 1. 讲一下你的前端模块化的理解 题目要点 模块化发展历程、ES Module 和 CommonJS 区别、模块加载机制、Tree-shaking原理。 参考答案 原理说明 模块化的目的：为了提高代码的可维护性、复用性和依赖管理能力，将代码组织为独立模块。 发展历程： 无模块化（全局变量） IIFE 模式（立即执行函数） CommonJS（Node.js 标准，同步加载） AMD / CMD（异步模块定义） ES Module（ES6 标准模块系统，浏览器原生支持） CommonJS vs ES Module： CommonJS 是同步加载，适用于服务端；ES Module 是静态分析+异步加载，适用于浏览器。 ES Module 支持 Tree-shaking，CommonJS 不支持。 核心用法 + 示例代码 // ES Module export const add = (a, b) => a + b; import { add } from './utils.js'; 常见误区 将 ES Module 和 CommonJS 混用，导致打包失败。 忽视 ES Module 是静态结构，不能在运行时动态导入变量名模块（需使用 import()）。 2. HTTP/2 解决 HTTP/1.1什么问题？ 题目要点 HTTP/2 优化点、HTTP/1.1 的瓶颈、性能原理 ...

← 第 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 轮 · 返回本次面经 · 已是最后一轮 → 本轮要点： 本次面试主要考察校招生的基础内容 本轮共 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能力。 ...

← 第 1 轮 · 返回本次面经 · 已是最后一轮 → 本轮要点： 本次面试主要考察校招生的基础内容 本轮共 9 道题。答案默认折叠，便于先自行作答。 1. Flex布局中flex-grow与flex-shrink的计算规则？ 题目要点 CSS布局。 参考答案 在Flex布局中，flex-grow和flex-shrink属性用于控制子元素在可用空间内的扩展和收缩行为。它们的计算规则如下： flex-grow： 定义：定义项目的扩展比例，即项目在主轴方向上可占有的额外空间的比例。 计算规则：剩余空间按项目flex-grow值的比例分配。如果所有项目的flex-grow值之和大于1，则按比例分配；如果小于1，则先分配剩余空间。 示例：如果有两个子元素，flex-grow分别为1和2，总剩余空间为300px，则第一个子元素获得100px，第二个获得200px。 flex-shrink： 定义：定义项目的收缩比例，即项目在主轴方向上需要收缩时的比例。 计算规则：当总项目大小超过容器可用空间时，项目按flex-shrink值的比例收缩。收缩的最小尺寸受min-width或min-height限制。 示例：如果有两个子元素，flex-shrink分别为1和2，总超出行空间为100px，则第一个子元素收缩约33.33px，第二个收缩约66.66px。 完整计算步骤： 计算总可用空间：容器主轴长度减去所有项目初始尺寸（flex-basis或未设置时的内容尺寸）。 判断剩余空间： 若剩余空间为正，按flex-grow分配扩展空间。 若剩余空间为负，按flex-shrink分配收缩空间。 计算比例：每个项目的比例为flex-grow或flex-shrink值除以所有项目对应值之和。 分配空间：按比例将剩余空间分配或从项目中扣除。 flex属性：flex是flex-grow、flex-shrink和flex-basis的简写形式。例如，flex: 1 1 0表示flex-grow: 1、flex-shrink: 1、flex-basis: 0。这在等比例分配剩余空间时非常有用。 2. 讲一下js闭包 题库原题：说说你对闭包的理解，以及闭包使用场景 题目要点 什么是闭包 简单理解就是函数中嵌套函数。我们都知道局部变量我们是无法访问的，但是通过闭包可以做到。 // 正常访问 var lan = 'zh'; function hello(){ var name = '前端未来'; } console.log(name)//很明显'undefined' // 换成闭包 function hello(){ var name = '前端未来'; function demo(){ console.log(name)//打印：前端未来 } } 闭包的应用场景 1. 数据封装和隐私 闭包可以用来封装数据和功能，创建具有私有变量和公共接口的模块。 应用 创建具有私有状态的模块或对象。 2. 函数工厂 闭包用于创建返回函数的函数，这些返回的函数可以维持状态。 ...

← 第 1 轮 · 返回本次面经 · 已是最后一轮 → 本轮要点： 本次面试主要考察校招生的基础内容 本轮共 9 道题。答案默认折叠，便于先自行作答。 1. React/Vue/Angular框架熟悉哪个？对比一下 题目要点 前端框架。 参考答案 我对React和Vue较为熟悉，以下是对这三大框架的对比： React： 优点： 组件化：React采用组件化开发，将复杂的用户界面拆分为多个可复用的组件，提高代码的可维护性和复用性。 虚拟DOM：使用虚拟DOM优化DOM操作，减少页面重绘和回流，提升性能。 生态丰富：拥有庞大的生态系统，如Redux、React Router等，可满足各种复杂的开发需求。 社区活跃：社区庞大，更新迅速，遇到问题时容易找到解决方案。 缺点： 学习曲线：对初学者来说，需要学习JSX语法和组件化的思想，有一定学习成本。 配置繁琐：项目搭建和配置相对复杂，需要手动配置Webpack等构建工具。 Vue： 优点： 易上手：语法简洁，文档清晰，容易上手，适合初学者快速入门。 渐进式框架：可以逐步引入Vue，与现有项目或其他技术结合使用，灵活性高。 模板语法：使用HTML模板，对熟悉HTML和JavaScript的开发者更友好。 性能优化：也采用虚拟DOM，性能表现良好。 缺点： 生态不够丰富：相较于React，生态和社区稍小，插件和库的选择相对有限。 大型项目支持：在处理大型复杂项目时，可能不如React和Angular成熟。 Angular： 优点： 全栈解决方案：提供从前端到后端的一整套解决方案，包括路由、状态管理、表单处理等。 强类型系统：基于TypeScript开发，具有强类型检查，有助于大型项目的代码维护和团队协作。 依赖注入：内置依赖注入系统，方便管理组件和服务之间的依赖关系。 适合企业级应用：在开发大型企业级应用时，提供了一套完整的架构和规范。 缺点： 学习曲线陡峭：对初学者来说，需要掌握TypeScript、依赖注入、模块化等概念，学习成本较高。 灵活性较低：框架较为庞大，定制化程度不如React和Vue高，不适合小型项目快速开发。 社区相对较小：相较于React，社区活跃度和更新速度稍逊一筹。 2. React Hooks闭包陷阱的产生原因？ 题库原题：说说你对 React Hook的闭包陷阱的理解，有哪些解决方案？ 题目要点 React Hook 的闭包陷阱是一个常见的问题,它发生在使用 Hook 时,特别是在处理事件处理函数或异步操作时。 闭包陷阱的本质是,在 Hook 内部定义的函数会捕获 Hook 函数执行时的状态,而不是最新的状态。这可能会导致一些意想不到的行为,比如事件处理函数无法访问最新的状态,或者异步操作使用了过期的数据。 造成这个问题的原因是,React Hook 的设计使得组件函数在每次渲染时都会重新定义内部的函数,而这些函数会关闭当时的状态。 解决这个问题的主要方案有以下几种: 使用 useCallback Hook: ...

← 第 1 轮 · 返回本次面经 · 已是最后一轮 → 本轮要点： 本次面试主要考察校招生的基础内容 本轮共 13 道题。答案默认折叠，便于先自行作答。 1. 你是什么时候开始学前端的 题目要点 学习经历。 参考答案 我接触前端开发是在大学二年级的时候。当时，我选修了一门网页设计与开发的课程，这让我对前端开发产生了浓厚的兴趣。从那时起，我便开始系统地学习HTML、CSS和JavaScript等前端技术。我通过阅读书籍、在线教程和官方文档，打下了坚实的基础。同时，我积极参与实践项目，不断提升自己的技能。毕业后，我继续深入学习前端框架和工具，如Vue、React等，并在实际工作中不断积累经验。这段学习经历不仅让我掌握了前端开发的技术，还培养了我对前端开发的热爱和持续学习的态度。 2. 为什么选择前端这个方向呢，是如何学习前端的 题目要点 学习动机与方法。 参考答案 我选择前端开发是因为它结合了技术和创意，能够直接看到自己的代码转化为用户界面，这种即时反馈让我感到非常满足。同时，前端领域技术更新快，充满挑战，能够不断学习新知识。我通过在线课程（如Coursera、Udemy）、官方文档（如MDN Web Docs）和实践项目学习前端。我积极参与开源社区（如GitHub），与其他开发者交流经验，并通过阅读技术博客（如CSS-Tricks、JavaScript.info）保持对新技术的敏感度。这种多渠道的学习方式让我能够全面掌握前端开发的技能，并在实践中不断提升。 3. 说一下你觉得前端和后端有什么区别 题目要点 前后端理解。 参考答案 前端和后端在技术栈、运行环境、关注点等方面有显著区别： 技术栈： 前端：主要使用HTML、CSS、JavaScript及其框架（如Vue、React、Angular）进行开发。例如，使用Vue.js构建用户界面，处理用户交互逻辑。 后端：使用服务器端语言（如Node.js、Java、Python、Ruby）和框架（如Express、Spring Boot、Django、Rails）开发API、处理业务逻辑和与数据库交互。例如，使用Node.js和Express框架搭建RESTful API服务器。 运行环境： 前端：代码运行在客户端浏览器中，与用户直接交互。前端开发者需要考虑不同浏览器的兼容性和用户体验。 后端：代码运行在服务器上，处理请求、管理数据和执行业务逻辑。后端开发者关注服务器性能、安全性和可扩展性。 关注点： 前端：注重用户体验、界面设计、响应式布局和性能优化（如页面加载速度、交互流畅性）。前端开发者需要与设计师紧密合作，实现视觉效果和交互功能。 后端：关注数据存储、业务逻辑实现、API设计和安全性。后端开发者需要与数据库交互，处理并发请求，并确保系统的稳定性和可靠性。 开发工具： 前端：使用VS Code等编辑器，搭配浏览器开发者工具进行调试。依赖构建工具（如Vite、Webpack）进行代码打包和优化。 后端：使用IntelliJ IDEA、PyCharm等IDE，搭配数据库管理工具（如pgAdmin、MySQL Workbench）进行开发。需要配置服务器环境（如Nginx、Apache）和部署工具（如Docker、Kubernetes）。 数据处理： 前端：主要处理数据的展示和用户输入的收集。通过API从后端获取数据，并将其转换为用户界面。 后端：负责数据的存储、查询和业务逻辑处理。与数据库（如MySQL、MongoDB）交互，执行复杂的数据操作和事务管理。 性能优化： 前端：优化页面加载时间、减少重绘和回流、提升交互响应速度。例如，通过懒加载、代码分割、图片优化等技术提高性能。 后端：优化服务器响应时间、数据库查询效率、减少内存泄漏和提升并发处理能力。例如，使用缓存机制（如Redis）、数据库索引优化、连接池管理等技术提高性能。 4. 最近有在看什么技术文章吗 题目要点 学习态度。 参考答案 最近我在阅读关于WebAssembly性能优化的文章，了解如何通过WebAssembly提升前端应用的运行效率。例如，我读了一篇关于使用WebAssembly进行图像处理的文章，介绍了如何将图像处理算法编译为WebAssembly模块，从而在浏览器中实现高性能的图像编辑功能。 同时，我也在关注前端框架的新特性，如Vue 3的Composition API和React的Concurrent Mode。这些新技术有助于构建更高效、响应更快的用户界面。 此外，我还阅读了一些关于前端安全的文章，特别是关于防止XSS攻击和CSRF攻击的最佳实践，这些知识对于构建安全的Web应用至关重要。 通过这些文章，我能够不断更新自己的知识体系，保持对技术前沿的敏感度，并将所学应用到实际项目中。 5. canvas 引擎有什么优化渲染性能的方案 题库原题：canvas 有什么优化渲染性能的方案 ...

← 第 1 轮 · 返回本次面经 · 已是最后一轮 → 本轮要点： 深入框架原理与工程化：小程序加载流程（缓存/渲染机制）、Vue路由动态加载（Code Splitting）、全局状态管理（Vuex模块化）、生命周期资源管理（mounted/beforeDestroy）。难点在于手势识别算法（滑动速度计算）和可控动画引擎（开始/暂停/取消）。 本轮共 12 道题。答案默认折叠，便于先自行作答。 1. 小程序的页面加载流程是怎样的？请简要描述从用户点击小程序图标到页面显示的整个过程。 题库原题：小程序的页面加载流程是怎样的？请简要描述从用户点击小程序图标到页面显示的整个过程。 题目要点 双线程并行：启动过程是渲染层（UI）和逻辑层（JS）同步初始化的过程。 离线包机制：通过本地缓存和分包加载策略，极大减少了网络传输对首屏的影响。 预加载优化：微信客户端通过预热环境和提前下载包来压榨启动耗时。 数据驱动渲染：首屏显示依赖于逻辑层到渲染层的初始数据传输（setData 机制的前身）。 参考答案 小程序的加载是一个多线程协作的过程，主要可以分为环境准备、代码下载、注入运行以及首屏渲染四个阶段。 1. 运行环境准备（准备阶段） 当用户点击小程序图标时，微信客户端会立即启动一个原生容器。 进程启动：微信会为小程序分配独立的进程或线程。 双线程环境初始化：微信会同时初始化两个运行环境，即逻辑层（AppService）和渲染层（WebView）。为了提速，微信通常会预先启动一个通用的空白 WebView（预加载机制），从而缩短环境搭建的时间。 2. 代码包下载与加载（资源阶段） 在环境准备的同时，微信会根据小程序的 AppID 去服务端请求最新的代码包。 增量更新与缓存：如果本地已有缓存，则直接校验版本；若无或版本过旧，则下载加密的代码包。 分包加载优化：如果开发者配置了分包，此时只会下载“主包”内容，从而减少首次下载的数据量，提升启动速度。 3. 代码注入与逻辑初始化（初始化阶段） 代码包下载完成后，微信会开始解析并执行代码。 逻辑层注入：执行 app.js 和各页面的 JS 逻辑。此时，小程序会触发 App.onLaunch 和 App.onShow 生命周期回调。 配置解析：解析 app.json 和页面配置，确定全局样式、路由关系及初始页面。 4. 渲染层视图构建与首屏渲染（渲染阶段） 这是用户肉眼感知页面出现的关键时刻。 视图层初始化：渲染层载入 WXML 转换后的模板和 WXSS 样式。 初始数据传输（First Paint）：逻辑层在实例化页面后，会将初始数据（Initial Data）通过微信底层提供的 evaluateJavascript 方式，跨线程传递给渲染层。 动态渲染：渲染层接收到数据后，结合模板生成最终的 DOM 树，并交由浏览器引擎进行绘制。 5. 交互就绪（Finish 阶段） 生命周期触发：页面初次渲染完成后，逻辑层会收到反馈，并触发页面的 onReady 回调。此时，逻辑层与渲染层已经建立了稳定的双向数据绑定，用户可以开始进行交互操作。 2. 小程序页面间有哪些传递数据的方法？ 题库原题：小程序页面间有哪些传递数据的方法？ ...

← 第 1 轮 · 返回本次面经 · 已是最后一轮 → 本轮要点： 本次面试聚焦CSS布局核心问题（浮动清除、BFC机制）、高频JS手写能力（防抖函数）、工程化实践（TS迁移痛点、Vue3升级策略）、深度性能优化（缓存协同更新、Tree Shaking原理）。难点在于浮动导致的布局塌陷解决方案、CDN与本地缓存协同策略设计，以及复杂框架迁移的兼容性处理。 本轮共 11 道题。答案默认折叠，便于先自行作答。 1. 浮动元素导致的布局错乱应该如何解决？ 题目要点 CSS浮动布局及解决方案。 参考答案 浮动元素会导致其父元素高度塌陷，从而影响布局。解决方法有： 1. 清除浮动：在浮动元素后面添加一个空的`div`，设置`clear: both`。 2. 使用伪元素清除浮动：在父元素上使用`::after`伪元素，设置`clear: both`。 .parent::after { content: ""; display: block; clear: both; } 1. 使用`overflow: hidden`：给父元素设置`overflow: hidden`，但可能会隐藏超出部分的内容。 2. 使用`BFC`（块级格式化上下文）：通过设置`display: flow-root`或`overflow: auto`等属性，使父元素形成一个独立的BFC，从而包含浮动元素。 2. 实现一个固定侧边栏+自适应主内容的布局 题目要点 CSS布局技巧。 参考答案 可以使用flexbox布局实现固定侧边栏和自适应主内容的布局： <div class="container"> <div class="sidebar">侧边栏</div> <div class="main">主内容</div> </div> .container { display: flex; } .sidebar { width: 200px; /* 固定宽度 */ background-color: #f0f0f0; } .main { flex: 1; /* 自适应宽度 */ background-color: #ffffff; } 3. 实现 debounce（防抖）函数 题库原题：实现 debounce（防抖）函数 ...