Hybrid App 性能优化的一些技术探讨

说到 Hybrid App（混合应用）大家都不陌生，因为这种开发模式大行其道发展的这些年取代了很多原生和 Web 应用，为什么大家对这种「Native + HTML5」的开发模式额外偏爱呢？

因为一方面在一定程度上兼顾了原生应用的优质体验，另一方面又兼顾到了 HTML5 灵活的开发模式。

这种模式的核心就在于使用了 HTML、CSS 和 JavaScript 语言进行编写，继而封装到原生应用中，这个模式下应用不是在用户的浏览器中显示，而是在本地应用程序和自己的嵌入式浏览器中运行，用户基本上看不到它。例如，iOS 应用程序将使用 WKWebView 来显示我们的业务功能，而在 Android 上，它将使用 WebView 元素来实现相同的功能。

不过既然说到 Hybrid App 的核心在于使用 WebView 来实现业务功能的对外展示，那有浏览器也必然存在大大小小的毛病，至少说和原生页面的体验会有较为明显的差异。

那是否有方式能够缩小（或者说一定程度上弥补）和原生的性能差距呢？这也是今天希望进行探讨的。

提升加载速度

体验过 Hybrid App 的都知道，最烦人的就是长时间的白屏加载，背后的原因就是页面加载速度过慢造成的，所以我第一个关注点就是加载速度。

在 Hybrid App 中，一般是可以通过减少 HTTP 请求、压缩文件、使用缓存等方法来提升加载速度。

1、减少HTTP数量

我主要想分享两个办法，一是可以将多个小的 JavaScript 或 CSS 文件合并为一个文件，从而实现减少请求的数量的目的，但也要注意合并文件时，需要平衡文件的大小和并发请求的数量。第二个办法是对于多个 icon 或图片，将它们合并到一个雪碧图（Sprite Sheets）中，然后使用 CSS 的 background-position 属性来显示不同的图标，这个办法也可以在一定程度上减少多个图标的 HTTP 请求。

2、压缩文件大小

在 Hybrid App 中可以通过使用 ImageOptim、UglifyJS 等压缩工具减少压缩文件的大小，当然也可以在服务器端启用 Gzip 和 Brotli 进行压缩，这也能够将在传输过程中的资源文件进行压缩，从而减少网络传输量。

3、设置缓存策略

我们可以设置合理的缓存策略，缓存策略比较多：浏览器缓存、服务端缓存、本地缓存、缓存清除、缓存优先级等都可以作为我们的缓存策略，这里以浏览器的缓存机制为例，我们可以将一些常用的文件存储在用户的设备上，从而减少网络请求提升加载速度。

优化 JavaScript 性能

JavaScript 是 Hybrid App 中最主要的执行环境，因此 JavaScript 的性能也直接影响到整个 App 的性能。

对于 JavaScript 的性能优化，我主要想到的是2个点：

1、减少 DOM 操作

应该大家都知道频繁的 DOM 操作会引起重排 reflow 和重绘 repaint ，自然而然的也会影响 App 的性能，这里推荐批量更新和离线 DOM 来减少操作次数。

批量更新顾名思义就是将多次 DOM 操作合并为一次，再通过一次性更新多个元素，达到减少重排和重绘的效果。一般可以使用 Fragment 文档片段 来批量添加多个元素，然后一次性插入到 DOM 中。

另外还可以试试离线 DOM 操作，在 DOM 外部进行修改再将修改的部分一次性添加到 DOM，主要可以通过使用字符串拼接、模板引擎、虚拟 DOM 等方式来实现。

2、避免内存泄漏

另外还有一个比较重要且需要注意的是 JavaScript 的内存管理，在整个管理环节避免内存泄漏的问题出现，我们除了可以使用工具来监控内存使用情况，还有一些使用的技巧需要注意。例如减少全局变量的使用、手动解除引用 null 、避免循环使用引用等。