关于闪屏问题的一些总结

最近一周都在和闪屏作斗争，由于只能从html和js的层面进行分析和解决，所以到目前为止仍有一些型号的手机存在闪屏或其他体验问题，
但也发现了一些线索，剩下的实在是无能为力了，只能望着官方了；
1、部分低端机上的闪屏问题；
原因又两种，一种是dom结构复杂，另外一种是加载了过多的css样式，前者好解决，后者的话如果用了mui.css就比较麻烦了，我现在是尽量少用mui.css，要用到一些mui的控件时，就把依赖的样式从css中拷贝出来，不过那个依赖关系我就不说了，各种乱，之前有建议官方把css拆成 base.css+各种控件.css，后来我发现还真不好拆，前期没设计好，后期越来越臃肿；
2、部分手机头部闪白的问题；
为什么是闪白而不是闪黑、闪黄，闪绿？因为闪的是document.body的颜色，此处使用障眼法解决，将body的背景色设置为和header一样的颜色（比如蓝色），这样即使闪了也看不出来，当然这样做了后有极少数手机上会出现底部或中间出现闪蓝的情况，出现该情况的手机下面会说，一定是显示时有各种问题的手机；
3、android4.4以下的手机（几乎是所有）出现一级界面滚动流程，二级界面滚动时抖动厉害的问题；以及在二级界面中显示/隐藏虚拟按键导致界面花的问题；
这个问题之前有发帖问http://ask.dcloud.net.cn/question/8829；当时官方说专门买了一台华为P6时还是蛮感动的，但后来qq上给我说抖动的问题影响不大（说实话影响非常大的，有图片的话就更不用说了），然后P6上没有花屏的问题；我问了一下他们P6的系统版本号，一直没有回，当时心里一横，就开始自己研究闪屏的问题了，因为我坚信同一款手机上，只要有一个界面（一级界面）没问题，那么其他界面也一定是可以没问题的；
没花两个小时的时间，还真被我找到原因了：
如果页面“a”的底层存在未隐藏的的webview，就会出现该问题；
所以解决方案应运而生，重构了一下webview的调度和管理的js（庆幸当时没有用mui的那一套），打开一个界面时把当前界面（存在parent时把parent）隐藏掉，返回时再显示出来(当然细节还是蛮多的，实现起来还是有点复杂，特别是涉及到打开第三方界面时)；OK 完美解决；目前还未遇到不适用的机型；
4、andorid 5.0.2上的各种问题，也不知道是系统的原因还是手机的原因，反正我这边有一部努比亚小牛，5.0.2的系统，会有这样的情况；
屏幕抖动的问题，和上一个问题类似，只是抖得更严重，排查了一下，原因和上一个问题的原因也差不多，只是更苛刻，只有某个界面的底层没有显示的webview，并且这个界面没有parent，并且这个界面有设置scrollIndicator："none"时才不会出现抖屏现象，解决方案我已经有了，但是代价太大了，又得重构webview调度和管理的那套js，实在是不想改了，期待官方能创造奇迹吧；
5、部分手机在创建了过多的webview后会出现上述第三个问题，比如三星Note4的瓶颈大概是30个，华为p6大概是18个，不过这个肯定不仅仅和数量有关系，和页面的内容肯定也有关系的，由于我这边的app功能点比较多，又想提升体验，所以用了不少的预加载，再加上大量使用了template的结构，所以很容易就二十多个webview了；
解决方案是复用webview，因为发现加载一个页面时，从页面加载完毕（body.loaded事件）到plusReay需要的时间稍微有点长，甚至比loadURL到body.loaded花的时间还要长，然而我们取参数通常是在plusready里面取，取完参数再根据参数画界面（静态页面就不考虑了），所以不使用预加载的话确实会出现白屏（huo）等现象；
所以复用webview+通过localStorage传参数可以在在减少webview数量的同时提高用户体验（当然体验赶预加载还是要差点）；
具体的做法是写一个js服务，提供两个方法，borrowView和backView，用于控制webveiw的创建、调度和销毁；当然里面有很多细节，比如可以指定某个webview借了不还(等同于预加载)，也可以指定某个webview在还的时候销毁（比如使用了百度地图的webview）还是清除（webview.clear()）;
6、所有手机的转场时闪屏的问题（非预加载模式或者预加载模式+动态页面内容（通过evalJS刷新）），如果是使用pop-in,转场时是不会出现闪屏的，因为pop-in的过程中是不会去渲染界面的，所以转场的时候界面会是白的，或者会是之前的内容（这个取决于业务逻辑）
但是如果是用的slide-in的话，由于在动画的过程中会去渲染界面，比如动画刚开始时你的界面是空的，转场到一半时，界面上有内容了，视觉上当然会闪，所以遇到这个问题是正常了；解决方案是转场的时候显示一个静态的dom（如加载中），在webview显示完毕后再显示业务内容（最好有渐变效果）；