无缝秒出新突破，H5前端秒开助力跨境机票30秒出票

今天去啊App 5.1.1已经发布了，航旅Hybrid混合架构有了更进一步的落地，这轮优化目标是搞定H5真正的“无缝秒出”。我们都知道，传统原生页面性能虽好，但开发效率低；H5页面开发便捷，但性能差，尤其是打开页面耗时较长，甚至存在因网络等原因出现白屏等情况。Hybrid作为两者之间的过渡方案，一直以来，我们一直在摸索和优化。先来看效果，去啊App 2G网络下购买国际机票，30秒完成，除了搜索入口页，列表往下到付款页的前端都是H5 Page，大家感受一下：

目测性惊喜之处在于：“秒出”。搜索结果首屏切到列表页没有卡顿，列表页到航班详情页也没有，详情页滑动航班选择无丝毫卡顿，详情页到填写乘客信息界面同样如此，一路到底，非常顺滑。

那么Hybrid是怎样做到“秒出”的呢？以第一个优化点-列表页为例。

优化点1：列表页接口

传统的做法是，列表页首先请求接口返回数据，接口成功后，数据再进入数据处理及UI渲染阶段，整个链路是顺序的。而对于Hybrid App来说，通信层的特点决定了可以把接口请求阶段和数据处理阶段并发起来，提前预加载数据，这样当用户点击列表跳转到详情页时，数据已经准备好了，避免了页面加载过程中的白屏，保证了页面的流畅性。

上图展现的是列表页优化前后的时序图对比。优化前有三个阶段：请求数据，数据处理和页面渲染，三个阶段依次执行，总共耗时5.4s。优化后，预加载数据实现了请求数据和数据处理并行，减少了页面渲染的等待时间，总共耗时减少到了1.9s，速度提升至优化前的35%。

优化点2：数据处理

客户端拿到接口数据之后，需要进行后续的业务处理和数据格式的转化，以往这些都是通过 JavaScript 执行的。好处是简单方便，坏处是性能差，会明显影响到页面的加载速度。

Hybrid App 提供了一种新的方案：数据处理模块。数据处理模块允许开发者使用原生语言（Objective-C、Java等）来开发数据处理逻辑。原生语言的执行效率比 JavaScript 高很多，因此可以显著提升数据的处理速度。

上图展现的是数据处理优化前后时序图对比。优化前由JavaScript执行，总耗时3.7s。优化后由原生数据处理模块执行，耗时仅为0.5s，速度提升至优化前的13.5%。

优化点3：页面渲染

Webview页面渲染是由系统层执行的，不同版本安卓的系统Webview性能不一，无法进行较大幅度的优化。但可以通过一些细节的优化来提高页面的加载速度。

比如，减少页面节点的数量。减少节点意味着减少DOM树的深度和复杂度，进而减少页面的渲染时间。

再比如，避免不必要的重绘。重绘是指Webview在已经绘制好内容的区域进行重新绘制，这会导致页面的闪烁。

上图展现的是页面渲染优化前后时序图对比。优化前总耗时1.7s。优化后通过减少DOM树的深度和复杂度，减少页面的渲染时间至0.9s。

以上便是Hybrid“无缝秒出”的实现原理，通过对通信、数据处理、页面渲染等方面进行优化，实现了列表页1.9s的加载速度，较之传统方案提升了35%，给用户带来了真正的“无缝秒出”体验。

相信随着技术的进一步发展，Hybrid App将会成为主流的移动开发模式。