谈谈移动web
发布在杂谈2015年3月23日view:5877HTML5前端开发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, 关于这个,就不多解释了吧

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

评论
发表评论
1年前
赞了此文章!
1年前

写的不错

2年前

移动端用saber框架也很不错的http://ecomfe.github.io/saber/

2年前

@小不点典 那种办法确实可以解决对搜索引擎的痛点,不过实力操作来说,难度很大,像司徒大神那个node-avalon也会带来很多性能的困扰,下拉刷新那个,我们这也有自己的实现方式,当时最大痛点在于处理touchmove事件的控制上,三星i9100比较明显…,SPA我们团队也尚在探索中,感谢您的回答

2年前

SPA对搜索引擎不友好的问题,可以考虑利用history来做。前后端可以共享一套模板,初次的时候是由后端渲染,可以参照 https://github.com/dolymood/mobile-router.js 。还有至于下拉刷新,可以参照 https://github.com/maxzhang/maxzhang.github.com/issues/8 中下拉的做法。

2年前

@忆-曦 弄清楚这个有点要解释下webkit内核渲染和,很复杂,你暂且可以这样理解:translate 让硬件在渲染页面时成本比 left,top 低,所以推荐使用,

2年前
赞了此文章!
2年前

@忆-曦 有硬件加速

2年前

很想知道为什么要有translate代替left和top啊 ?

2年前
赞了此文章!
2年前
赞了此文章!
WRITTEN BY
前端狮子
JS前端开发工程师 :喜欢研究js,nodejs,html5; 希望结交更多朋友~
TA的新浪微博
PUBLISHED IN
杂谈

随手写

我的收藏