移动端网页性能小结

在制作web端的网页时，考虑到手机的性能问题j，无论是js的代码性能还是网页动画效果都要尽可能进行优化。

最可能造成卡顿现象的是网页的动画效果。目前主流的web端动画大多是翻页、浮动、拖拽、滚动等，以走马灯这一效果为例说说性能的优化。

图片/文字无缝循环被用于许多地方，手动的话一般我们都倾向于将其通过html的滚动条实现（window.onscroll = function）。这样做的好处是代码实现会变得非常简单（div移动距离/容器长度 = 滚动条移动距离），但是由于滚动条事件类似于定时器一样会不断检查，那么实际上某个标签要移动短短100px的距离（目前一般手机屏幕的十二分之一至八分之一）可能就进行了至多100次的移动！放在电脑上并没有任何不妥，但是手机即使开启硬件加速也未必能流畅运行，通过定时器事件绑定的动画效果也是如此。所以我们要尽可能降低动画的频率，因而一般上web端动画以翻页效果为主，1次/页的动画频率保证web端网页的流畅性和稳定性。

如非必要，尽量使用原生js以及少用插件。

这是关于性能和兼容的问题，无论是jqm还是mobile angular UI等框架都封装了大量你未必用得到的样式和函数。我的经验就是在下拉页面使用ajax读取数据的情况下，比较老的手机系统并不能很稳定地使用jqm的css函数，angularjs的UIrouter在快速切换的情况下还有明显的卡顿，而改用原生js则没有这种问题，代码我将会在下一篇文章放出来对比。

js提倡使用闭包，但是往往很多人在使用完闭包后没有将其引用断开，造成内存泄漏，也是一个网页越跑越卡的原因之一。

页面布局也要尽可能减少使用css效果以及js动态变化。在移动设备上，一个简洁得体的页面的加载时间会明显比一个大量div叠加布局的页面要短得多。

在