移动开发兼容性问题及性能优化

Posted 2020-06-14

兼容性问题：

ios 5.0- 的Date构造函数不支持规范标准中定义的YYYY-MM-DD格式，如 new Date(‘2013-11-11‘) 是 Invalid Date, 但支持YYYY/MM/DD格式，可用 new Date(‘2013/11/11‘)
IOS（7.1.1版本）使用webapp模式时滚动元素无法滚动到头，解决办法是设置 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 让APP占用整个屏幕空间布局。参考官方文档
IOS（7.1.1版本）滚动元素中设定其中某个元素的 innerhtml 属性一定机率导致画面闪动（估计是触发了重绘），解决办法是设置文字时使用textContent属性。
IOS（7.1.1版本）动态改变滚动元素中某个元素 top 属性一定机率导致画面闪动，解决办法是使用 translateY 替代
IOS（7.1.1版本）通过-webkit-overflow-scrolling: touch方式设定的滚动元素时，如果滚到头的时候拖动，会出现页面的整体滚动，解决办法见https://github.com/chemzqm/scrollfix/blob/master/index.js
IOS8一个页面内播放超过15个video之后触发解码器错误，将不能继续播放其他video。

三星I9100 （android 4.0.4）不支持display:-webkit-flex这种写法的弹性布局，但支持display:-webkit-box这种写法的布局,相关的属性也要相应修改，如-webkit-box-pack: center;移动端采用弹性布局时，建议直接写display:-webkit-box系列的布局

touchmove事件在Android部分机型(如LG Nexus 5 android4.4，小米2 android 4.1.1)上只会触发一次解决方案是在触发函数里面加e.preventDefault(); 记得将e也传进去。

性能优化：
1、尽可能多的利用硬件能力，如使用3D变形来开启GPU加速；
2、尽可能少的使用box-shadows与gradients；
3、尽可能的让动画元素不在文档流中，以减少重排（采用position：absolute,fixed）；
4、优化 DOM layout 性能；