跨端技术面试题

基础题

1. 跨端方案主要分为哪几类？基础

参考答案：

跨端方案通常分为三类：

WebView 方案：在原生应用中嵌入浏览器内核，使用 Web 技术开发。代表：Cordova、Ionic、微信小程序。
原生渲染方案：用 JavaScript 编写业务逻辑，UI 通过 Bridge/JSI 调用原生组件渲染。代表：React Native、Weex、NativeScript。
自绘引擎方案：自己绘制 UI，不依赖平台原生组件。代表：Flutter、Unity。

对比：

WebView 开发成本低但性能弱；
原生渲染性能和体验接近原生，但依赖 Bridge；
自绘引擎一致性和性能最好，但需要自带渲染引擎，包体积较大。

评分维度：

能说出三类（40%）
能举例说明（30%）
能说明各自特点（30%）

2. 微信小程序的双线程模型是什么？基础

参考答案：

微信小程序采用双线程模型：

逻辑层（Service）：运行 JavaScript，处理数据、业务逻辑和框架 API 调用。
渲染层（View）：使用 WebView 渲染 WXML/WXSS，处理用户交互和动画。

两个线程通过 Native 层通信：

逻辑层数据变化后，通过 setData 序列化数据传递到渲染层。
用户事件从渲染层传递到逻辑层处理。

优势：逻辑与渲染隔离，JS 阻塞不会影响页面渲染，安全性更好。

劣势：跨线程通信有开销，setData 数据量过大或过于频繁会影响性能。

评分维度：

能说出两个线程（30%）
能说明各自职责（30%）
能说明通信方式与优缺点（40%）

3. React Native 的原理是什么？基础

参考答案：

React Native 用 JavaScript 编写组件和业务逻辑，通过 Bridge 或 JSI 把组件指令传递给原生端，原生端用真正的 iOS/Android 组件渲染。

旧架构：

JS 线程与原生线程通过 Bridge 异步通信，所有 UI 操作和数据传递都序列化为 JSON。

新架构（TurboModules/Fabric）：

JSI（JavaScript Interface）：允许 JS 直接调用 C++ 代码，支持同步调用。
Fabric：新的渲染层，支持更灵活的布局计算和并发渲染。
TurboModules：按需加载原生模块，提升启动速度。
Codegen：编译时生成类型安全的绑定代码。

评分维度：

能说明 JS 写逻辑、原生渲染（30%）
能提到 Bridge/JSI（30%）
能说明新架构改进（40%）

4. Flutter 的优势和劣势是什么？基础

参考答案：

Flutter 使用 Dart 语言和自绘引擎 Skia/Impeller 渲染 UI。

优势：

跨平台一致性最好，UI 完全由自己绘制。
性能接近原生，动画流畅。
热重载开发体验好。
丰富的内置 Widget 和表现力。

劣势：

包体积较大，因为包含渲染引擎。
Dart 生态相对 JS/TS 较小，第三方库不如 React Native 丰富。
平台特定功能需要写插件（MethodChannel）。
与原生混合开发成本较高。

选型：适合对 UI 一致性、动画性能要求高，且愿意投入学习成本的团队。

评分维度：

能说出 3 个以上优势（30%）
能说出 3 个以上劣势（30%）
能给出选型建议（40%）

5. Electron 中主进程和渲染进程有什么区别？基础

参考答案：

Electron 基于 Chromium 多进程架构：

主进程（Main Process）：
- 每个 Electron 应用只有一个主进程。
- 负责应用生命周期、创建窗口、访问系统原生能力（文件、通知、菜单等）。
- 不能直接访问 DOM。
渲染进程（Renderer Process）：
- 每个 BrowserWindow 对应一个渲染进程。
- 运行前端页面，负责 UI 渲染和用户交互。
- 通过 IPC 与主进程通信获取系统能力。

安全注意：渲染进程默认不应直接访问 Node.js API，需通过 contextIsolation 和 preload 脚本进行安全桥接。

评分维度：

能区分两种进程（40%）
能说明职责（30%）
能说明 IPC 通信与安全隔离（30%）

进阶题

6. Taro 和 UniApp 有什么区别？进阶

参考答案：

维度	Taro	UniApp
开发语法	React/Vue/Nerv 语法	Vue 语法为主
目标平台	微信小程序、H5、RN、鸿蒙等	小程序、H5、App（含 iOS/Android）
生态	京东开源，社区活跃	DCloud 维护，插件市场丰富
编译方式	编译为各端代码	编译为各端代码
厂商绑定	较低	较高，依赖 DCloud 工具链

选型：

团队熟悉 React 或需要同时支持 RN → Taro。
团队熟悉 Vue、希望快速开发多端 App/小程序 → UniApp。

评分维度：

能对比语法（30%）
能对比目标平台（30%）
能给出选型建议（40%）

7. 跨端性能优化有哪些通用手段？进阶

参考答案：

跨端性能优化通用手段：

减少渲染层级：避免深层嵌套，减少节点数量。
虚拟列表：长列表只渲染可视区域。
图片优化：懒加载、压缩、WebP、响应式图片。
减少跨线程/跨语言通信：批量传输数据，避免频繁 Bridge/JSI 调用。
合理分包和预加载：小程序分包、路由懒加载。
减少 setData 数据量（小程序）：只传递变化的数据。
避免复杂动画在 JS 线程执行：使用原生动画或 CSS 动画。
使用新架构：React Native 新架构、小程序 Skyline 渲染引擎。

评分维度：

能说出 4 种以上方法（40%）
能说明原理（30%）
能结合具体方案说明（30%）

8. 小程序的渲染流程是怎样的？进阶

参考答案：

小程序渲染流程：

开发者编写 WXML/WXSS/JS/JSON。
小程序框架编译生成渲染层和逻辑层可执行代码。
逻辑层处理业务数据，生成虚拟 DOM。
框架通过 Diff 算法比较前后虚拟 DOM。
差异数据通过 Native 层传递到渲染层。
渲染层更新真实 DOM（WebView）。

关键：

逻辑层与渲染层分离，通信是性能瓶颈。
setData 是开发者可控的主要通信入口，应尽量减少调用次数和数据量。

评分维度：

能说出 4 个以上步骤（40%）
能说明逻辑层和渲染层协作（30%）
能提到 setData 与 Diff（30%）

9. 跨端技术选型的关键维度有哪些？进阶

参考答案：

跨端选型应综合考虑：

目标平台：小程序、iOS、Android、H5、桌面端。
性能要求：动画流畅度、长列表、启动速度。
团队技术栈：React、Vue、Dart、原生能力。
生态成熟度：第三方库、社区活跃度、文档质量。
维护成本：升级成本、Bug 修复、招聘难度。
包体积限制：尤其移动端和小程序对包大小敏感。
原生能力需求：是否需要调用蓝牙、摄像头、传感器等。
交付周期：POC 验证时间、团队学习成本。

评分维度：

能说出 4 个以上维度（40%）
能结合实际分析（30%）
能给出决策思路（30%）

10. WebView 跨端方案有哪些优缺点？进阶

参考答案：

WebView 方案是在原生应用中嵌入 Web 页面实现跨端。

优点：

开发成本低，复用 Web 技术栈和现有工程化能力。
更新灵活，可通过 H5 服务端更新，无需发版。
跨平台一致性好，一次开发多端运行。
调试方便，可直接用浏览器 DevTools。

缺点：

性能不如原生，复杂动画、长列表体验差。
原生能力依赖 JSBridge，调用成本高。
体验与原生有差距，如页面切换、手势响应。
离线能力、内存占用弱于原生。

适用场景：内容展示型、快速迭代、对性能要求不高的业务。

评分维度：

能说出 3 个优点（30%）
能说出 3 个缺点（30%）
能说明适用场景（40%）

高级题

11. 如何设计一个跨端应用的公共层？深入

参考答案：

跨端公共层目标是“一套业务代码，多端运行”，设计要点：

抽象通用能力：网络请求、本地存储、分享、扫码、定位、日志等。
统一 API 接口：业务代码调用统一接口，如 sdk.request()、sdk.storage.set()。
平台适配层：在底层根据运行平台调用对应实现，业务代码不直接依赖平台 API。
条件编译/运行时判断：用 process.env.TARO_ENV 或运行时 isWeb、isMiniProgram 区分平台。
Design Token 统一视觉：保证多端视觉一致。
跨端组件库：抽象公共 UI 组件，各端分别实现或编译适配。
错误处理与降级：某端不支持的能力给出友好降级。

// 统一 API 示例
interface Storage {
  get(key: string): Promise<string | null>;
  set(key: string, value: string): Promise<void>;
}

// 各端实现
const webStorage: Storage = { /* localStorage 实现 */ };
const miniProgramStorage: Storage = { /* wx.getStorage 实现 */ };

export const storage = isWeb ? webStorage : miniProgramStorage;

评分维度：

能说出抽象通用能力（25%）
能说明平台差异处理（30%）
能提到组件库和 Token（20%）
有代码或架构示例（15%）
考虑降级方案（10%）

12. 跨端开发中最大的挑战是什么？深入

参考答案：

跨端开发的核心挑战：

平台差异：API、组件、样式、生命周期在各端表现不同。
性能鸿沟：WebView 和原生渲染在复杂场景下体验差距明显。
调试复杂：需要同时调试多端、多环境、多线程。
原生能力受限：部分能力需要写原生插件或桥接。
包体积控制：跨端框架自带运行时，容易超出包大小限制。
UI/UX 一致性：平台规范不同，完全统一可能牺牲体验。
团队技术栈要求：需要同时掌握 Web、原生、框架原理。

应对思路：明确多端一致性边界，建立公共层和适配层，制定平台差异处理规范。

评分维度：

能说出 4 个以上挑战（40%）
能分析原因（30%）
能给出应对思路（30%）

13. React Native 新架构解决了什么问题？深入

参考答案：

旧架构问题：

Bridge 异步通信：JS 与原生通过 Bridge 异步传递 JSON，效率低、延迟高。
启动时加载所有原生模块：影响启动速度。
线程模型限制：JS 单线程处理 UI 逻辑，复杂任务易卡顿。

新架构改进：

JSI：支持 JS 直接调用 C++，实现同步调用，减少序列化开销。
Fabric：新渲染层，支持 Yoga 布局并允许更灵活的并发渲染。
TurboModules：原生模块按需加载，提升启动性能。
Codegen：编译时生成类型安全的绑定代码，减少运行时错误。

效果：启动更快、交互更流畅、类型更安全、内存占用更低。

评分维度：

能说出旧架构问题（25%）
能说明 JSI/Fabric/TurboModules（40%）
能说明改进效果（25%）
了解 Codegen 作用（10%）

14. 小程序如何实现性能优化？深入

参考答案：

小程序性能优化重点：

减少 setData 调用次数和数据量：合并多次 setData，只传变化字段。
使用自定义组件：隔离渲染范围，减少整体 Diff 范围。
图片懒加载和压缩：使用 lazy-load，控制图片尺寸。
分包加载：主包只保留启动必要页面，其他放入分包。
避免复杂动画：优先使用 CSS 动画，减少 JS 驱动动画。
减少 DOM 层级：节点越深，渲染和 setData 成本越高。
使用 Worker：复杂计算放入 Worker，避免阻塞逻辑层。
Skyline/GL 渲染：新渲染引擎可提升动画和滚动性能。

评分维度：

能说出 4 种以上方法（40%）
能重点说明 setData 优化（30%）
能说明分包作用（30%）

15. 你如何看待 Flutter 和 React Native 的未来？深入

参考答案：

Flutter 和 React Native 都是主流跨端方案，定位略有不同：

Flutter：自绘引擎，UI 一致性和性能最好，适合对视觉、动画、品牌一致性要求高的场景。劣势是生态和包体积。
React Native：原生渲染，生态成熟，适合已有 React 技术栈、需要快速迭代的团队。新架构持续提升性能。

未来趋势：

两者都会持续发展，各自生态更加成熟。
WebAssembly、Kotlin Multiplatform、SwiftUI/Jetpack Compose 跨端化可能带来新变量。
选择不应只看技术热度，而应结合团队能力、业务场景和长期维护成本。

评分维度：

能客观对比两者（40%）
能说明适用场景（30%）
能展望趋势并强调选型理性（30%）

补充题

16. 什么是 Tauri？相比 Electron 有什么优势？基础

参考答案：

Tauri 是用 Web 前端 + Rust 后端开发桌面应用的框架。它允许开发者用熟悉的 Web 技术构建跨平台桌面应用，后端由 Rust 提供系统能力。

相比 Electron 的优势：

包体积小：Tauri 应用通常几 MB，Electron 通常上百 MB。
安全性更好：Rust 的内存安全特性，默认最小权限设计。
性能更好：后端逻辑用 Rust 执行，系统调用更高效。
前端技术栈自由：可用任意前端框架。

劣势：

Rust 学习成本。
生态不如 Electron 成熟。
原生 API 丰富度暂时不如 Electron。

评分维度：

能解释 Tauri（40%）
能对比 Electron 优势（40%）
能提到劣势（20%）

17. 跨端应用如何进行测试？基础

参考答案：

跨端应用测试应分层进行：

公共逻辑单元测试：平台无关的业务逻辑、工具函数用 Jest/Vitest 测试。
各端分别 E2E 测试：
- H5：Playwright/Cypress。
- 小程序：微信开发者工具自动化测试、Miniprogram-automator。
- RN/Flutter：Appium、Maestro、Flutter integration_test。
视觉回归测试：关键页面和组件截图对比。
真机/模拟器测试：验证性能、手势、原生能力。
兼容性测试：不同机型、系统版本、屏幕尺寸。
性能测试：启动时间、内存、CPU、FPS、包体积。

跨端测试的特殊性：需要同时维护多套测试环境和工具链，建议把公共逻辑尽量下沉到可复用层。

评分维度：

能说出 3 种以上测试方式（40%）
能说明跨端测试的特殊性（30%）
能提到具体工具（30%）

18. 小程序的双线程模型有什么优缺点？基础

参考答案：

优点：

逻辑与渲染分离，JS 执行不会阻塞页面渲染。
渲染层运行在受限环境，安全性更好，防止恶意 JS 直接操作 DOM。
框架可以更好地控制性能和稳定性。

缺点：

跨线程通信有开销，频繁 setData 会影响性能。
setData 数据量受限，过大可能报错或卡顿。
开发者无法直接操作 DOM，灵活性降低。
调试时需要同时关注逻辑层和渲染层。

评分维度：

能说出优缺点各 2 个以上（40%）
能说明通信开销（30%）
能说明对开发者的影响（30%）

19. 跨端方案中如何处理原生能力差异？基础

参考答案：

处理原生能力差异的常见方法：

抽象统一 API：如 sdk.scan()、sdk.getLocation()，业务代码不直接调用平台 API。
运行时平台判断：通过 isWeb、isMiniProgram、isRN 等变量选择实现。
条件编译：Taro/UniApp 支持 #ifdef 按平台编译不同代码。
插件机制：为不同平台编写插件，统一注册到公共层。
降级方案：某端不支持时给出友好提示或替代实现。
原生模块桥接：RN/Flutter 通过原生模块暴露能力，统一封装后给 JS/Dart 调用。

评分维度：

能说出 3 种以上方法（40%）
能说明统一 API 层（30%）
能说明条件编译与降级（30%）

20. 如果让你为一个新项目选择跨端方案，你会怎么选？基础

参考答案：

选型步骤：

明确目标平台和性能要求：是否需要 App、小程序、H5、桌面端。
评估团队技术栈：React、Vue、Dart、原生开发能力。
调研方案生态和成熟度：社区活跃度、文档、第三方库、大厂背书。
做技术验证（POC）：用真实业务场景验证性能、开发效率、原生能力。
评估长期维护成本：升级成本、招聘、社区可持续性。
与团队达成共识：选型是团队决策，不是个人偏好。

示例：

微信小程序为主 → Taro/UniApp。
跨平台 App + 高 UI 要求 → Flutter。
已有 React 团队 + 快速迭代 → React Native。
桌面工具 + Web 技术栈 → Electron/Tauri。

评分维度：

能说出选型步骤（40%）
能结合实际分析（30%）
能给出具体建议（30%）

21. 鸿蒙 HarmonyOS 中 Ability 的 Stage 模型与元服务有什么区别？基础

参考答案：

Stage 模型：

是 HarmonyOS 推荐的应用开发模型，强调"AbilityStage + Ability"的组件化结构。
UIAbility 负责带界面的页面生命周期管理，ExtensionAbility 负责后台能力扩展（如服务、数据共享）。
相比旧的 FA（Feature Ability）模型，Stage 模型更贴近现代移动操作系统，支持多实例、多窗口、跨设备迁移。

元服务（Atomic Service）：

是一种免安装、可流转的轻量服务形态，用户无需在应用市场下载完整 App。
通过服务卡片（Widget）提供入口，触发后可以拉起完整页面或完成特定任务。
生命周期由系统管理，适合高频、轻量、场景化的服务（如航班提醒、快递查询）。

区别：

Stage 模型是应用内部架构模型；元服务是一种应用形态/分发方式。
普通应用可以包含多个 Ability；元服务通常更轻量，强调"即用即走"。
元服务对包体积、启动速度、权限使用有更严格限制。

评分维度：

能解释 Stage 模型（35%）
能解释元服务（35%）
能说明两者关系与区别（30%）

22. Kotlin Multiplatform 与 Flutter / React Native 的核心差异是什么？什么场景下你会选择 KMP？基础

参考答案：

核心差异：

维度	KMP	Flutter	React Native
UI 策略	原生 UI（SwiftUI/Jetpack Compose）	自绘 UI（Skia/Impeller）	原生组件桥接
共享范围	业务逻辑、数据层、网络层	UI + 逻辑	UI + 逻辑
性能	原生	接近原生	接近原生
包体积	小	大	中等
学习成本	Kotlin + 双端原生	Dart + Flutter	JS + 原生桥接
生态成熟度	快速增长	丰富	非常丰富

选择 KMP 的场景：

已有成熟原生应用，希望渐进式复用业务逻辑；
对原生 UI 体验要求极高，不愿意接受跨端渲染差异；
团队具备 Kotlin 与双端原生开发能力；
业务逻辑复杂（金融计算、规则引擎、协议解析），重复维护成本高；
不希望引入庞大的跨端渲染引擎，对包体积敏感。

评分维度：

能对比 UI 策略和共享范围（40%）
能说明性能/包体积/生态差异（30%）
能给出具体选型场景（30%）

23. 小程序 Skyline 渲染引擎相比传统 WebView 有哪些改进？适用哪些场景？基础

参考答案：

Skyline 改进：

更原生的渲染管线：不再完全依赖 WebView 排版，而是使用更接近原生视图的渲染流程，动画和滚动更流畅。
Worklet 动画：支持在渲染线程直接执行动画逻辑，避免跨线程通信带来的延迟和丢帧。
手势系统：提供更完善的手势识别能力，支持拖拽、缩放、滑动等复杂交互。
页面转场与共享元素动画：可以实现类似原生 App 的转场效果。
更低的内存与层级占用：渲染节点更少，启动速度更快。

GL 渲染引擎：

基于 WebGL/GPU，适合复杂 2D/3D 图形、实时数据可视化、小游戏、视频特效。

适用场景：

复杂动画、长列表、视频、游戏化小程序；
对启动速度和帧率要求高的电商、内容、品牌小程序；
需要页面转场、共享元素动画的高级交互场景。

注意事项：

需要基础库版本支持，需做好降级方案；
部分 WebView 特性或第三方库可能不兼容；
调试工具与文档仍在完善。

评分维度：

能说出 3 个以上 Skyline 改进（40%）
能说明 Worklet/GL 作用（30%）
能说明适用场景与兼容性注意（30%）

24. 如何设计一个跨端公共层来屏蔽微信小程序、鸿蒙 App、H5 的平台差异？基础

参考答案：

设计目标：业务代码调用统一接口，底层根据平台自动适配。

分层架构：

业务层
  └── 调用 sdk.request / sdk.storage / sdk.location / sdk.share
公共层（Cross-Platform SDK）
  ├── 统一接口定义（TypeScript/Kotlin）
  ├── 能力探测（capability detection）
  └── 降级策略
平台适配层
  ├── 微信小程序实现（wx.request / wx.getStorage / wx.getLocation）
  ├── 鸿蒙实现（@ohos.net.http / preferences / geoLocation）
  ├── React Native 实现（fetch / AsyncStorage / Geolocation）
  └── H5 实现（fetch / localStorage / navigator.geolocation）
原生实现层
  └── 各端原生代码、插件、Ability

关键设计点：

统一接口：定义 request(url, options)、storage.get(key) 等通用 API。
运行时平台判断：通过 isMiniProgram、isHarmony、isRN、isH5 选择实现。
依赖注入/工厂模式：新平台只需实现接口并注册，业务代码零改动。
能力探测：调用前检测当前平台是否支持某能力，不支持时给出降级方案。
错误处理统一：将各端错误码映射为统一错误类型。
Design Token 与组件库：视觉层也纳入公共层管理，保证多端一致。

示例代码：

// sdk/storage.ts
interface IStorage {
  get(key: string): Promise<string | null>;
  set(key: string, value: string): Promise<void>;
}

class WebStorage implements IStorage { /* localStorage */ }
class MiniProgramStorage implements IStorage { /* wx.getStorage */ }
class HarmonyStorage implements IStorage { /* preferences */ }

export const storage = isHarmony
  ? new HarmonyStorage()
  : isMiniProgram
  ? new MiniProgramStorage()
  : new WebStorage();

评分维度：

能画出分层架构（30%）
能说明统一接口与平台适配（30%）
能提到能力探测与降级（20%）
有代码或设计示例（20%）

25. 为一个新项目做跨端架构选型，你会如何评估鸿蒙、Flutter、KMP、Tauri 等方案？基础

参考答案：

选型步骤：

明确目标平台与优先级：是否需要鸿蒙、iOS、Android、小程序、H5、桌面端？各端优先级如何？
明确性能与体验要求：是否需要接近原生的动画？是否对包体积敏感？
评估团队技术栈：团队熟悉 React、Vue、Dart、Kotlin、ArkTS 还是原生？
评估生态与成熟度：第三方库、社区活跃度、大厂背书、招聘难度。
做技术验证（POC）：用真实业务场景验证性能、开发效率、原生能力。
评估长期维护成本：升级成本、Bug 修复、平台政策风险。

各方案定位：

鸿蒙 ArkUI：必须进入华为生态时的首选，适合分布式、多设备协同。
Flutter：从零开始、高 UI 一致性、动画要求高的跨平台 App。
KMP：已有原生团队、希望复用业务逻辑、保持原生 UI 体验。
Tauri：轻量桌面工具、对包体积和安全敏感。
Electron：复杂桌面工具、需要完整 Node 生态。
Taro/UniApp：以小程序和 H5 为主，快速多端覆盖。

决策示例：

华为生态 + 多设备协同 → 鸿蒙 ArkUI + 元服务。
高 UI 一致性新 App → Flutter。
已有双端原生 + 复用逻辑 → KMP。
轻量桌面工具 → Tauri。

评分维度：

能说出系统选型步骤（30%）
能准确评估各方案定位（40%）
能给出具体决策示例（30%）

领域编号：E08 跨端技术
最后更新：2026-06-24

跨端技术面试题 ​

基础题 ​

进阶题 ​

高级题 ​

补充题 ​

跨端技术面试题

基础题

进阶题

高级题

补充题