最近几个朋友想转型做移动设备的前端开发,来问我这方面需要什么技能,传统网站和移动端的网站有什么区别?
我想了想,决定整一篇文章介绍一下 传统网页前端开发 和 移动端网站前端开发有哪些不同之处。
动画效果
传统web页面上,我们常常使用jQuery animate()方法来实现页面元素的动画。
在移动端,我建议你使用 CSS3的方式来实现动画,CSS3的 translation 和 animation 动画相对于js动画性能更高,动画更流畅,这点在低配置的设备上体现更加明显。
另外在使用CSS3动画时,可以加入transform: translate3d(0, 0, 0),这条代码可以开启设备自身的3D加速,使CSS动画执行起来更加流畅,不过同时也曾加CPU的负担,所以请酌情使用。
页面渲染
CSS3 阴影 和 渐变之类的效果渲染速度比较慢,这就是移动端为什么推崇扁平化的原因之一。这个问题在PC上你根本发现不了。但是在配置较低的移动设备上执行时,就很容易发现,阴影或渐变效果渲染有一些延迟。
加载速度
移动2G网络很慢,3G网络速度也远不如PC的有线网络,我们必须严格控制页面体积。有的人说现在wifi随处都是,根本不用担心。但实际情况并不像我们想象的那么热关,wifi的覆盖范围 和 信号稳定还是不能保证。
刚从传统web转型过来的前端常常理所当然地在移动页面上使用 jQuery库,但你仔细测试一下不难发现,jQuery库体积90k+,这个页面加载带来不小的负担。我建议使用zepto库,因为他的语法和jQuery是一样的,可以直接把原来用的jQuery替换成zepto库,然后稍微调试一下即可。
zepto库体积24k左右,是jQuery库的1/3,好处也可想而知了。
另外移动端页面图片需要进行严格的压缩,条件允许的情况下使用 base64,SVG和css3 font-face可对图片压缩带来很大帮助。
我觉得移动端的web页面,首次加载的数据至少要低于50k才算理想,高于这个标准的页面,得好好考虑下优化了。
计算能力
大多数移动设备的硬件计算能力其实远不如PC,这就导致在处理一些大型数据的时候整个页面卡得不行,又一次我开发一个图片压缩的小功能,在过程中需先把图片转成base64格式后再做压缩处理,图片转换后产生上完个字符的字符串,使得整个页面卡的不行,根本没办法做其他操作,但同样的功能搬到PC上不会有任何问题。
如果遇到这类问题,可以考虑使用HTML5 WorksAPI 的多进程特性。
测试
最后讲讲页面调试方面,PCweb上调试很方便,firefox,chrome等都自带很强大的调试工具,但到了移动端似乎没看到这类强大的工具。
我这推荐一款调试工具 weinre 和chrome的调试方式差不多,可帮你解决移动web页面调试的问题。
转:http://www.vqianduan.com/459.html