标签：
最近几个朋友想转型做移动设备的前端开发，来问我这方面需要什么技能，传统网站和移动端的网站有什么区别？
我想了想，决定整一篇文章介绍一下 传统网页前端开发 和 移动端网站前端开发有哪些不同之处。
动画效果
传统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
标签：
原文地址：http://www.cnblogs.com/web-easy/p/5057115.html
