承接《玩转HTML5移动页面（动效篇）》，上次说的是让页面动起来的一些小技巧。
而页面动起来的根基是功能可用的页面，因此有必要分享一些优化细节的技巧和方向，熟悉掌握一些方法论还是会对页面开发大大提高效率的，并且也能防止疏忽缺漏。
（1） 动画雪碧图
涉及的动画十分多，用的元素也十分多，请务必使用雪碧图（Sprite）！
网上的工具有一些可以帮助你生成雪碧图的工具，例如CssGaga，GoPng等等，自动化构建工具Grunt和Gulp也提供了相应插件。
特别地，如果单张雪碧图面积实在太大，可以拆分雪碧图，例如拆分成2-4张，因为现代浏览器都支持4-6个同源请求下载，若资源实在太多，也可以考虑把静态资源放在不同源域名下去请求，这里牺牲多几个请求换来图片同时加载比一张图片慢慢加载要好，当然，这需要具体情况去衡量。
顺便提一下，我写动画的一个小技巧是把每一页的动画分在一个import.css里面，然后最后在主样式中import进去，这样方便调试动画，也容易维护，例如：
//style.css @import url("reset.import.css"); @import url("loading.import.css"); @import url("m-animate-1.import.css"); @import url("m-animate-2.import.css"); @import url("m-animate-3.import.css");
当然，import不是原生支持的，这里需要一些流程化工具让import的页面在输出之前经过组装-压缩的步骤。
（2） |
温馨提示：资源转载网络个人收藏，如有侵权或下载链接失效或密码不对请联系站长
1、在论坛里发表的文章仅代表作者本人的观点，与本网站立场无关。
2、论坛的所有内容都不保证其准确性，有效性，时间性。阅读本站内容因误导等因素而造成的损失本站不承担连带责任。
3、当政府机关依照法定程序要求披露信息时，论坛均得免责。
4、若因线路及非本站所能控制范围的故障导致暂停服务期间造成的一切不便与损失，论坛不负任何责任。
5、注册会员通过任何手段和方法针对论坛进行破坏，我们有权对其行为作出处理。并保留进一步追究其责任的权利。
|
