最近几个朋友想转型做移动设备的前端开发,来问我这方面需要什么技能,传统网站和移动端的网站有什么区别?

我想了想,决定整理一篇文章介绍一下传统网页前端开发 和 移动端网站前端开发有哪些不同之处。

动画效果

传统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页面调试的问题。