Hybrid开发的优化策略

问题：

1，内嵌hybrid模式的特点是什么。

2，缺点是什么。

3，如果bybrid模式卡顿，原因又是什么，怎么解决。

4，如果要做整齐布局，一般用flex或display:table;如果涉及到非规整的布局可能要配合js。

Hybrid越来越成为开发的一种常见的开发方式，但说到Hybrid，除了开发上的高效和更新上的快捷之外，速度是被提到最多的，我们就从这里开始着手。这里跟大家分享一些这方面的经验，希望能对大家有所帮助。

我们把一个Html页面的加载过程分为三段：加载、渲染、Ajax请求。然后从这三个阶段分别谈一下优化的策略。
1、加载。
首先，要充分利用浏览器的缓存策略来实现快速加载。这样就能保证只要不升级版本，几乎不需要联网行为，节省了流量，提高了加载速度。
再者，通过拦截WebResource请求的方式预置的一部分不需要更新的页面或者资源（JS、CSS等）到客户端中供WebView使用，提高这部分资源的加载速度。
另外，还有一个需要我们引起注意的地方就是JS脚本加载会影响DOM渲染速度。这个主要原因是浏览器在加载JS时，会考虑到JS修改DOM树结构的可能性。关于具体的问题表现，产生原因，以及优化方案，可以参考这里：
JS的阻塞特性
http://www.cnblogs.com/MeteorSeed/articles/2283629.html
页面的加载与渲染顺序
http://blog.csdn.net/chang_yuan_2011/article/details/7497458
我们可以从这点儿出发做一些优化，尽量对JS做动态加载，使WebView尽快完成加载，到达渲染阶段。


2、渲染
先提两个JS事件，DOMContentLoaded（只有IE不支持）和onload。一个是DOM渲染完成后发出，一个是所有资源加载并渲染完成后发出。所以说，DOMContentLoaded是不关心那些不影响DOM树结构的资源（图片、CSS、JS）的加载的。
这样的话，我们可以给Html注入一个DOMContentLoaded Listener，在接收到DOMContentListener之前，向用户展示一个Native的Loading。
但是要注入DOMContentLoaded就必须拦截WebView.loadUrl请求，自己去请求html，然后把获取到的html以data的形式提供给WebView。这样做的缺点是对于某些没有在header中提供charset，而是在htt-eqv中提供charset的网页来说，程序无法准确获取到其charset，会出现乱码。比如新浪的某些网页:http://finance.sina.com.cn/roll/20130323/032214928432.shtml。
另外，DOM树的渲染有一个过程，其速度过慢的话，会引起渲染时白屏，我们要尽量减少DOM初次渲染时的工作量来缩短白屏的时间。比如，可以减少初次加载的html的大小，延后CSS渲染。以求先让用户看到一个东西。


3、Ajax请求
Ajax请求的好处就是开发的耦合度更低，用户看到初始页面的速度更快。缺点是增加手机浏览器的压力。比如，会增加网络请求，增加用户等待时间，增加流量等。
我们可以进行一些优化，来减少Ajax请求带来的缺点。
合并请求：把同时发生的多个请求合并为一个。比如一个页面中的数据可能会来自于多个不同的接口，我们可以把对这些接口的请求放在一起，一次性请求完毕。
强化缓存控制：把不经常更新的接口请求结果写入LocalStorage，用户再次进入页面时，就不必从网络上重新获取了。


最后说一下hybrid中的登录共享问题。
如果用户进入客户端时登录过一次了，在进入客户端嵌入的Html页面时，再让用户登录，相信用户会抓狂的。同样，在Html页面上面登录成功后，也不要再让用户在客户端登录。这就需要在Native页面和Html页面之间做一下登录共享。
我们可以有两种方式解决第一个问题。第一种是客户端登录后，进入html页面时，在url上加入认证信息。另一种方式时登录成功后向WebView注入Cookie。
要解决第二个问题，恐怕只有彻底干掉html登录了：在WebView中拦截登录url，用客户端登录来替换。
登录信息共享的问题解决了，我们还要记得在登录信息发生变化时，在客户端和html之间对登录信息进行同步。