而页面动起来的根基是功能可用的页面，因此有必要分享一些优化细节的技巧和方向，熟悉掌握一些方法论还是会对页面开发大大提高效率的，并且也能防止疏忽缺漏。
（1）动画雪碧图
涉及的动画十分多，用的元素也十分多，请务必使用雪碧图（Sprite）！
网上的工具有一些可以帮助你生成雪碧图的工具，例如CssGaga，GoPng等等，自动化构建工具Grunt和Gulp也提供了相应插件。
特别地，如果单张雪碧图面积实在太大，可以拆分雪碧图，例如拆分成2-4张，因为现代浏览器都支持4-6个同源请求下载，若资源实在太多，也可以考虑把静态资源放在不同源域名下去请求，这里牺牲多几个请求换来图片同时加载比一张图片慢慢加载要好，当然，这需要具体情况去衡量。
顺便提一下，我写动画的一个小技巧是把每一页的动画分在一个import.css里面，然后最后在主样式中import进去，这样方便调试动画，也容易维护，例如：
//style.css
importurl(reset.import.css);importurl(loading.import.css);importurl(m-animate-1.import.css);importurl(m-animate-2.import.css);importurl(m-animate-3.import.css);当然，import不是原生支持的，这里需要一些流程化工具让import的页面在输出之前经过组装-压缩的步骤。
（2）图片压缩
图片压缩是老生常谈，但是仍然有不少人忘记压缩，那可是活生生的带宽和流量的浪费啊…
压缩图片需要有好工具，有智图，TinyPNG，JPEGmini等等。
依靠工具外，还有以下方式可以优化图片：
1.尽量避免用PNG24。如果图片色彩要求不高，请使用PNG8；
2.使用新格式，WEBP和BPG等新格式的到来，在不用考虑兼容的情况下请大胆尝试；
3.用SVG和ICONFONT代替简单的图标；
4.用FUFU的字蛛来代替艺术字体切图。
（3）多终端兼容
多终端兼容是一切的根基，要知道有人拿着肾6+，有人拿着肾4，大则×，小则×（IPHONE4在SAFARI保留上下端导航），因此多终端兼容是十分必要的。
曾经有一种派系为派系，就是大部分页面都是宽度，因此干脆直接用的容器来包一切页面，那样也简单，然而IPHOEN6和IPHONE6+的出现简直是灭了这个派系。
那么到底要如何兼容呢？
这里我分了三个时期来说说：
A.设计初期。先审视设计稿，因为派系的原因，大部分设计稿只考虑到IPHONE5来设计，因此很多背景元素是只有px宽度（页面实际渲染宽度），例如下图。
那么，这时候就需要设计提供一个较长的延伸背景了，最好是可以重复的，用background-repeat可以减少图片大小。
B.设计中期。也就是具体的兼容方法，可以使用CSS3MediaQuery和类覆盖。
1.CSS3MediaQuery，按范围兼容机型。
/*iphone6*/
mediaonlyscreenand(min-device-width:px)and(max-device-width:px)and(orientation:portrait)and(-webkit-min-device-pixel-ratio:2){.page6.ele-building{top:69px;}.page6.ele-runner{top:px;}.page6.ele-pophome{top:16px;}}2.类覆盖，这种方式适合直接为小屏或大屏做整体兼容。
首先，为小屏（大屏）加一个识别类，这里小于表示为小屏幕（IPHONE4有上下导航栏）：
varbh=$(window).height();//-64=iphone4if(bhlt;){$(body).addClass(low-screen);}
然后，对应识别类加上要变动的元素覆盖，例如：
.page6.ele-bg{top:10px;}.low-screen.page6.ele-bg{top:0px;}
C.设计后期。这是最后一步，整体检查和体验，这里面会暴露一些问题，例如元素在IPHONE6P显得小了或者元素在IPHONE4挤不下了，可以来最后大招解决：
1.大屏适当用zoom:(倍率)或者transform:scale(倍率)来增大元素，实测失真根本看不出来，设计师也满意（毕竟不用多做一张图！）；
2.小屏适当去掉一些元素，例如一些翻页提示，一些多余图标，可以让优雅降级，把它们display:none掉。
有以上几步，基本就能兼容大部分机器了。兼容一直是个苦活，但是这是前端必修课，多练就会发觉其实也没有那么难嘛。
（4）交互提示
前面说了，加了音效就要加上音乐切换开关的按钮，不然会被用户骂死。还有其他，例如如果你的页面不能兼容横屏，请监听横屏状态，然后加上适当的横屏提示。
例如：
//横屏监听varupdateOrientation=function(){if(window.orientation==-90
window.orientation==90){$(.landscape-wrap).removeClass(hide);console.log(为了更好的体验，请将手机/平板竖过来！);}else{$(.landscape-wrap).addClass(hide);console.log(竖屏状态);}};window.onorientationchange=updateOrientation;
提示越多，界面越友好，有时候设计师会漏掉一些可能出现的页面情况。
作为有态度的前端，请好好把关，让用户有好的体验。
（5）分享接口
H5做好了，要传播分享才能展示你的牛逼轰轰。
然而分享其实是个坑，分享到