九、优化 iOS 混合应用的 JavaScript
在本章中，我们将着眼于优化 iOS web 应用(也称为混合应用)的 JavaScript 过程。 我们将看看在设备的 web 浏览器和独立应用的 web 视图中调试和优化 JavaScript 和页面性能的一些常见方法。
此外，我们还将了解 Apple Web Inspector，并了解如何将其用于 iOS 开发。 最后，我们还将获得一些关于构建混合应用的理解，并学习帮助更好地为 iOS 构建 javascript 重点应用的工具。 此外，我们还将学习一个类，它可能会在这方面进一步帮助我们。
本章我们将学习以下主题:
- 为 iOS 开发做好准备
- iOS 混合发展
为 iOS 开发做好准备
在开始本章与 Xcode 的例子和使用 iOS 模拟器在 JavaScript 性能书，我将显示一些本地代码，并将使用工具，这门课程没有涵盖。 移动应用开发，不管是什么平台，都是书。 在介绍 iOS 项目的构建时，我将简要介绍创建项目的过程，并编写非 JavaScript代码，将 JavaScript 文件导入混合 iOS WebView 中进行开发。 这是必不可少的，因为 iOS 保护基于 html5 的应用的方式。 iOS 上使用 HTML5 的应用可以通过服务器或应用直接调试，只要应用的项目在主机系统(即开发者机器)的调试设置中构建和部署。
本书的读者并不需要从头到尾地了解如何构建本地应用。 这是完全可以接受的，你可以复制粘贴，跟着我做。 但是我将向您展示代码，以使我们能够测试 JavaScript 代码，并且所使用的代码将是呈现内容所需的最小且最快的代码。
所有这些代码样本将作为某种类型的 Xcode 项目解决方案托管在 Packt Publishing 的网站上，但如果你不想依赖代码样本，也可以在这里看到它们。 现在，让我们开始吧……
iOS 混合开发
Xcode 是苹果公司提供的 IDE，用于为 iOS 设备和 Macintosh 系统的桌面设备开发应用。 作为一个 JavaScript 编辑器，它有相当基本的功能，但 Xcode 应该主要用于除了项目工具集的 JavaScript 开发者。 它为 JavaScript、HTML 和 CSS 提供基本的代码提示，但仅此而已。
为了安装 Xcode，我们将需要从 Mac App Store 开始安装过程。 近年来，苹果已经将其 IDE 转移到 Mac App Store，以便更快地更新开发人员，并随后更新 iOS 和 Mac 应用。 安装是很容易的; 只需用你的苹果 ID 登录 Mac App Store，下载 Xcode; 你可以在顶部搜索它，或者在热门免费下载的右边栏，你可以找到 Xcode Mac App Store 页面的链接。 点击安装，如下图所示:
在这一章中，为了简单起见，我们不会将应用部署到设备上; 所以如果你对它感兴趣，你需要积极参加苹果的开发者计划。 每年的费用是 99 美元，企业许可证是 299 美元，允许在 iOS app Store 控制之外部署应用。
如果您想了解更多关于部署到设备的信息，本章中的代码将在假设您的证书设置在您的终端的设备上运行。
更多信息，请查看苹果 iOS 开发者中心文档，网址:https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/Introduction/Introduction.html#//apple_ref/doc/uid/TP40012582。
安装完成后，我们可以打开 Xcode 查看 iOS 模拟器; 点击XCode，然后点击Open Developer Tool，然后点击iOS Simulator。 在第一次打开 iOS Simulator 时，我们将看到一个 iOS 设备的模拟，如下面的截图所示。 注意，这是一款模拟游戏，而不是真正的 iOS 设备(即使感觉非常接近)。
对于在应用外部处理本地 HTML 文件的 JavaScript 开发人员来说，一个巧妙的技巧是他们可以快速拖放 HTML 文件。 因此，模拟器将打开 iPhone 和 ipad 内置浏览器 Safari 的移动版本，并像在 iOS 设备上一样呈现页面; 在将页面部署到 web 服务器之前进行测试时，这是非常有用的。
设置一个简单的 iOS 混合应用
JavaScript 在内置的混合应用上的性能可能比在移动版 Safari 上运行的相同页面要慢得多。 为了测试这一点，我们将使用苹果的新编程语言Swift构建一个非常简单的网络浏览器。 Swift 是一种适用于 ios 的语言，JavaScript 开发人员应该熟悉它。
Swift 本身遵循类似于 JavaScript 的语法，但与 JavaScript 不同的是，变量和对象可以指定类型，从而实现更强、更准确的编码。 在这方面，Swift 遵循的语法类似于ECMAScript 6和TypeScript风格的编码实践。 如果你正在学习这些新语言，我建议你也学习一下 Swift。
现在让我们创建一个简单的 web 视图，也称为UIWebView，这是用于在 iOS 应用中创建 web 视图的类。首先，让我们创建一个新的 iPhone 项目; 我们使用 iPhone 来保持我们的应用简单。 打开 Xcode，选择创建新的 Xcode 项目项目; 然后，如图所示，选择Single View Application选项，并点击Next按钮。
在向导的下一个视图中，将产品名称设置为JS_Performance，语言设置为Swift，设备设置为iPhone; 组织名称应该根据你在操作系统中的帐户名自动填写你的名字。 组织标识符是我们应用的反向域名唯一标识符; 这可以是任何你认为合适的。 出于教学目的，以下是我的设置:
一旦你的项目名称设置好，点击Next按钮，保存到你选择的文件夹中，Git 仓库未选中。 完成后，选择Main。 故事板在你的项目导航下，在左边面板中找到。 我们现在应该在故事板视图中。 让我们打开对象库，可以在右下角的子选项卡中找到一个圆形内的正方形图标。
在右下角搜索栏的对象库中搜索Web View，然后将其拖到代表 iOS 视图的方形视图中。
在使用 Swift 链接 HTML 页面之前，我们还需要考虑两件事; 我们需要设置约束，因为原生 iOS 对象将被拉伸以适应各种 iOS 设备窗口。 以填补空间,您可以添加约束通过选择UIWebView对象和紧迫的命令+选项+【T7 转变】+【显示】=在你的 Mac 键盘。 现在你应该看到一个蓝色的边框出现在你的 UIWebView 周围。
最后，我们需要连接我们的UIWebView到 Swift 代码; 按键盘上的Command+Option+Return即可打开Assistant Editor。 我们应该看到ViewController.swift在我们的故事板旁边的侧面板中打开。 链接这个代码变量,右键单击(或 option-click【t16.1】UIWebView 对象),按钮控制,把UIWebView在ViewController.swift 12 号线代码在我们的助理编辑。 如下图所示:
**
一旦完成，一个弹出窗口将出现。 现在让一切保持原样，但将名称设置为webview; 这将是引用我们 UIWebView 的变量。 完成后，保存您的Main.storyboard文件并导航到您的ViewController.swift文件。
现在看看下面截图中显示的 Swift 代码，并将其复制到项目中; 重要的部分在第 19 行，它包含加载到 web 视图中的文件名和类型; 在这种情况下，这是index.html。
现在很明显，我们没有一个index.html文件，所以让我们创建一个。 进入File，然后选择New，然后选择New File选项。 接下来，在iOS下选择Empty Application，点击Next完成向导。 将文件保存为index.html，点击创建。 现在打开index.html文件，并在 HTML 页面中输入以下代码:
<br />Hello <strong>iOS</strong>
现在点击Run(主 iOS 任务栏中的播放按钮)，我们应该看到 HTML 页面在我们自己的应用中运行，如下所示:
那是不错的工作! 我们用 Swift 创建了一个 iOS 应用(即使它是一个简单的应用)。 让我们创建一个结构化的 HTML 页面; 我们将用 HTML 覆盖我们的Hello iOS文本，如下截图所示:
在这里，我们使用标准的console.time函数，并在完成时打印一个消息到我们的 UIWebView 页面; 如果我们在 Xcode 中点击运行，我们将看到加载的Loop Completed消息。 但是我们如何获得性能信息呢? 如何在 HTML 页面的第 14 行获取console.timeEnd函数代码?
使用 Safari Web Inspector for JavaScript 性能
苹果做为 UIWebViews 提供 Web Inspector，它是相同的 Inspector for desktop Safari。 它很容易使用，但有一个问题:检查器只适用于 iOS 模拟器和从 Xcode 项目开始的设备。 这种限制是出于对混合应用的安全考虑，因为混合应用可能包含敏感的 JavaScript 代码，如果可见，这些代码可能会被利用。
让我们检查一下项目的嵌入式 HTML 页面控制台。 首先，打开 Mac 上的 Safari 桌面浏览器，启用开发者模式。 启动Preferences选项。 在Advanced选项卡下，选中菜单栏Show develop 菜单，如下图所示:
接下来，让我们重新运行我们的 Xcode 项目，启动 iOS 模拟器，然后重新运行我们的页面。 一旦我们的应用运行在Loop Completed结果显示，打开桌面 Safari，然后点击Develop，然后点击iOS Simulator，接着点击index.html。
当你把鼠标放在index.html上时，你会看到 iOS 模拟器的 UIWebView 以蓝色高亮显示。 可见页面如下截图所示:
一旦我们在.html上发布鼠标，我们 SafariWeb Inspector窗口就会出现，其中包含我们混合的 iOS 应用的 DOM 和控制台信息。 Safari 的Web Inspector与 Chrome 的开发工具在功能集方面非常相似; 开发工具中使用的面板在Web Inspector中也存在图标。
现在让我们在Web Inspector中选择控制台面板。 在这里，我们可以看到完整的控制台窗口，包括在for循环中包含的Timer``console.time函数测试。 正如我们在下面的截图中所看到的，循环在 iOS 中处理花费了 0.081 毫秒。
比较 UIWebView 和移动 Safari
如果我们想要将我们的代码移动到移动 Safari 上进行测试呢? 这很简单; 正如本章前面提到的，我们可以将index.html文件拖放到我们的 iOS 模拟器中，然后操作系统将打开 Safari 的移动版本并为我们加载页面。
准备好之后，我们需要重新连接 SafariWeb Inspector到iOS Simulator，并重新加载页面。 一旦完成，我们可以看到我们的console.time函数更快了; 这次大约是 0.07 毫秒，这是一个完整的时间。 比 UIWebView 快 01 毫秒，如下所示:
对于一个小应用，这是最小的性能差异。 但是，当应用变大时，这些 JavaScript 进程的延迟就会变得越来越长。
我们也可以使用 Safari 的Web inspector工具中的调试检查器来调试应用。 在 Safari 的Web Inspector中，点击顶部菜单面板中的调试器。 我们可以添加一个断点到我们的嵌入式脚本，点击行号，然后用Command+R刷新页面。 在下面的截图中，我们可以看到在页面加载时发生的中断，我们可以看到我们的 scope 变量在右边面板中显示供参考:
我们也可以使用时间轴检查器检查页面加载时间。 点击时间的Web Inspector现在,我们将看到一个时间表类似于资源【显示】选项卡中找到 Chrome 的开发工具。 让我们用键盘上的Command+R来刷新页面; 然后时间轴处理页面。
注意几秒钟后，当页面完全加载时，Web Inspector中的时间轴停止，所有的 JavaScript 进程停止。 当你使用 SafariWeb Inspector而不是 Chrome 的开发者工具时，这是一个很好的功能。
提高混合动力性能的常用方法
通过混合应用，我们可以使用我们在过去章节中学到的所有提高性能的技术: 在 NPM 中使用像 Grunt.js 或 Gulp.js 这样的构建系统，使用 JSLint 更好地优化我们的代码，在 IDE 中编写代码来为我们的应用创建更好的结构，并帮助检查代码中任何多余的代码或未使用的变量。
我们可以使用最佳性能实践，如使用字符串应用 HTML 页面(如innerHTML属性)，而不是为它们创建对象并以这种方式将它们应用到页面，等等。
遗憾的是，混合应用的表现仍然不如原生应用。 现在，不要气馁，因为混合应用确实有很多好的功能! 其中一些建议如下:
- 它们(通常)比使用本地代码更快地构建
- 它们更容易定制
- 它们允许为应用快速构建原型
- 它们更容易交给其他 JavaScript 开发人员，而不是寻找本地开发人员
- 他们是便携式; 它们可以在 Android 设备、Windows Modern 应用、Windows Phone 应用、Chrome OS 甚至 Firefox OS 等其他平台(稍加修改)上重用
- 它们可以使用助手库(如Cordova)与本地代码交互。
然而，在某些情况下，应用的性能将受到设备硬件的限制，建议您使用本机代码。 但是，我们怎么知道什么时候该搬家呢? 这可以使用颜色混合图层来完成。 Color blend Layers选项应用一个覆盖层，突出设备显示中性能较慢的区域，例如，绿色表示性能良好，红色表示性能较慢; 颜色越深，效果就越好。
使用 Xcode 重新运行你的应用，在 iOS 模拟器的 Mac OS 工具栏中，选择Debug，然后Color blend Layers。 一旦我们这样做了，我们可以看到我们的 iOS 模拟器显示了一个绿色覆盖; 这显示了 iOS 在处理渲染视图时使用了多少内存，包括本地代码和非本地代码，如下所示:
目前，我们可以看到一个大部分绿色覆盖，除了状态栏元素，它占用更多的渲染内存，因为它们覆盖了 web 视图，必须反复重绘该对象。
让我们复制我们的项目，并将其命名为JS_Performance_CBL，让我们用这个代码示例更新我们的index.html代码，如下面的截图所示:
这里，我们有一个带有空 div 的简单页面; 我们还有一个带有onclick功能的按钮，叫做start。 我们的start函数将使用setInterval函数不断更新高度，每毫秒增加高度。 我们的空 div 也有一个内联的style标签分配给它的背景渐变。
CSS 背景渐变在移动设备上通常是一个巨大的性能消耗，因为它们可能会随着 DOM 的更新而不断地重新渲染自己。 其他一些问题包括侦听器事件; 一些较早或较低端的设备没有足够的 RAM 来将事件监听器应用到页面。 通常，无论是内联还是通过 JavaScript 将onclick属性应用于 HTML 都是一个很好的实践。
回到渐变的例子，让我们在iOS Simulator中运行，并在点击 HTML 按钮触发 JavaScript 动画后启用Color blend Layers。
正如预期的那样，我们已经扩展的 div 元素现在有一个红色覆盖层，表明这是一个确认的性能问题，这是不可避免的。 为了纠正这一点，我们需要删除 CSS 渐变背景，它将再次显示为绿色。 然而，如果我们必须根据设计规范包含渐变，那么就需要一个本地版本。
当面对诸如此类的 UI 问题时，重要的是要理解常规开发工具和 Web inspector 之外的工具，并利用提供更好的代码分析的移动平台工具。 现在，在我们结束这一章之前，让我们注意一下 iOS 网页视图的一些具体内容。
WKWebView 框架
在写这篇文章的时候，苹果宣布了 WebKit 框架，这是一个第一方 iOS 库，旨在用更先进、性能更好的 web 视图取代 UIWebView; 这样做的目的是用整体性能更好的应用取代依赖 HTML5 和 JavaScript 的应用。
WebKit 框架，也被称为WKWebView，是一个更新的 web 视图，可以添加到项目中。 WKWebView 也是这个框架的基类名。 这个框架包含许多本地 iOS 开发者可以利用的特性。 这包括监听可能触发原生 Objective-C 或 Swift 代码的函数调用。 对于像我们这样的 JavaScript 开发者来说，它包含了一个更快的 JavaScript 运行时Nitro，从 iOS6 开始就已经包含在 Mobile Safari 中了。
混合应用总是比原生代码运行得更糟糕。 但在 Nitro JavaScript 运行时中，HTML5 在性能上与原生应用不相上下，前提是我们的视图不会像颜色混合层示例中所示的那样消耗太多渲染内存。
WKWebView 确实有局限性; 它只能用于 iOS8 或更高版本，而且它没有内置 Storyboard 或 XIB 支持，比如 UIWebView。 所以，如果你是 iOS 开发新手，使用这个框架可能是个问题。 Storyboard是简单的 XML 文件，按照特定的方式编码，用于渲染 iOS 用户界面，而XIB文件则是 Storyboard 的前身。 XIB 文件只允许一个视图，而故事板允许多个视图，并且可以在它们之间链接。
如果你正在开发一个 iOS 应用，我鼓励你联系你的 iOS 开发者领导，并鼓励在你的项目中使用 WKWebView。
更多信息，请查看苹果的 WKWebView 文档，在他们的开发者网站https://developer.apple.com/library/IOs/documentation/WebKit/Reference/WKWebView_Ref/index.html。
小结
在本章中，我们学习了使用 HTML5 和 JavaScript 创建 iOS 混合应用的基础知识; 我们学习了如何在 iOS 模拟器中运行应用时将 Safari Web Inspector 连接到我们的 HTML 页面。 我们还研究了 iOS Simulator 的 Color blend Layers，并了解了如何通过 JavaScript 代码测试设备渲染性能问题的性能。
现在我们到了最后关头。 对于所有 JavaScript web 应用，在它们投入生产站点之前，我们需要对 JavaScript 和 web 应用代码进行冒烟测试，看看我们是否需要在最终部署之前执行任何最终的改进。 这将在下一章讨论。**
版权属于：月萌API www.moonapi.com，转载请注明出处
