字节-技术中台-校招 · 第 2 轮 · 二面
← 第 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 原理说明 ...