字节跳动

← 已是第一轮 · 返回本次面经 · 第 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 轮 · 返回本次面经 · 已是最后一轮 → 本轮要点： 本轮面试重点考察候选人的项目经验、技术深度和工程化思维。主要包括： 算法编程能力：通过合并有序数组等题目考察基本编程功底 项目经验：深入考察实习期间的技术选型、架构设计等关键决策 微前端技术：重点关注跨应用通信、样式隔离等核心问题 AI 应用实践：考察将新技术应用到工程实践中的能力 跨窗口通信：考察复杂场景下的技术方案设计能力 本轮共 15 道题。答案默认折叠，便于先自行作答。 1. 将两个升序数组合并为一个升序数组 题目要点 数组操作能力 双指针算法应用 原地修改的实现 边界条件处理 参考答案 这道题可以使用双指针从后向前遍历的方法，将较大的数放入nums1的末尾。代码实现如下： function merge(nums1, m, nums2, n) { let p1 = m - 1; // nums1的指针 let p2 = n - 1; // nums2的指针 let p = m + n - 1; // 合并后数组的指针 while (p2 >= 0) { // 只要nums2还有元素需要合并 if (p1 >= 0 && nums1[p1] > nums2[p2]) { nums1[p] = nums1[p1]; p1--; } else { nums1[p] = nums2[p2]; p2--; } p--; } return nums1; } 算法分析： 时间复杂度：O(m+n)，只需遍历一次 空间复杂度：O(1)，原地修改不需要额外空间 关键点：从后向前遍历避免覆盖nums1中的有效元素 2. 上一段实习在联想主要做的是什么产品？采用了什么技术架构？ 题目要点 这是一道主观性问题，面试官主要考察： 项目描述能力：是否能清晰表达项目背景、目标和价值 技术选型能力：是否有合理的技术决策思路 架构设计能力：是否理解系统设计的关键点 业务理解能力：是否深入理解业务需求和痛点 答题建议：建议从项目背景、技术架构、实现亮点和项目成果四个方面展开。重点说明项目的业务价值和技术特点，展现自己在项目中的贡献和成长。 参考答案 “在联想实习期间，我主要负责一个企业级IT资产管理平台的开发工作。这是一个服务于公司内部的中后台系统，日均活跃用户约2000人，管理着超过10万台设备资产。这个平台的核心价值在于提升IT资产管理效率，降低运维成本。 ...

← 已是第一轮 · 返回本次面经 · 第 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 • 优点：精确控制内容区域大小 • 缺点：需要额外计算实际占用空间 ...