关于移动互联网的跨平台技术演进，2024年最新干货面试教程视频

• Native 调用 JavaScript：
  JavaScript暴露一个对象如JSBridge给window，让Native能直接访问。

那么App内加载H5的过程是什么样的呢？

App打开H5过程

打开H5分为4个阶段：

1. 交互无反馈
2. 打开页面 白屏
3. 请求API，处于loading状态
4. 出现数据，正常展现

这四步，对应的过程如上图所以，我们可以针对性的做性能优化。

优缺点分析

下面，我们进行H5的优缺点分析：

优点

• 跨平台：只要有浏览器，任何平台都可以访问
• 开发成本低：生态成熟，学习成本低，调试方便
• 迭代速度快：无需审核，及时响应，用户可毫无感知使用最新版

缺点

• 性能问题：在反应速度、流畅度、动画方面远不及原生
• 功能问题：对摄像头、陀螺仪、麦克风等硬件支持较差

虽然H5目前还存在不足，但随着PWA、WebAssembly等技术的进步，相信H5在未来能够得到越来也好的发展。

小程序

2018年是微信小程序飞速发展的一年，19年，各大厂商快速跟进，已经有了很大的影响力。下面，我们以微信小程序为例，分析小程序的技术架构。

小程序跟H5一样，也是基于Webview实现。但它包含View视图层、App Service逻辑层两部分，分别独立运行在各自的WebView线程中。

View

可以理解为h5的页面，提供UI渲染。由WAWebview.js来提供底层的功能,具体如下：

• 消息通信封装为WeixinJSBridge
• 日志组件Reporter封装
• wx api（UI相关）
• 小程序组件实现和注册
• VirtualDOM，Diff和Render UI实现
• 页面事件触发

每个窗口都有一个独立的WebView进程，因此微信限制不能打开超过5个层级的页面来保障用户体验