谈谈移动web
发布在杂谈2015年3月23日view:9895HTML5前端开发Xmgvzgrk移动开发
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

前言:
本篇是小编对自己1年多来在移动web工作上的一些总结,希望对大家有所帮助,多有错误之处,还望口下留情。
正文:
先来聊聊编码吧:
PC和移动的JS有什么区别呢?其实本质上也是完成DOM操作和事件交互,事件上来说移动端用touch系列替代了PC的mouse系列,其他的无非就是把jquery替换成了zepto,ajax照常使用;
但是,在编码时的侧重点是有区别的:
在PC时代,为了兼容ie6-浏览器,我们尽可能提高js编码质量以提高运行性能,在移动端这点同样适用,但是移动端,小编觉得还有一点更为重要,那就是,要注重代码压缩,这一点有时候甚至比执行效率更重要,高质量压缩代码可以为用户节省流量,也可以加快页面响应速度(2G用户还是不少见的)。
在来谈谈事件绑定:
在PC端,对于数据列表批量绑定的需求,我们通常适用事件代理的方式来提升性能(事件代理:将事件绑定在li的父级元素ul上,..具体请问百度)。再来看看移动情况,在手机web上,当用户触发点击效果时,系统会闪现一个浅蓝色遮罩,那么坑就来了,如果对数据列表做了事件代理会怎么样呢?...每次点击每条都会导致整块区域显示蓝层,这种体验无意是非常差的,有些朋友会说,通过css可以进行屏蔽,是的,可是现实很残酷,万恶的兼容性问题在移动端同样存在,而且不只是系统不同,同系统手机不同也存在差异,小编就遇到过无效的样机。小编觉得,可以不考虑代理,直接绑定到具体元素上。
下拉刷新:
这个很炫的效果在本地APP里,几乎是随处可见,很多web页面也纷纷模拟,但是在android的各种兼容问题下,众多人选择了iScroll,这个库模拟的可以说是相当仿真,但是,坑又来了,在android 2x上,会出现明显的卡顿,部分机型上甚至滑动起来很吃力,但是原生页面的自然滚动则依旧很流畅。(小编也没什么好的万全之策,还请高手留言赐教)
左右滑动的焦点图:
这个在PC上是极其常见的特效了,在一些移动软件上也很普遍,那么在web上,体验又如何呢?移动浏览器有个特性,当进行左右手势行为时会触发浏览器自身的的前进后退行为。有些浏览器提供了关闭该效果的设置项,但事实上,很少有用户会进行设置(有些用户根本不知道该项设置的存在)
技术选型:
在PC时代,许多网站采用php,jsp来渲染页面,然后返回给客户端页面。这套模式在移动端产品上同样可以适用。不过,在不考虑SEO的情况下,小编觉得,可以来体验下SPA模式(单网页应用..,..具体请问百度)这种模式有其独特的优点和用户体验(细节不展开表述了,如后有时间小编可以单独开系列谈谈SPA话题),但最大的问题是,对搜索引擎不友好。
最后建议几句:
1. 重视代码压缩, 而且要高度重视
2. 尽量简化DOM结构,复杂的DOM结构在低端机下也会出现白屏卡顿等异常
3. 适量使用base64,base64可以减少请求,在2G下,发送一个网络请求是一件吃力的事情
4. 动画使用translate替代left,top, 关于这个,就不多解释了吧

本篇就写到这里,还有很多很多的坑和问题,小编也没能找到解决答案,也在探索中。感谢您的阅读。

评论
发表评论
暂无评论
WRITTEN BY
前端狮子
JS前端开发工程师 :喜欢研究js,nodejs,html5; 希望结交更多朋友~
TA的新浪微博
PUBLISHED IN
杂谈

随手写

友情链接 大搜车前端团队博客
我的收藏