当前位置 : 主页 > 手机开发 > 其它 >

Hybrid开发的优化策略

来源:互联网 收集:自由互联 发布时间:2021-06-12
问题: 1,内嵌hybrid模式的特点是什么。 2,缺点是什么。 3,如果bybrid模式卡顿,原因又是什么,怎么解决。 4,如果要做整齐布局,一般用flex或display:table;如果涉及到非规整的布局可

问题:

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之间对登录信息进行同步。
网友评论