移动端网页性能小结
来源:互联网 发布:淘宝店铺推广语 编辑:程序博客网 时间:2024/04/29 09:27
在制作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叠加布局的页面要短得多。
在
- 移动端网页性能小结
- 移动端开发小结
- 移动端网页制作
- 移动端性能优化
- 移动端性能优化
- 移动端性能优化?
- h5移动端知识小结
- 移动端布局学习小结
- 移动端 webapp meta小结
- 移动端CSS常用小结
- Dynamics 移动端调试小结
- 移动端CSS常用小结
- 移动网站性能优化:网页加载技术概览
- 移动端开发网页注意
- 始于移动端网页布局
- 移动端网页开发--开篇
- 聊聊移动端性能提升
- 移动端页面性能探究
- sqlite的事务和锁,很透彻的讲解 【转】
- 系统性能测试计划
- 对 Lua 字节码进行加密
- C# 中根据TextBox输入内容,点击Button事件的相关事宜
- 使用tomcat的一些常见的问题
- 移动端网页性能小结
- D2P:Distance-Based Differential Privacy in Recommenders
- OpenCV中用于摄像头视频读取的函数说明
- 【linux】linux根文件系统制作
- plsql找不到数据库名的解决办法
- 分布式系统之CAP理论 - DM张朋飞
- datagridview里面的checkbox全选和取消全选
- boost::unordered_map与stl::map
- EF GroupJoin