深入分析App混合开发技术的成熟度曲线（三）

深入分析App混合开发技术的成熟度曲线

根据Gartner的研究，这一时期有六个重要特征。本文将阐述现阶段混合开发技术的主要特点，并说明现阶段如何正确理解和使用混合开发技术

光明时期混合开发技术的六大特点

技术特征清晰，用户可以正确使用混合开发技术

今天的开发人员已经充分了解了混合开发技术的特点。在开发App时，我们清楚了解哪些功能可以使用HTML5，哪些功能必须使用原生模块进行扩展。

如何应用混合技术对于App开发非常重要。以下是几点：

● HTML和CSS解析：必须使用可以用HTML+CSS布局的接口。经过多年的发展，HTML和CSS的标准非常完备，布局效率最高。虽然HTML和CSS解析需要一些时间，但移动App页面通常很小，元素很少。只要我们严格控制每个页面中HTML和CSS代码的大小，并完全按照产品设计仔细编写HTML和CSS，不引入沉重的框架，不出现无用的代码，那么这个解析过程对界面的显示速度几乎没有影响。

● 布局和渲染机制：浏览器的渲染机制不同于本机的渲染机制。浏览器的渲染需要经过Dom Tree->Layout Tree->Draw的过程，而这个Draw的实现是在浏览器本身内完成的，这决定了渲染速度比原生的慢。

尤其是在移动应用中，这一点更为明显，因为在移动App中，用户会进行频繁的交互操作，如下拉刷新、界面滚动、手势动画等。这些操作效果导致的界面变化需要浏览器重新绘制整个界面（重新布局和绘制）。浏览器的渲染效率不高。频繁重画的结果表现为闪屏、界面混乱和用户体验不佳。

因此，混合开发必须尽可能避免浏览器重画。需要通过原生机制（调用混合开发平台的扩展API）实现将导致浏览器重画的功能，如下拉刷新、界面滚动、手势动画等。

事实上，HTML5界面第一次呈现的用户体验并不差，因为用户可以在打开新页面时接受短的响应时间，通常界面切换会伴随着过渡动画和加载过程。然而，频繁刷新浏览器会影响体验。

● 界面切换和过渡效果：app的界面切换会伴随着各种过渡效果，让用户拥有良好的操作感和交互体验。HTML5的a标签跳转默认没有动画，SPA模式下的div开关也没有动画。用HTML5的JS或CSS3模拟这些原生窗口的过渡效果很差。

在混合开发中，App需要构建与本机相同的多窗口UI结构，以便使用本机过渡效果。通常，每个混合技术平台都有自己的一组UI结构。以统软云为例，统软云界面布局使用五个组件：Widget、layout、Window、Frame和UIModules。

如果一个App有50个界面，它需要构建50个窗口。每个界面都是一个独立的窗口（window是一个标准的Native窗口，可以使用Native界面切换和转换效果）。每个窗口中都可以加载HTML5页面。

● 网络请求和数据存储：在跨域异步请求、套接字通信、异步和结构化本地数据存储、存储容量、图片和数据缓存方面，标准HTML5在功能和性能上与Native相比仍有很大差距。

在混合开发中，我们需要以本地方式实现这些功能。目前，标准的混合开发技术平台为这些功能提供了封装的API，方便开发者调用。

● JavaScript执行和桥接：许多开发人员认为，由于JavaScript在浏览器的主线程中执行，耗时的JavaScript操作会阻塞主线程，从而影响界面的渲染。事实上，主线程中任何耗时的操作都会阻塞UI，在本机开发中也是如此。在本机开发中，当遇到耗时的操作时，我们还需要启动一个新线程。我们