Ionic2 v2.1.3应用在Android 4.4.2运行缓慢，求优化方案

我之前维护Ionic 2项目时，也碰到过Android 4.4.2设备上运行卡顿的问题——这个版本的系统WebView性能确实拉胯。结合你的技术栈（Ionic 2.1.3 + TypeScript 2.3.4），给你几个亲测有效的优化方案，按优先级排序：

这是提升Android 4.4性能最立竿见影的办法。Android 4.4自带的WebView基于Chrome 30左右的内核，对现代JS和CSS特性支持差，执行效率极低。Crosswalk会把一个较新的Chrome内核打包进你的应用，直接解决WebView性能瓶颈。

安装命令很简单：

ionic plugin add cordova-plugin-crosswalk-webview

⚠️ 注意：安装后APK体积会增加约20MB，但换来的流畅度提升完全值得，而且只影响Android平台。

在项目的platforms/android/app/src/main/AndroidManifest.xml文件里，给<application>标签加上硬件加速配置：

<application
    ...
    android:hardwareAccelerated="true">

硬件加速能让系统用GPU来渲染UI，减少CPU负载，对动画和页面滚动的流畅度帮助很大。如果全局开启出现兼容性问题，也可以单独给主Activity设置这个属性。

• 给页面组件设置ChangeDetectionStrategy.OnPush，减少不必要的变更检测次数：

  import { ChangeDetectionStrategy, Component } from '@angular/core';
  
  @Component({
    ...
    changeDetection: ChangeDetectionStrategy.OnPush
  })
  export class MyPageComponent {}
  

• 避免在ngDoCheck、ngOnChanges这类高频触发的生命周期钩子中执行复杂逻辑。
• 列表渲染用ion-virtual-scroll代替普通的ion-list，尤其是数据量大的时候，虚拟滚动只会渲染当前可见区域的DOM元素，极大减轻渲染压力。

永远用生产模式构建给用户的安装包，执行以下命令：

ionic build android --prod --release

这个命令会做代码压缩、混淆、Tree Shaking，移除所有调试相关的代码，大幅减小JS体积，提升代码执行效率。开发模式下的很多调试工具和日志会严重拖慢旧设备的运行速度。

Ionic默认的动画在旧WebView上性能开销很高，如果不是必须的，可以全局禁用动画：

// app.module.ts
import { IonicModule } from 'ionic-angular';

@NgModule({
  imports: [
    IonicModule.forRoot(MyApp, {
      animate: false,
      scrollAssist: false, // 如果不需要滚动辅助也可以关掉
      autoFocusAssist: false
    })
  ]
})
export class AppModule {}

也可以针对单个页面或组件禁用动画，适配你的业务需求。

• 压缩所有图片资源，尽量使用WebP格式（Android 4.4+原生支持WebP），减少图片加载时间和内存占用。
• 移除项目中未使用的第三方库和静态资源，减少应用启动时的加载量。

内容的提问来源于stack exchange，提问作者Khaled Ramadan