一面

← 已是第一轮 · 返回本次面经 · 第 1 轮 → 本轮要点： 本次面试主要考察校招生的基础内容 本轮共 13 道题。答案默认折叠，便于先自行作答。 1. 实现第一个元素不移动后续元素与左边相隔8px（:not(:first-child） 题目要点 CSS选择器与布局。 参考答案 要实现第一个元素不移动，后续元素与左边相隔8px，可以使用CSS中的:not(:first-child)选择器来选择除第一个元素外的所有同级元素，并为其设置左边距。这在布局中非常有用，可以避免对第一个元素应用不必要的样式。以下是一个示例： <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> </div> .container { display: flex; } .item:not(:first-child) { margin-left: 8px; } 在这个示例中，.item:not(:first-child)选择器匹配了所有带有item类的元素，除了第一个元素。然后，我们通过margin-left: 8px为这些元素设置了左边距，使它们与左边的元素相隔8px。第一个元素不会受到影响，因此不会产生左边距，从而实现了题目要求的布局效果。这种技术在创建水平排列的元素时非常有用，例如导航栏或标签页，可以确保第一个元素与容器的边缘对齐，而后续元素之间保持一致的间距。 2. 写一个防抖 题库原题：实现 debounce（防抖）函数 题目要点 触发高频时间后n秒内函数只会执行一次,如果n秒内高频时间再次触发,则重新计算时间。 参考答案 触发高频时间后n秒内函数只会执行一次,如果n秒内高频时间再次触发,则重新计算时间。 const debounce = (fn, time) => { let timeout = null; return function() { clearTimeout(timeout) timeout = setTimeout(() => { fn.apply(this, arguments); }, time); } }; 防抖常应用于用户进行搜索输入节约请求资源，window触发resize事件时进行防抖只触发一次。 3. 讲讲你的项目难点 题目要点 项目经验与问题解决能力。 ...

← 已是第一轮 · 返回本次面经 · 第 1 轮 → 本轮要点： 本次面试主要考察校招生的基础内容 本轮共 19 道题。答案默认折叠，便于先自行作答。 1. 讲一下你的技术栈，为什么要学前端，如何学习前端的？ 题目要点 技术栈、学习动机与方法。 参考答案 技术栈： HTML/CSS：用于构建页面结构和样式。 JavaScript：包括ES6+特性，用于实现页面交互。 框架：熟练使用Vue.js和React，了解其生态系统（如Vue Router、Vuex、React Router、Redux）。 构建工具：使用Vite和Webpack进行项目构建和优化。 状态管理：使用Vuex和Redux进行状态管理。 UI组件库：使用Element UI、Ant Design等。 其他工具：Git、ESLint、Prettier、Jest等。 学习动机： 前端开发结合了技术和创意，能够直接看到代码转化为用户界面，带来了即时满足感。 前端领域技术更新快，充满挑战，提供了不断学习新知识的机会。 对用户界面和交互设计的兴趣，希望创造良好的用户体验。 学习方法： 在线课程：通过Coursera、Udemy、MDN Web Docs等平台学习基础知识。 实践项目：通过个人项目和开源项目应用所学知识。 阅读书籍：如《JavaScript高级程序设计》、《你不知道的JavaScript》。 参与社区：在GitHub、Stack Overflow等社区与开发者交流，解决遇到的问题。 技术博客：关注CSS-Tricks、JavaScript.info等博客，了解新技术和最佳实践。 2. 常见的H5标签有哪些 ，你是怎么用的 题库原题：常见的H5标签有哪些 ，你是怎么用的 题目要点 常见 H5 标签包括结构语义标签、文本语义标签、表单标签和媒体标签；实际使用中优先考虑语义表达和可访问性，而非样式；充分利用表单和媒体标签的原生能力以减少 JS 复杂度；canvas 与 svg 需根据场景选择；合理使用语义化标签能显著提升页面质量和长期可维护性。 参考答案 在实际工程中，H5 标签并不是“记住有哪些”，而是是否理解它们在语义、结构、可访问性和默认行为上的差异，并能在合适的场景中使用。对标签的理解，直接影响页面结构质量、SEO 以及后续的可维护性。 从结构层面看，最常用的一类是语义化结构标签。例如 header、nav、main、section、article、aside、footer。在页面搭建时，通常会用 header 承载页面或模块级头部信息，用 nav 明确标识导航区域，用 main 作为页面主体的唯一入口，再用 section 或 article 对内容进行分块。这类标签本身不改变样式，但会向浏览器、搜索引擎和辅助技术清晰表达“这块内容的角色是什么”，比单纯使用 div 更具表达力。 ...

← 已是第一轮 · 返回本次面经 · 第 1 轮 → 本轮要点： 本次面试主要考察校招生的基础内容 本轮共 21 道题。答案默认折叠，便于先自行作答。 1. 先简单自我介绍 题目要点 自我认知。 参考答案 您好，我叫[你的名字]，毕业于[学校名称]的[专业名称]专业。在大学期间，我就对计算机科学产生了浓厚的兴趣，尤其是前端开发领域。在学习和实践中，我积累了扎实的编程基础，熟练掌握了HTML、CSS、JavaScript等前端开发技术，并在多个项目中担任核心开发角色。我热爱前端开发工作，喜欢通过代码创造用户友好的界面和交互体验。在业余时间，我会不断学习新技术，提升自己的专业能力。我希望能够在一个富有创新和挑战的环境中工作，与优秀的团队成员共同成长。 2. 什么时候学前端？ 题目要点 学习经历。 参考答案 我是在大学二年级的时候开始接触前端开发的。当时，我选修了一门网页设计与开发的课程，这让我对前端开发产生了浓厚的兴趣。从那时起，我便开始系统地学习HTML、CSS和JavaScript等前端技术，并通过大量的实践项目不断提升自己的技能。毕业后，我继续深入学习前端框架和工具，如Vue、React等，并在实际工作中不断积累经验。 3. 怎么学前端？ 题目要点 学习方法。 参考答案 学习前端开发需要系统的学习和不断的实践。首先，我从基础的HTML、CSS和JavaScript开始，通过阅读书籍、在线教程和官方文档，打下了坚实的基础。然后，我深入学习了前端框架，如Vue和React，通过实践项目来理解框架的核心概念和使用方法。同时，我积极参与开源项目和在线社区，与其他开发者交流经验，解决遇到的问题。此外，我还关注前端技术的最新发展趋势，通过参加技术会议、观看在线课程等方式不断更新自己的知识体系。 4. 你的未来规划？ 题目要点 职业规划。 参考答案 我的短期目标是在前端开发领域持续深耕，提升自己的技术能力和项目经验。我希望能够在当前的岗位上承担更多的责任，参与复杂项目的开发，并不断优化现有系统的性能和用户体验。长期来看，我希望能够成为前端技术专家，带领团队进行技术创新和项目研发。同时，我也希望能够不断提升自己的架构设计能力和团队管理能力，为公司的技术发展做出更大的贡献。 5. 你觉得你什么地方比较强？哪里比较薄弱？ 题目要点 自我认知。 参考答案 我认为我的强项在于对前端技术的深入理解和实践经验。我能够快速学习新技术，并将其应用到实际项目中。同时，我具备良好的问题解决能力和团队协作精神，能够与团队成员高效合作，共同完成项目目标。然而，我也意识到自己在某些方面还有提升的空间。例如，在性能优化和大型项目的架构设计方面，我还需要进一步积累经验。此外，我还需要加强对后端技术的了解，以更好地进行前后端协同开发。 6. 一个前端架构师要有什么长处？ 题目要点 职业素养。 参考答案 一个优秀的前端架构师需要具备多方面的长处。首先，需要有深厚的技术功底，对前端技术栈有全面而深入的理解，包括HTML、CSS、JavaScript、前端框架、构建工具等。其次，需要具备良好的系统设计和架构能力，能够设计出高性能、可扩展、易维护的前端系统。此外，前端架构师还需要有较强的项目管理能力，能够领导团队进行项目的规划、开发和交付。良好的沟通能力和团队协作精神也是必不可少的，能够与产品、后端团队等进行有效的沟通和协作。最后，前端架构师需要有敏锐的技术洞察力，能够关注行业动态，引入新的技术和方法，推动团队的技术进步。 7. 微前端是什么？ 题库原题：什么是微前端？ 题目要点 微前端（Micro-Frontends）是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。 参考答案 微前端（Micro-Frontends）是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。 各个前端应用还可以独立运行、独立开发、独立部署。 微前端不是单纯的前端框架或者工具，而是一套架构体系， 8. SPA和MPA的区别？ 题库原题：SPA和MPA的区别？ 题目要点 SPA 通过前端路由在单一 HTML 中完成页面切换，交互流畅但首屏和 SEO 成本较高；MPA 每次导航请求新页面，SEO 友好且隔离性强，但交互体验有限；两者本质差异在于前后端渲染与路由职责的划分；现代项目常通过 SSR、SSG 等方式在两种模式之间折中。 ...

← 已是第一轮 · 返回本次面经 · 已是最后一轮 → 本轮要点： 本次面试主要考察校招生的基础内容 本轮共 18 道题。答案默认折叠，便于先自行作答。 1. 请介绍一下你在 [具体项目名称] 中主要做了哪些工作？ 题目要点 项目经验。 参考答案 回答参考： 项目架构设计：参与设计项目的整体架构，选择前端技术栈。考虑到项目规模和性能需求，选择了 Vue.js 作为前端框架，Vuex 进行状态管理，Vue Router 实现单页面应用的路由管理，Vite 作为构建工具。这些技术的选择旨在提高开发效率和应用性能。 核心模块开发：负责开发用户认证模块，实现了基于 JWT（JSON Web Token）的登录、注册和权限管理功能。通过与后端 API 的紧密协作，确保了用户数据的安全传输和存储。同时，开发了数据可视化模块，利用 ECharts 库展示复杂的业务数据，帮助用户更直观地理解和分析数据。 性能优化：通过分析页面的性能瓶颈，实施了一系列优化措施。例如，采用代码分割技术将应用拆分成多个小块，实现按需加载；使用懒加载技术延迟加载非首屏资源；对图片资源进行压缩和格式优化，减少页面加载时间。这些优化显著提升了页面的加载速度，改善了用户体验。 代码审查与测试：积极参与代码审查过程，遵循项目编码规范，确保代码质量。编写了大量的单元测试和集成测试用例，使用测试框架（如 Jest）进行自动化测试，确保代码的稳定性和可靠性，减少上线后的潜在问题。 2. 在 [具体项目名称] 中，遇到了哪些技术难点？你是如何解决的？ 题目要点 问题解决能力。 参考答案 回答参考： 跨浏览器兼容性：项目需要支持多个主流浏览器，包括一些旧版本的浏览器。为了解决这一问题，使用 Babel 将 ES6+ 代码转译为 ES5，确保大部分现代 JavaScript 特性能够在旧浏览器中运行。同时，引入 Polyfill 库来补充那些浏览器原生不支持的 API，例如 Promise、fetch 等。此外，使用 Autoprefixer 工具为 CSS 添加必要的浏览器前缀，确保 CSS 样式在不同浏览器中的一致性。 性能优化：随着项目规模的扩大，页面的加载时间和交互响应时间面临着挑战。通过分析，发现主要的性能瓶颈在于大量的初始 JavaScript 包和未优化的图片资源。为解决此问题，实施了代码分割策略，将应用的代码分割成多个小块，按需加载，减少了初始加载的包大小。同时，将图片资源转换为 WebP 格式，并实现了图片的懒加载，只有在用户滚动到图片位置时才加载图片，从而显著缩短了页面的初始加载时间。 后端 API 集成：在开发过程中，遇到了 API 响应数据格式不一致的问题，这给前端的数据处理带来了困难。为了解决这个问题，设计了一个统一的数据处理中间层，对后端返回的数据进行预处理和格式化，使其符合前端的要求。同时，与后端团队进行了深入沟通，推动他们优化 API 设计，以更好地满足前端的需求。 ...

← 已是第一轮 · 返回本次面经 · 已是最后一轮 → 本轮概述： 一共三轮面试，经过整理后形成该面经。 主要考察了候选人的实习经历、项目经验以及对前端工具和技术的理解。问题涵盖了从Vite插件开发到模块管理等多个方面，重点测试了候选人的实际操作能力和对技术细节的掌握。 本轮要点： 本次面试深度考察工程化全链路能力（Vite插件开发/预构建/HMR原理）、性能优化实战（INP项目包体积↓40%/LCP时间↓50%）、跨端架构设计（JavaScript Bridge通信/兼容性治理）及模块化高级应用（单例设计/循环依赖检测）。难点聚焦于pnpm幽灵依赖治理、Vite HMR全流程解析及Node.js运行时设计思想。 本轮共 32 道题。答案默认折叠，便于先自行作答。 1. 请介绍你在乾象、腾讯的实习经历，包括实习期间遇到的难点和亮点。 题目要点 实习经历, 项目背景, 技术挑战, 解决方案, 成绩, 亮点 参考答案 可以从项目背景、具体职责、遇到的技术挑战及解决方案等方面进行阐述。同时，可以分享一些在实习中取得的成绩或亮点，比如优化效果、团队协作等。 2. 现场实现一个最近开发的模块/组件，例如 URL Filter。 题目要点 设计思路, 实现过程, 单元测试, 代码示例 参考答案 可以详细描述这个模块/组件的设计思路、实现过程以及如何进行单元测试。如果可能的话，还可以展示一些代码片段来说明关键部分。 3. 在实习期间开发的 Vite 插件的功能是如何实现的？ 题目要点 架构兼容性：理解 Vite 插件如何复用 Rollup 钩子并扩展开发环境特有的 Server 钩子。 钩子应用场景：能够准确区分 config（配置修改）、resolveId/load（路径解析）、transform（代码改写）的应用边界。 AST 与代码转换：掌握如何通过 AST 操纵实现对代码的无损增强，并维持 SourceMap 的连续性。 环境控制：利用 configureServer 扩展中间件，以及通过 handleHotUpdate 实现精准的热更新控制。 虚拟模块技术：利用虚拟模块机制实现编译时信息的动态注入。 参考答案 Vite 插件的实现本质上是基于 Rollup 插件接口的扩展，并结合了 Vite 特有的开发服务器钩子。可以从插件系统的架构设计、生命周期钩子（Hooks）的执行时序、以及针对开发环境与生产环境的差异化处理三个维度进行回答。 ...

← 已是第一轮 · 返回本次面经 · 第 1 轮 → 本轮要点： 聚焦前端基础深度：虚拟DOM性能边界（复杂DOM场景优劣）、响应式布局实现（媒体查询/弹性布局）、浏览器兼容性实战（Polyfill/Babel）、微信小程序架构设计理念。难点在于Rem计算优化策略和O(1)空间复杂度的字符串逆序算法设计。 本轮共 10 道题。答案默认折叠，便于先自行作答。 1. 自我介绍 题目要点 个人背景、技能、经验、职业规划等。 参考答案 参考模版如下，一般3分钟以内即可。 面试官您好！我叫[姓名]，毕业于[毕业院校]，专业是[专业名称]。我有XX段前端开发实习经验，熟练掌握HTML、CSS、JavaScript等前端技术栈，主要的技术栈是React。在XX公司实习期间，主要参与过供应链管理系统和微信小程序开发，学习了前端相关专业技术，以及熟悉了项目的整体流程，同时积累了丰富的项目经验。 2. React 的虚拟 DOM 解决了什么问题？ 题库原题：React 的虚拟 DOM 解决了什么问题？ 题目要点 跨平台能力：通过对象层的抽象，实现了 UI 描述与具体渲染平台的解耦。 开发范式转换：将命令式的 DOM 操作转变为声明式的数据驱动，提升了复杂业务的可维护性。 性能兜底：通过批处理和 Diff 算法，在不增加开发者负担的情况下，减少了不必要的真实 DOM 操作开销。 研发效率：让开发者专注于业务逻辑而非底层 DOM 树的增删改查，降低了出错概率。 参考答案 在探讨 React 虚拟 DOM（Virtual DOM）所解决的问题时，不能简单地将其归结为“性能更快”，这实际上是一个常见的误区。 从长期的工程实践和框架演进来看，虚拟 DOM 核心解决了以下几个维度的挑战： 1. 解决跨平台与抽象层的问题 虚拟 DOM 最本质的贡献在于建立了一层声明式的抽象。在传统的 Web 开发中，代码直接耦合在真实的 DOM 环境中。而虚拟 DOM 将复杂的 UI 转换成了一种轻量级的 JavaScript 对象结构（即 VNode）。 这种抽象层使得 React 脱离了浏览器的物理限制。因为 VNode 只是普通的 JS 对象，它不仅可以被渲染为浏览器的 DOM，也可以被渲染为移动端的原生控件（React Native）、服务端字符串（SSR）甚至是 Canvas 绘制指令。它解决了 UI 描述与底层渲染引擎之间的强耦合问题，实现了“一次学习，随处编写”的愿景。 ...

← 已是第一轮 · 返回本次面经 · 第 1 轮 → 本轮要点： 本次面试深度考察JavaScript核心原理（闭包、继承实现）、前端框架（Vue响应式机制、虚拟DOM性能、Vue vs React区别）、性能优化（高并发请求处理、HTTP/2应用）、前端安全（XSS/CSRF防御）。难点聚焦于Vue响应式系统限制的解决（如动态字段更新）、复杂布局实现（自适应流式），以及高效算法设计（O(n)去重）。 本轮共 14 道题。答案默认折叠，便于先自行作答。 1. 自我介绍 题目要点 个人背景、能力、经验。 参考答案 我叫[姓名]，毕业于[学校]，专业是[专业]。我有[X]年的前端开发经验，熟练掌握HTML、CSS、JavaScript等前端技术，熟悉Vue.js和React框架。在项目中，我注重代码质量和用户体验，善于解决复杂的技术问题。我曾参与过多个大型项目的开发，例如[项目名称]，负责[具体工作]，通过优化代码结构和性能，提升了页面加载速度和用户体验。 2. 怎么学习javascript的？讲一下闭包，自己的使用场景 题目要点 JavaScript学习方法、闭包概念及应用。 参考答案 学习JavaScript时，我首先从基础语法入手，通过阅读经典书籍如《JavaScript高级程序设计》来系统地学习。闭包是JavaScript中的一个重要概念，它允许函数记住并访问其创建时所在的作用域链中的变量。闭包的使用场景很多，比如在事件处理中，可以使用闭包来保存事件相关的数据。例如，创建一个计数器函数，每次调用时返回当前的计数值，利用闭包可以保持计数器的状态。 3. Javascript如何实现继承？ 题库原题：Javascript如何实现继承？ 题目要点 1. 原型链继承 通过将一个构造函数的实例作为另一个构造函数的原型，实现属性和方法的继承。 特点 简单易实现。 缺点是父类实例的属性会被所有子类实例共享。 2. 借用构造函数（经典继承） 通过在子类构造函数中调用父类构造函数，实现属性的继承。 特点 避免了原型链继承共享属性的问题。 但无法继承父类的原型方法。 3. 组合继承（原型链+借用构造函数） 结合原型链继承和借用构造函数的方法，既调用父类构造函数，又将父类原型赋值给子类原型。 特点 可以继承实例属性和原型方法。 需要注意避免构造函数属性的多次调用。 4. 原型式继承 使用一个函数来创建一个新对象，并将这个新对象的原型指向另一个对象。 特点 适用于对象之间的属性继承，不涉及构造函数。 5. 寄生式继承 基于原型式继承，但添加了额外的包装函数，以提供更好的控制和灵活性。 特点 通过创建对象的副本来实现继承，避免修改原始对象。 6. ES6 类继承 使用class关键字和extends关键字实现继承。 特点 语法简洁，易于理解。 底层仍然是基于原型链实现。 参考答案 一、是什么 继承（inheritance）是面向对象软件技术当中的一个概念。 如果一个类别B“继承自”另一个类别A，就把这个B称为“A的子类”，而把A称为“B的父类别”也可以称“A是B的超类” 继承的优点 继承可以使得子类具有父类别的各种属性和方法，而不需要再次编写相同的代码 ...

← 已是第一轮 · 返回本次面经 · 已是最后一轮 → 本轮要点： 考察核心集中在前端性能优化（如无限加载卡顿、页面渲染延迟）、CSS布局与兼容性（如Flexbox自适应、跨浏览器适配）及Vue框架原理（如响应式限制、虚拟DOM优劣）。需重点准备懒加载/虚拟滚动优化、兼容性Hack技巧、异步执行顺序分析及需求拆分设计能力。 本轮共 12 道题。答案默认折叠，便于先自行作答。 1. 现在我们有一个 618 活动页的需求，需要你来做，你会如何拆分需求，如何设计？ 题目要点 需求分析与设计能力 参考答案 首先与产品、设计、运营等多部门沟通，明确活动页的核心功能、促销规则、页面风格等基本需求。例如，确定活动主题（如限时秒杀、满减优惠等）、预计流量、商品展示形式等。 根据功能模块拆分需求，可将活动页分为头部导航区（包含活动标题、时间、入口等信息）、商品展示区（如秒杀商品列表、热门推荐商品列表等）、促销信息区（展示活动规则、优惠券领取等）、底部信息区（如活动说明、客服入口等）。 在设计上，根据品牌风格和活动主题确定整体视觉风格，包括配色方案（如节日氛围的红色、金色等）、字体选择、图片风格等。针对商品展示区，考虑采用网格布局或瀑布流布局，以合理展示商品信息，包括商品图片、名称、价格、优惠信息等。对于交互设计，需考虑页面的滚动加载、商品点击跳转、优惠券领取等交互效果，确保用户体验流畅。 2. 商品列表中一行有五个商品卡片，最后一个自适应剩余空间，怎么实现。 题目要点 CSS 布局能力 参考答案 可以使用 CSS 的 Flexbox 布局来实现。首先将商品列表的容器设置为 flex 布局，即 display: flex。然后对前四个商品卡片设置固定宽度，例如 width: 100px，最后一个商品卡片设置 flex: 1，这样它就会占据所在行剩余的空间，实现自适应效果。同时，为了防止一行中商品卡片因内容过多而超出父容器宽度，可对每个商品卡片设置 overflow: hidden，确保其内容在自身区域内显示，并且可以添加 white - space: nowrap 和 text - overflow: ellipsis 来处理溢出的文字内容。 3. CSS 样式开发中你都遇到过哪些兼容性问题，如何解决的。 题目要点 CSS 问题解决能力及兼容性知识 参考答案 在不同浏览器中遇到过盒模型问题，例如 IE 浏览器的怪异盒模型与其他浏览器的标准盒模型不同，导致元素尺寸计算不一致。解决方法是使用 box - sizing: border - box，并结合 CSS 重置样式表统一各浏览器的盒模型表现。 2. 浮动布局在某些低版本浏览器中可能出现父元素高度塌陷或子元素排列不整齐的问题。可以通过为父元素添加 clearfix 清除浮动，即设置父元素 overflow: hidden 或使用伪元素 :after 添加清除浮动的样式来解决。 3. CSS3 动画在部分浏览器中可能不支持，或者动画效果不一致。例如，IE 浏览器对 CSS3 动画的支持较弱。解决方法是使用渐进增强的方式，在支持 CSS3 动画的浏览器中展示动画效果，对于不支持的浏览器提供简单的过渡效果或静态样式，并利用Modernizr 等工具进行特性检测，根据检测结果加载相应的样式和脚本。 4. 字体渲染在不同操作系统和浏览器中可能存在差异，影响页面的美观和一致性。可以通过设置字体的 font - family 为系统安全字体组合，并使用相对单位（如 em、rem）设置字体大小，以提高字体的兼容性和可读性。 4. 你刚刚说的上滑无限加载有没有性能问题，你怎么解决？ 题目要点 前端性能优化知识 ...

← 已是第一轮 · 返回本次面经 · 第 1 轮 → 本轮要点： 本次面试主要考察前端基础知识和实际应用能力。 本轮共 20 道题。答案默认折叠，便于先自行作答。 1. 实现一个宽度自适应的搜索框。 题目要点 CSS布局能力： 面试官希望确认候选人对CSS的布局方式（如Flexbox、Grid或传统布局）的掌握程度，以及如何实现元素的响应式和自适应。 响应式设计： 考察候选人是否能考虑不同屏幕尺寸下的用户体验，并运用CSS媒体查询、视口单位等技术实现宽度自适应。 HTML结构： 确认候选人是否能编写语义化且结构清晰的HTML代码。 参考答案 1.1 原理说明 宽度自适应的搜索框是指搜索框的宽度能够根据其父容器的宽度或视口宽度自动调整，以适应不同的屏幕尺寸和设备。实现这种效果通常依赖于CSS的弹性布局（Flexbox）或网格布局（Grid），结合相对单位（如百分比、vw/vh）或弹性单位（如flex属性）。其核心思想是让元素能够"伸缩自如"，而不是固定尺寸。 1.2 核心用法 + 示例代码 以下是使用Flexbox实现宽度自适应搜索框的示例： <div class="search-container"> <input type="text" class="search-input" placeholder="请输入搜索内容"> <button class="search-button">搜索</button> </div> .search-container { display: flex; width: 100%; /* 占据父容器的全部宽度 */ max-width: 600px; /* 设置最大宽度，防止过宽 */ margin: 20px auto; /* 居中显示 */ border: 1px solid #ccc; border-radius: 5px; overflow: hidden; /* 防止内容溢出 */ } .search-input { flex-grow: 1; /* 占据剩余空间 */ padding: 10px; border: none; outline: none; /* 移除聚焦时的边框 */ font-size: 16px; } .search-button { padding: 10px 15px; background-color: #007bff; color: white; border: none; cursor: pointer; font-size: 16px; } .search-button:hover { background-color: #0056b3; } /* 媒体查询，适应小屏幕 */ @media (max-width: 768px) { .search-container { max-width: 90%; } } 场景说明： ...

← 已是第一轮 · 返回本次面经 · 第 1 轮 → 本轮要点： 本轮面试侧重考察候选人前端基础知识的系统掌握程度，包括 CSS 盒模型、选择器机制、ES6 语法、异步任务队列、响应式原理与网络协议等，同时会通过算法题考查思维能力与编码规范。 重点关注以下几个方面： CSS布局与样式：考察对盒模型、选择器的深入理解，以及实际应用中的最佳实践 JavaScript核心：重点关注ES6特性、闭包、异步编程等基础概念的掌握程度 框架原理：主要考察Vue3响应式系统的实现原理与优化思路 工程化思维：通过HTTP、缓存、性能优化等问题考察工程实践经验 算法能力：通过字符串处理等典型题目考察基本编程功底 本轮共 17 道题。答案默认折叠，便于先自行作答。 1. 自我介绍 题目要点 这是一道主观性问题，没有标准答案。面试官主要考察： 表达能力：语言组织、逻辑清晰度 职业规划：技术深度、发展方向 项目经验：技术栈匹配度、解决问题能力 个人特质：学习能力、团队协作 参考答案 “您好，我是XXX，有5年前端开发经验。毕业于XXX大学计算机科学专业，目前在一家互联网公司担任高级前端工程师。 我擅长的技术栈是 Vue 和 React 生态，对前端工程化和性能优化有深入研究。最近两年主要负责公司的低代码平台建设，带领团队完成了从0到1的平台搭建。在这个项目中，我们解决了很多技术难题，比如大型JSON-Schema的渲染性能优化、自定义组件的实时预览等。通过这些优化，平台的页面渲染性能提升了60%，现在支持了超过100个业务团队的日常工作。 在技术深度上，我特别关注前端框架底层原理，写过几篇关于Vue3响应式系统的技术文章，并给社区贡献过几个PR。同时我也在公司内部主导了前端性能监控体系的建设，建立了从采集、分析到报警的完整链路。 选择字节跳动是因为被这里浓厚的技术氛围吸引，也认可公司在前端领域的技术实力。我希望能在更大的平台上，和优秀的团队一起解决更有挑战的问题。” 答题建议结构 基本信息与技术栈（15-20秒） 教育背景 工作年限 技术栈概览 核心项目经历（30-40秒） 1-2个最有代表性的项目 突出个人贡献和技术难点 技术深度展示（20-30秒） 专注的技术领域 技术产出或开源贡献 职业规划（10-15秒） 对岗位的理解 个人发展诉求 答题要点提示 时间控制在90秒左右 按照时间重要性安排内容比重 突出个人特色，避免平铺直述 适度准备，保持自然流畅 结合岗位特点，突出匹配度 2. 标准盒模型与IE盒模型的区别，如何通过CSS切换两种模型？ 题目要点 考察对CSS盒模型的深入理解，包括两种盒模型的区别、计算方式及其对布局的影响。同时也考察在工程实践中如何合理使用box-sizing，以及不同盒模型在响应式布局中的应用场景和性能影响。 参考答案 1.1 原理说明 两种盒模型的区别： 标准盒模型 (content-box)： • width/height 仅包含内容区域 • 实际占用空间 = width + padding + border + margin • 优点：精确控制内容区域大小 • 缺点：需要额外计算实际占用空间 ...