字节跳动

← 第 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 轮 · 返回本次面经 · 已是最后一轮 → 本轮要点： 本次面试主要考察小程序、前端基础及算法等方面的知识。 本轮共 17 道题。答案默认折叠，便于先自行作答。 1. 讲一下你的小程序项目 题目要点 这是一个典型的主观型问题，没有唯一的标准答案。面试官主要考察候选人的项目经验、技术选型能力、问题解决能力以及对小程序生态的整体理解。 答题时建议围绕项目背景、个人职责、技术挑战与解决方案、项目成果与思考等方面展开，体现出系统性和条理性。 参考答案 在我的某某项目中，我主要负责开发一个基于微信小程序的某某功能模块，比如一个校园服务小程序，其中我负责了课程表、成绩查询以及校园活动发布的功能。 项目启动之初，我们对需求进行了详细的分析。我选择了小程序作为技术栈，主要是考虑到其轻量级、无需下载安装的特性，能够快速触达用户，并且微信生态提供了丰富的API支持，例如微信支付、地理位置等，非常适合我们校园服务的场景。在技术选型上，我们使用了原生小程序开发模式，结合了小程序自定义组件的能力，将课程表、活动列表等通用UI和逻辑封装成可复用组件，大大提高了开发效率和代码的可维护性。 在开发过程中，我遇到了一些挑战。例如，课程表数据的展示，由于涉及到大量的时间和格子计算，以及复杂的状态管理，我采用了组件化的方式来解耦视图和逻辑。为了避免频繁调用setData导致性能问题，我仔细规划了数据结构，并通过局部更新和事件代理的方式，将数据更新的粒度控制到最小，确保了界面的流畅性。此外，在处理校园活动图片上传和展示时，也遇到了图片内存飙升的问题，我通过启用lazy-load属性，并对图片进行后端压缩和CDN分发，有效解决了内存占用过高的问题，提升了用户体验。在保证安全性的前提下，对于用户敏感信息，我们严格遵循小程序的加密存储和传输规范。 项目上线后，用户反馈良好，尤其是加载速度快、操作流畅得到了肯定。通过这个项目，我不仅深化了对小程序双线程架构、生命周期、组件化等核心概念的理解，也锻炼了我在实际项目中解决复杂性能问题的能力。同时，也让我认识到在项目开发中，前期的技术选型、架构设计以及对潜在性能瓶颈的预判都是至关重要的。 2. 小程序的架构组成 题目要点 宿主环境: 了解小程序运行的载体，如微信、支付宝等App提供的运行环境。 双线程模型: 掌握小程序的逻辑层和视图层分离，通过异步通信机制进行数据交换。 组件系统: 熟悉小程序内置组件和自定义组件的构成。 数据层: 理解小程序数据管理和更新机制。 小程序生命周期: 熟悉小程序应用和页面的生命周期函数。 参考答案 1.1 原理说明 宿主环境: 小程序运行在一个特定的宿主环境中，这个环境由微信、支付宝等App提供。它为小程序提供了运行所需的API、渲染能力、文件系统等。 双线程模型: 小程序采用双线程模型，即逻辑层和视图层分别运行在不同的线程中。 逻辑层: 运行在JSCore（或V8引擎）中，负责处理业务逻辑、数据请求、数据处理等，使用JavaScript编写。它不直接操作DOM。 视图层: 负责渲染页面，使用WebView（或独立的渲染引擎）渲染WXML和WXSS。 通信机制: 逻辑层和视图层之间通过Native层进行异步通信。视图层将用户操作（如点击、输入）传递给逻辑层，逻辑层处理后将数据变化通知视图层进行更新。 组件系统: 小程序提供了一套丰富的基础组件，如view、text、image等，开发者也可以基于这些基础组件创建自定义组件，实现模块化开发。 数据层: 小程序的数据管理主要通过Page.prototype.data和this.setData进行。数据变化后，通过双线程通信机制同步到视图层，触发视图更新。 1.2 核心用法 + 示例代码 在小程序中，开发者主要通过JavaScript编写逻辑层代码，WXML构建页面结构，WXSS定义页面样式。 app.js 定义小程序的全局逻辑，app.json 进行全局配置，app.wxss 定义全局样式。 每个页面由 .js（逻辑）、.json（配置）、.wxml（结构）、.wxss（样式）组成。 示例：页面数据更新 // page.js Page({ data: { message: 'Hello Mini Program!' }, onLoad: function() { setTimeout(() => { this.setData({ message: 'Data Updated!' }); }, 2000); } }); 这种架构分离了业务逻辑和页面渲染，提高了性能和安全性，也方便平台对小程序进行管控。 1.3 常见误区或面试陷阱 误区: 认为小程序是基于浏览器内核直接运行的H5页面。实际上，小程序运行在独立的宿主环境，有其特定的渲染机制和API。 误区: 将双线程通信理解为同步通信。实际上是异步通信，需要注意数据同步的时序问题。 陷阱: 不清楚小程序无法直接操作DOM的原因，本质上是为了安全和性能考量，避免开发者直接对渲染层进行复杂操作，影响性能和用户体验。 3. 小程序和 H5 在开发和使用上有哪些主要的区别和优势？ 题目要点 运行环境: 区分小程序和H5的运行载体和能力限制。 开发模式: 掌握两种技术栈的开发流程和工具链。 性能: 对比加载速度、运行流畅度等方面的差异。 功能和权限: 了解各自能调用的系统能力和接口。 用户体验: 分析用户感知到的流畅性、便捷性。 分发和推广: 比较获取用户、传播的难易程度。 参考答案 1.1 原理说明 ...

← 第 1 轮 · 返回本次面经 · 已是最后一轮 → 本轮要点： 本次面试主要考察前端基础（CSS布局、JavaScript原型链）、React框架深入理解（虚拟DOM、性能优化）、设计模式应用以及算法能力。 本轮共 13 道题。答案默认折叠，便于先自行作答。 1. 实现一个三栏布局，左右两侧固定宽度，中间区域自适应 题目要点 面试官出这道题主要想确认哪些知识维度？ 考生对CSS布局（如Flexbox, Grid, 浮动, 定位, 表格布局等）的掌握程度。 考生如何处理不同元素之间的空间分配和自适应能力。 该题所考知识点中有哪些高频实际应用点？ 页面整体布局，如经典后台管理系统布局（侧边栏固定，内容区自适应）。 组件内部布局，如卡片、列表项中固定图标/按钮，内容区域自适应。 参考答案 1.1 原理说明 三栏布局是一种常见的网页布局方式，其核心在于实现左右两边固定宽度，中间内容区域根据可用空间自适应。这要求布局方案能够灵活处理流体宽度和固定宽度元素的共存，并且能够正确处理元素之间的堆叠和清除浮动等问题。不同的CSS布局技术提供了不同的实现原理和特性，选择合适的方案取决于兼容性要求、布局复杂度和维护成本。 1.2 核心用法 + 示例代码 以下是几种实现三栏布局的常见方法，并说明其原理和适用场景： 1.2.1 Flexbox 布局 原理： Flexbox (弹性盒子) 是一种一维布局模式，它在父容器中管理子项的分布和对齐。通过设置主轴和交叉轴，可以非常灵活地控制子元素的排列。 使用场景： 现代浏览器环境下的首选布局方式，适用于需要灵活对齐、空间分配的场景。 示例代码： <div class="container-flex"> <div class="left">Left</div> <div class="center">Center</div> <div class="right">Right</div> </div> .container-flex { display: flex; /* 开启Flex布局 */ } .left, .right { width: 200px; /* 左右固定宽度 */ flex-shrink: 0; /* 防止收缩 */ } .center { flex-grow: 1; /* 中间区域自适应，占据剩余空间 */ } 优势： 代码简洁，语义化好，对齐和分配空间非常方便。 1.2.2 Grid 布局 ...