注：本文出自腾讯AlloyTeam的元彦，文章也可以在github上浏览。请尊重版权，转载请注明来源，多谢～～高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂，我们总结为以下几点： 流量、功耗与流畅度。 在PC时代我们更多的是考虑体验上的流畅度，而在Mobile端本身丰富的场景下，需要额外关注对用户基站网络流量使用的情况，设备耗电量的情况。关于流畅度，主要体现在前端动画中，在现有的前端动画体系中，通常有两种模式：JS动画与CSS3动画。 JS动画是通过JS动态改写样式实现动画能力的一种方案，在PC端兼容低端浏览器中不失为一种推荐方案。 而在移

Karat克拉这个网站，就是基于sails开发的，前后端都启用了es6+es7特性的开发。我在github上传了部署代码和文档：https://github.com/xunuoi/sails-babel 修改变动比较多，github上可能不是最新的代码和文档。主要是用了一个支持babel的hook和babel的gulp组件，来支援es6~新建一个空sails项目，不包含前端：sails new withu.cc --no-frontend --template=swig修改.sailssrc1、添加如下，否则启动sails lift会有找不到grunt的

SVG动画，结合了CSS3的transition， 先看下效果图 动画效果： 直接参见本页面的导航菜单鼠标一上去，会有border变长，通过border的dashoffset的变化，包围住整个菜单矩形。用到了css3的animation，详细用法大家可以看下： http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html 讲的比较好注意，Firefox中跟webkit计算dash-offset方法有不同，需要fix一下：/** * FIX Firefox bugs: an