移动端开发坑整理之一

关于离线缓存与局部更新

1. 版本迭代快的，不适合用离线缓存，由于用户不会主动去清理浏览器的缓存
2. 局部更新的模块可以使用iframe，但是iframe不支持orientation的media query，需用宽度辨别

关于转屏

1. 在某些低版本的android不支持orientationchange事件，可以用resize替代，resize会多次触发，orientationchange在高版本的UC浏览器也会多次触发，解决的办法是用延时器setTimeout延迟处理函数执行，延时器执行前判断是否存在延时器，若有则清除延时器
2. js获取不了portrait/landscape，只能用window.orientation来取角度（0 90 180 -90），但是android和ipad的角度方向相差90
3. 低版本android用window.screen获取屏幕分辨率的宽高来判断横竖屏

关于区域显示与隐藏

display:none在移动浏览器上饱受诟病，特别是性能问题，引起回流，也影响到子元素，而visibility却占用了一定的空白区域，对于移动浏览器来说，过大的空白就是浪费。还有另外的实现办法是绝对定位，并移动到屏幕区域之外，但是这种办法如果在浏览器性能不高的情况下，会有视差效果，造成视觉上的闪动，这是不可原谅的。最好的解决办法是使用溢出隐藏技术，利用height:0和overflow:hidden来隐藏内容。

对瀑布流的改进--适应移动设备

最近在做ipad美女图库的瀑布流无限拖的实现，需要考虑的问题比较多：

布局自适应，多列切换，横竖屏切换，样式的重绘效率，回流效率

图片的加载与渲染效率，网络状况，DOM操作的效率

ipad设备的特性，图片过多造成，页面重绘的效率

滑动事件的触发，滚动性能问题

所有的考虑归根到底都是要考虑性能的最大化发挥，对浏览器内核的特性也应当有所了解，比如safari的scroll特性，是在scroll停止的时候才触发到scroll事件，其中包括惯性滚动等。

关于回流重绘，使用绝对定位，需要计算其相对位置，图片加载头部信息的尺寸内容等，造成的性能损耗较大，尤其是横竖屏切换或者列数切换时候，需要重新......