前端性能优化-原生 APP 优化

本文地址： 

一直做的 Web 开发，这一块没怎么接触过，不太懂..

1 内核介绍

1.1 IOS

1. UIWebView

   IOS 2 就出现了，排版布局能力强，但有以下问题

   1. 内存泄露，2. 极高内存峰值，3. touch delay 300ms，4. JS 运行性能和通信限制，5. IOS 12以后不再维护

2. WKWebView ?

   新一代 WebView 组件，内存开销小很多（1/3～1/4） ，在性能、稳定性、内存占用方面有很大提升，加载速度提升了一倍左右，更加细致地拆分了 UIWebViewDelegate 中的方法，允许 JS Nitro 库加载和使用，可以和 JS 直接互调函数，60FPS 刷新率，支持右滑返回手势，支持更多 HTML 属性，但也有不足

   不支持页面缓存，需要自己注入 Cookie，无法发送 POST 参数

1.2 Android

X5 内核：速度快（比系统 WebView 快 30+%），省流量（云端优化省流 20+%），更安全（24 小时内修复），更稳定（崩溃率低于 0.15%），兼容好（无系统内核的碎片化问题，更少的兼容性问题），体验优（夜间模式、适屏排版、字体设置等），功能全（H5、ES6 有更完整支持），更强大 （集成强大视频播放器，支持视频格式远多于 WebView），视频和文件格式的支持更多 ，防劫持

2 全局 WebView 优化

启动过程：打开 APP 时不会初始化浏览器内核。创建 WebView 实例时，才会启动浏览器内核（70-700ms），创建 WebVIew 基础框架

优化步骤：

1. 使用全局 WebView 进行优化

2. 在客户端刚启动时，就初始化一个全局的 WebView 待用并隐藏

3. 当用户访问了 WebView 时，直接使用这个 WebView 加载对应网页并展示

具体流程：

1. 在初始页面上创建全局 WebView

2. 根据页面跳转流向，确定目标网页

3. 利用全局 WebView，加载目标网页对应的基础文件（CSS、JS、图片等）

4. 向服务器发送请求，请求目标网页对应的网页数据

5. 将请求到的网页数据渲染到初始页面上

6. 运行状态切换为退出状态时，销毁 WebView

这样会减少首次打开 WebView 的时间，但是会增加额外的一点内存消耗

3 导航栏预加载

导航栏预加载：原来是在 WebView 加载完成之后才初始化，现在和 WebView 一起并行加载

4 打通登录态

原始：每次打开 H5 页面时请求接口，都判断 Cookie 里是否有登录态，没有就跳转登录页，APP 拦截登录页，进入原生登录，原生登录成功后，在浏览器写登录态 cookie

现在：由 APP 统一登录埋上登录态 Cookie，在 Cookie 有效期内无需再次请求登录接口

5 URL 预加载

以前是所有都准备好再请求页面，现在准备和请求同步进行，URL Load 和动画并行加载

准备工作如：是否定制化浏览器、第三方域名白名单处理、要拦截的域名列表（风控列表）、要拦截的 URL（特殊场景禁止支付）、来源展示、导航栏背景处理（分享 icon、客服 icon）、登录态业务处理等

6 提升加载进度条使用体验

以前采用系统自带进度条，现在模拟 WI-FI 下页面加载过程，让用户感觉页面加载变快了

如进页面就执行 0-60 的动画，加载 60% 之后，执行 60-80 的动画，加载 80% 后，执行 80-90 的动画，加载完成，进度条渐隐

7 JS-SDK 优化

原来：

Scheme：长度有限制

 login 

iframe：依赖 JS-SDK

现在：

webkit： 不依赖 JS-SDK 文件，直接调用

8 浏览器缓存策略

表中的无表示开箱即用 ，默认就是开启的，不是没有这个功能...

9 H5 离线化

9.1 离线包类型

1. 全局离线包：包含公共资源，可供多个应用共同使用

2. 私有离线包：只可以被某个应用单独使用

9.2 离线包架构

9.3 离线包下载

如果用户处于移动网络下，不会在后台下载离线包

如果当前用户点击 APP，离线包没有下载好，用户需要等待离线包下载好才能用

9.4 离线包运行模式

1. 请求包信息：从服务端请求离线包数据存储到本地数据库。离线包信息包括离线包的下载地址、版本号、加密/签名信息等

2. 下载离线包：把离线包从服务器下载到手机

3. 安装离线包：下载目录拷贝到手机安装目录

9.5 大厂离线包方案

美团 - LsLoader

腾讯 - Alloykit

阿里 - Hybrid

10 混合式开发

10.1 RN

应用商店发版问题和两端研发不同步问题的行业背景下，RN 出现了

技术优势：

技术

1. 代码共享，IOS、Android 甚至 H5 只用编写一套代码

2. 性能方面，与 Native 几乎相同

3. 动画方面，RN 提供了非常流畅的动画，因为在渲染之前代码已转换为原生视图

效率

1. 调试时无需每次代码变更都重新编译打包，可即时查看更改

2. IOS、Android 2 人力变更为 1 人力

发版

1. 支持热更新，不用每次发版都发布应用商店

2. 发版时间自由控制，支持 IOS、Android 两平台同一时间发布

底层内核

10.2 小程序

触手可及，用户扫一扫或搜一下就可以打开应用

用完即走，不用关心是否安装过多应用

社区活跃、组件丰富、学习曲线低

以下情况：1. 平台类产品，流量还不错，想要将流量输出给商家； 2. 多个 APP 想实现业务互通； 可以考虑使用小程序

技术优势：

• H5 相比 APP 开发门槛更低

• 优于 H5，接近 native 体验

• 相机、位置、网络、存储(小程序包本地存储)等丰富的原生能力

• 顶部下拉、搜索、扫码等入口，用完即走，简单方便

• 不用像 APP 那样下载，直接打开退出即可，支持热更新

底层内核

10.3 Flutter

拥有美好构建体验的便携式工具包，可以在屏幕的任何地方绘制像素

活跃度一般、组件不够丰富、学习曲线相对较高（Dart 语言）、但性能最好

考虑性能、业务面向多终端、团队人足够时可以使用

技术优势

• 编写一次，即可部署各终端：Web、IOS/Android、Mac/Linux/Windows、Fuchsia OS

• 底层使用 Skia 图形引擎，图形性能媲美原生应用

• 界面像一款全屏应用程序或 2D 游戏

• 速度快，使用本机 ARM 二进制文件，提前编译，不需要 JVM( JAVA 虚拟机)

底层实现