2025-08-19 知乎面试

一、项目深度考察
  1. 对于跨端框架了解多少，比如常见的Taro，RN，hybrid，flutter等

京东面试里已经记录了Taro，这里重点讲解RN和hybrid

一、hybrid app（混合应用）

核心原理：hybrid app的本质是一个内置了浏览器引擎（也叫webview）的原生应用外壳。应用的大部分界面（主要是跟业务相关的部分）是通过web技术开发的，然后这个网页被加载到原生应用的webview中显示。 关键技术点：

  1. webview：原生平台（iOS的WKwebview，Android的webview）提供的组件，用于渲染网页。
  2. JS Bridge（桥梁）：这是Hybrid技术的灵魂。它建立了web端和原生端之间的双向通信。
    1. web=>原生端：JS可以通过Bridge调用原生设备API（如相机，GPS，蓝牙，文件系统等）。这通常通过原生端拦截webview的url请求或向JS上下文注入对象来实现。
    2. 原生端=>web：原生端可以通过webview的方法执行JS代码，从而传递数据或者触发页面渲染等。

优点：

  1. 开发效率高：使用熟悉的web技术栈，开发速度快，一套代码多端运行。
  2. 热更新：web资源可以放在服务器上，直接更新，无需经过应用商店审核，迭代灵活
  3. 生态成熟：web生态系统非常强大和成熟 缺点：
  4. 性能瓶颈：
    1. 渲染性能：webview的渲染性能不远不如原生控件，尤其在复杂动画，长列表滚动，体验会有明细差距。
    2. JS执行性能：大量JS计算会阻塞线程，导致卡顿。
  5. 体验差距：
    1. UI和交互是web风格，难以做到和原生百分之一百的体验（简单来说就是不像一个APP）
  6. 能力依赖：所有的原生功能都依赖Bridge和插件，复杂功能的实现和调试比较麻烦
一、React Native（RN）

核心原理：RN的思路比Hybrid更进阶。它不是通过webview渲染，而是通过JS虚拟机解析JS代码，然后通过Bridge与原生端通信，最终由原生平台来渲染真正的原生UI组件。 关键技术点：

  1. JS线程：你的React代码在这里执行
  2. 原生线程：原生UI管理和渲染发生在这里
  3. Bridge（桥梁）：同样是核心。JS线程和原生线程通过一个一步的，序列化的Bridge进行通信。
    1. JS线程会把UI描述和命令序列化后通过Bridge传递给原生线程。
    2. 原生线程接收到信息后，解析并调用对应的原生组件（如UIview，TextView）进行渲染。
    3. 原生端的事件（点击，滑动）也通过Bridge反向传递回JS线程。

所以，用户看到的是真正的原生控件，而不是网页的模拟。这是RN和Hybrid最根本的区别。

优点：

  1. 原生体验：由于使用原生组件，UI的观感和流畅度比Hybrid好狠多，更接近原生应用。
  2. 开发效率：依然使用React和JS的技术栈，热重载功能极大提高了开发效率。
  3. 性能优于Hybrid：渲染由原生端负责性能webview提升显著。 缺点：
  4. Bridge瓶颈：所有的JS和原生端的通信都需要经过异步的Bridge。频繁，大量的数据交互（复杂手势，高速滚动）会成为性能瓶颈，导致丢帧。
  5. Bridge的异步性：通信是异步的，但想要使用非内置的原生功能，仍然需要编写原生代码模块（Native modules），对开发者有原生技能要求。
  6. 包体积：需要集成RN框架本身，导致应用包比纯原生应用大。
RN 的新架构（New Architecture）

为了解决 Bridge 的性能瓶颈，RN 团队正在推行重磅的新架构： JSI (JavaScript Interface)： 取代旧的 Bridge。JSI 允许 JS 对象和原生对象直接相互引用和调用，实现同步通信，性能大幅提升。 Fabric： 新的渲染系统，直接利用 JSI 的能力来优化UI渲染流程。 TurboModules： 新的原生模块系统，按需懒加载，启动更快。 新架构将彻底解决 RN 的历史包袱，使其性能无限接近原生。

三、flutter

核心原理：自绘引擎。它使用Dart语言编写，完全绕过了原生控件。flutter引擎自己实现了一套UI组件库（widgets），并直接通过图形引擎绘制到屏幕画布上。 优点：

  1. 高性能：由于省去了Bridge通信和原生组件的转换环节，性能非常高，理论上可以达到120fps
  2. 极致的跨端一致性：UI在不同平台上看起来完全一样，因为渲染不依赖平台。
  3. 丰富的UI组件：自带大量精美，可高度自定义的Material和Cupertino风格组件。 缺点
  4. Dart语言：需要学习一门新的语言。
  5. 包体积：引擎本身较大，会导致安装包体积明显增加。
  6. 生态：虽然增长迅速，但是原生生态（第三方库）丰富度略逊于RN和web
  1. 对于SSR了解多少？
    1. 更优的 SEO（搜索引擎优化） 问题： 搜索引擎爬虫（如 Googlebot）在处理纯 CSR 应用时，可能无法等待或执行 JavaScript 来获取完整内容，导致页面无法被正确索引。 解决方案： SSR 直接提供完整的 HTML，爬虫可以立即看到所有内容，极大改善了页面的可索引性。
    2. 更快的首屏加载时间（FCP - First Contentful Paint） 问题： CSR 应用在首次加载时，用户会先看到一个白屏，必须等待所有 JS 下载、解析和执行完毕后才能看到内容。在网络慢或设备性能差的情况下，体验很糟糕。 解决方案： SSR 让用户能立即看到一个已渲染的页面（尽管可能还不可交互），极大地提升了感知上的加载速度，改善了用户体验。
    3. 对低性能设备更友好 渲染工作在强大的服务器上完成，减轻了客户端设备的计算压力。

results matching ""

    No results matching ""