说到 Hybrid App(混合应用)大家都不陌生,因为这种开发模式大行其道发展的这些年取代了很多原生和 Web 应用,为什么大家对这种「Native + HTML5」的开发模式额外偏爱呢?
因为一方面在一定程度上兼顾了原生应用的优质体验,另一方面又兼顾到了 HTML5 灵活的开发模式。
这种模式的核心就在于使用了 HTML、CSS 和 JavaScript 语言进行编写,继而封装到原生应用中,这个模式下应用不是在用户的浏览器中显示,而是在本地应用程序和自己的嵌入式浏览器中运行,用户基本上看不到它。例如,iOS 应用程序将使用 WKWebView 来显示我们的业务功能,而在 Android 上,它将使用 WebView 元素来实现相同的功能。
不过既然说到 Hybrid App 的核心在于使用 WebView 来实现业务功能的对外展示,那有浏览器也必然存在大大小小的毛病,至少说和原生页面的体验会有较为明显的差异。
那是否有方式能够缩小(或者说一定程度上弥补)和原生的性能差距呢?这也是今天希望进行探讨的。
体验过 Hybrid App 的都知道,最烦人的就是长时间的白屏加载,背后的原因就是页面加载速度过慢造成的,所以我第一个关注点就是加载速度。
在 Hybrid App 中,一般是可以通过减少 HTTP 请求、压缩文件、使用缓存等方法来提升加载速度。
我主要想分享两个办法,一是可以将多个小的 JavaScript 或 CSS 文件合并为一个文件,从而实现减少请求的数量的目的,但也要注意合并文件时,需要平衡文件的大小和并发请求的数量。第二个办法是对于多个 icon 或图片,将它们合并到一个雪碧图(Sprite Sheets)中,然后使用 CSS 的 background-position 属性来显示不同的图标,这个办法也可以在一定程度上减少多个图标的 HTTP 请求。
在 Hybrid App 中可以通过使用 ImageOptim、UglifyJS 等压缩工具减少压缩文件的大小,当然也可以在服务器端启用 Gzip 和 Brotli 进行压缩,这也能够将在传输过程中的资源文件进行压缩,从而减少网络传输量。
我们可以设置合理的缓存策略,缓存策略比较多:浏览器缓存、服务端缓存、本地缓存、缓存清除、缓存优先级等都可以作为我们的缓存策略,这里以浏览器的缓存机制为例,我们可以将一些常用的文件存储在用户的设备上,从而减少网络请求提升加载速度。
JavaScript 是 Hybrid App 中最主要的执行环境,因此 JavaScript 的性能也直接影响到整个 App 的性能。
对于 JavaScript 的性能优化,我主要想到的是2个点:
应该大家都知道频繁的 DOM 操作会引起重排 reflow 和重绘 repaint ,自然而然的也会影响 App 的性能,这里推荐批量更新和离线 DOM 来减少操作次数。
批量更新顾名思义就是将多次 DOM 操作合并为一次,再通过一次性更新多个元素,达到减少重排和重绘的效果。一般可以使用 Fragment 文档片段 来批量添加多个元素,然后一次性插入到 DOM 中。
另外还可以试试离线 DOM 操作,在 DOM 外部进行修改再将修改的部分一次性添加到 DOM,主要可以通过使用字符串拼接、模板引擎、虚拟 DOM 等方式来实现。
另外还有一个比较重要且需要注意的是 JavaScript 的内存管理,在整个管理环节避免内存泄漏的问题出现,我们除了可以使用工具来监控内存使用情况,还有一些使用的技巧需要注意。例如减少全局变量的使用、手动解除引用 null 、避免循环使用引用等。
当然 Hybrid App 性能优化是一个比较复杂的过程,可以实践的途径还有其他的角度,像是 WebView 优化是一个非常重要的部分,也是一个值得后续详细展开细讲的部分,这篇文章就先不对 WebView 优化做过多的介绍了。
另外需要说明一点随着小程序容器技术的持续推动,新的移动混合应用方式「Native+小程序」也开始受到关注,其实技术原理就是以非入侵性的方式把 FinClip SDK 嵌入到现有的 App,让App 具备小程序运行能力,从而转变为「Native+小程序」的混合开发模式,这个模式的使用体验会明显的好于「Native + HTML5」。
这个模式也是符合用户越来越重视各个产品使用体验的趋势,「原生+小程序」更优质的混合开发模式也会更多的受到开发者的关注和认可。
手机扫一扫
移动阅读更方便
你可能感兴趣的文章