Ionic 2 vs. Ionic 1（性能提升，新工具和向前迈出的一大步） _性能优化

本文概述

提升变更检测性能
更快的DOM性能
新的Web动画API
内置本机滚动
改进的组件API
网络工作者简介
TypeScript的优势
所有新的CLI v2
改良包装
错误报告工具简介
提前进行时间编译(AoT)的好处
Ionic2是巨大的进步

Ionic项目正在迅速普及。它在GitHub上拥有27, 000多颗星, 已成为全球50个最受欢迎的开源项目之一。
自从最近发布了Ionic 2的稳定版本以来, 现在正是工程师分析和了解Ionic 2和Ionic 1之间差异的最佳时机。

文章图片
在较高的层次上, Ionic 2是Angular> = 2.x的Ionic 1项目的完整重写。根据我2年以上使用Ionic 1的经验, 这实际上意味着什么。
提升变更检测性能 Ionic1基于Angular 1.x, Ionic2基于Angular> =2.x。仅使用Angular> = 2.x所获得的性能提升就非常重要。
使用Angular 1.x, 要获得高性能的应用程序, 需要大量的框架知识(例如$ watch, 一次性绑定等)。在Angular> = 2.的情况下, x应用程序开箱即用。
新版本的Angular放弃了著名的, 决定性的摘要周期(在每次更改时跟踪和测试应用程序的每个变量)。相反, Angular> = 2.x依赖Zone.js跟踪应用程序更改(同步和异步)。
Angular> = 2.x中的变更检测值得探索以了解事物在幕后的工作方式。在Angular> = 2.x中, 更改检测始终从上到下执行。如果要控制应用程序的性能, 则在自己的组件中使用正确的更改检测策略(OnPush或Default)至关重要。
Ionic 2的所有组件都使用OnPush策略, 这意味着更改检测不是一直执行, 而是仅在输入更改时执行。这种策略还避免了不必要的组件子树渲染。它基本上已经为你优化。
如果你想了解有关如何获得高性能Ionic1应用程序的更多信息, 建议你阅读此Ultimate AngularJS和Ionic性能备忘单。
更快的DOM性能 Angular文档对象模型(DOM)的操作已经发展了很多。如果你需要响应式用户界面(UI), 则DOM操作和JavaScript性能非常重要。

文章图片
例如, 使用原始JavaScript在表中创建1000行需要126毫秒, 而使用Angular则要花费110％(264毫秒)。 1.x, 而Angular> = 2仅增加40％(177毫秒)。如你所见, Angular> = 2.x的性能优于Angular 1.x, 与React性能相似。
Ionic 2再次受益于此性能升级, 并且” 免费” 这样做。
新的Web动画API Ionic 1和Ionic 2仍依赖CSS动画进行内部过渡和动画处理, 但由于Ionic 2基于Angular> = 2.x, 开发人员可以通过Angular动画系统访问新的Web动画(W3C)API。
Web Animations API是一种JavaScript API, 可为开发人员提供对浏览器动画引擎的访问。并非所有浏览器都支持它, 但是通过polyfill, 你可以立即使用它, 并享受最活跃, 最有前途的Web动画方法之一。

文章图片
到目前为止, JavaScript滚动是必需的, 但是Chromium(Android)和WKWebView(iOS)WebView已经发展, 现在支持本机滚动。仅在具有Ionic 1的Android上默认启用(自2015年12月起), 并在所有具有Ionic 2的平台上启用。
原生滚动支持通过异步事件帮助确保平滑滚动, 从而带来更好的性能并改善用户体验。
改进的组件API Ionic 2使你可以访问使Ionic 1出名的所有组件, 但现在已进行了改进, 并且基于Angular> =2.x。以下是最常见的组件列表：

纽扣
卡
图标
list
菜单
资本金
工具列

组件API在Ionic 1和Ionic 2之间进行了一些更改。例如, Ionic 1Ionic纺纱器组件将icon属性用于微调器类型：

< ion-spinner icon="bubbles"> < /ion-spinner>

而Ionic 2使用name属性：

< ion-spinner name="bubbles"> < /ion-spinner>

如你所见, 如果你熟悉Ionic 1组件API, 那么使用Ionic 2组件也会感到很舒服。你只需要了解这些差异。
有了令人印象深刻的组件列表, 你可以使用Ionic 1完成所有操作, 例如Ionic 2, 甚至更多。
网络工作者简介 Web Workers允许你的应用程序在后台JavaScript线程中运行脚本。工作人员可以在你的应用程序上下文之外执行繁琐的任务和HTTP请求(即, 不干扰用户界面)。如今, 所有主要的浏览器都支持Web Worker。
传统上, 所有框架都建立在窗口和文档对象之上, 并依赖于它们。但是, 在工人中都没有。通过将渲染器分离的新Angular> = 2体系结构, 可以更轻松地在Web Workers(或与此相关的任何其他平台)中运行应用程序。
Ionic 2开始尝试将Web Workers与新的ion-img组件一起使用。目前, ion-img仅可在VirtualScroll列表中使用。它将图像HTTP调用委托给Web Workers, 并且还支持延迟加载(即, 仅在视口上检索和渲染图像)。现在, 你的Web应用程序仅关注UI, 而其他工作则由工作人员完成。
这是一个如何使用它的示例：

< ion-img width="80" height="80" [src]="imageSrc"> < /ion-img>

请记住, 这仅仅是开始, 我们希望在不久的将来看到更多使用情况或Web Workers。
TypeScript的优势如果你一直在使用Ionic 2, 则已经知道它正在使用TypeScript。 TypeScript是JavaScript ES2015的超集, 可编译为纯JavaScript。使用TypeScript, 你可以访问其所有独特功能(如界面, mixins等)和ES2015功能(如箭头功能, 生成器, 多行字符串等)。
让我们看一个显示美国总统姓名的Angular> = 2.x组件示例：

import { Component } from '@angular/core'; export interface IPresident { id: number; name: string; }@Component({ selector: 'my-app', template: ` < h1> {{title}}< /h1> < h2> {{president.name}}< /h2> ` }) export class AppComponent { title:string = 'President of the United States'; president: IPresident = { id: 44, name: 'Barack Obama' }; }

我们使用描述主席对象形状的接口(IPresident)。拥有描述你正在操作的界面的接口很有趣, 尤其是在一个项目中有多个开发人员的情况下。如果你犯了一个错误, 例如, 使用一个布尔值作为总裁名称, 那么即使在编译发生之前, 你的IDE也会告诉你有问题。
在几乎所有你使用的IDE(Visual Studio Code, Atom, WebStorm等)中, 你都会找到用于启用自动完成功能, 类型检查和linter的插件。
TypeScript是Ionic 2的真正优势, 因为它可以使你的代码更易于理解, 可以帮助你避免键入错误, 并可以提高工作效率(通过自动完成功能, 自动导入模块, 悬停时的工具提示定义以及CTRL +单击以转到定义)。
所有新的CLI v2 Ionic CLI v2添加了一种直接通过命令行生成页面, 组件, 管道和指令的方法。
例如, 如果你要创建一个名为MyPage的新页面, 则可以运行以下命令：

$ ionic generate page MyPage √ Create src/pages/my-page/my-page.html √ Create src/pages/my-page/my-page.ts √ Create src/pages/my-page/my-page.scss

该命令将遵循约定并为你创建三个文件：
模板的HTML文件。你的零部件样式的SASS文件。组件逻辑的TypeScript文件。
生成的my-page.ts文件如下所示：

import { Component } from '@angular/core'; import { NavController, NavParams } from 'ionic-angular'; @Component({ selector: 'page-my-page', templateUrl: 'my-page.html' }) export class MyPagePage {constructor(public navCtrl: NavController, public navParams: NavParams) {}ionViewDidLoad() { console.log('ionViewDidLoad MyPagePage'); }}

在团队中工作时, 通过使用CLI强制执行约定非常有用。 Angular 2.x和Ionic 2在帮助人们更好地理解Angular应用程序架构应该做的方面做得很好。当然, 如果你愿意的话, 你可以自由地偏离惯例。
改良包装 Ionic 1依靠Gulp生态系统来捆绑应用程序, 而Ionic 2则使你可以选择自己喜欢的工具。 Ionic 2作为一个单独的项目提供了自己的工具集合：ionic-app-scripts。
ionic-app-scripts基于这样的思想, 即开发人员完全不必担心打包配置。你的项目对Ionic 2的唯一与包装相关的依赖性是@ ionic / app-scripts。默认情况下, 它使用Webpack, 但你也可以使用汇总。
使用Ionic 2和CLI v2, 资产以及TypeScript文件位于同一src文件夹中。现在, www在每个构建过程中生成, 因此应从版本控制跟踪中删除。
错误报告工具简介新的CLI还引入了出色的错误报告工具。要获取它, 你需要安装Ionic版本> = 2.1：

$ npm install -g ionic$ ionic -v # should return at least 2.1.12

现在, 每次遇到错误时, 都会弹出一个模式, 其中包含有关该模式的有意义的信息。例如：

文章图片
在开发过程中尽快得到有关运行时错误的通知非常有价值, 而Ionic 2在这方面做得很好。
提前进行时间编译(AoT)的好处提前进行时间编译(AoT)是Angular生态系统中的一次小小的革命。 Angular 2.x引入了AoT, 它允许模板在构建步骤中进行预编译, 而不是由浏览器即时进行编译。
尽管这似乎没有太大的区别, 但实际上是。使用AoT, 我们不必将模板编译器与应用程序一起提供。这有两个优点。首先, 捆绑软件将更小, 直接影响网络, 因此使你的应用程序下载速度更快。其次, 该应用程序的引导速度更快, 因为不再需要即时进行模板编译。
Ionic 2充分利用Angular 2.x AoT来免费优化应用程序的大小和加载时间。

文章图片
Ionic2是巨大的进步总体而言, Ionic 2对于混合移动行业而言是巨大的进步。尽管Ionic 2组件集与Ionic 1组件类似, 但Ionic 2提供了许多工具并提高了性能。
确实, 借助TypeScript, ionic-app-scripts和Ionic CLI等工具, Ionic 2开发人员可以提高生产率, 产生更多可维护的代码, 并在发生运行时错误时立即得到警告。
相较于Ionic 1, Ionic 2还提供了免费的性能提升, 特别是通过消除或减少了其瓶颈(与变更检测, 动画, 加载时间等有关)。
有了Ionic 2, 你的应用程序将比以往更加原生。旋转一下。你会很高兴的。
【Ionic 2 vs. Ionic 1（性能提升，新工具和向前迈出的一大步）】相关：Ionic开发人员最常犯的9个错误