继上面的《玩转HTML5移动页面（动效篇）》之后，上次讲的就是一些让页面动起来的小技巧。页面移动的基础是可用功能的页面，所以有必要分享一些优化细节的技巧和方向。熟悉一些方法论会大大提高页面开发的效率，也可以防止遗漏。====HighEnergyAhead====（1）Animatedsprite涉及到很多动画和元素，所以一定要使用sprites！网上有一些工具可以帮你生成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本身是不支持的，这里需要一些处理工具，让导入的页面在输出之前进行assembly-compressed的一个步骤。(2)图片压缩图片压缩是家常便饭，但很多人还是忘记压缩，实在是浪费带宽和流量……压缩图片需要好的工具，比如智图、TinyPNG、JPEGmini等。图片优化除了依靠工具，还有以下几种方法：尽量避免使用PNG24。如果图片颜色要求不高，请使用PNG8；使用新格式，WEBP和BPG等新格式，请大胆尝试，不考虑兼容性；使用SVG和ICONFONT而不是简单的图标；使用FUFU的wordspider来代替艺术字体抠图。(3)多终端兼容多终端兼容是一切的基础。要知道有的人拿着肾6+，有的人拿着肾4。大号是414×736，小号是320×416（IPHONE4在SAFARI里保留了上下导航），所以，多端兼容性是非常必要的。以前有个派叫320派，就是大部分页面都是320宽的，所以直接用320的容器把所有页面包起来很容易，但是IPHOEN6和IPHONE6+的出现简直把这个派给消灭了。那么它究竟是如何兼容的呢？这里我分三个时期讲：A.设计初期。先看设计稿，因为320派，大部分设计稿只考虑IPHONE5来设计，所以很多背景元素的宽度只有320px（页面实际渲染宽度），如下图。那么这时候设计就需要提供一个更长的扩展背景，最后可以重复，使用background-repeat可以缩小图片的尺寸。B.中期设计。即具体的兼容方式可以通过CSS3MediaQuery和classes来覆盖。1.CSS3媒体查询，按范围兼容模型。/*iphone6*/@mediaonlyscreenand(min-device-width:375px)and(max-device-width:667px)and(orientation:portrait)and(-webkit-min-device-pixel-ratio:2){.page6.ele-building{top:69px;}.page6.ele-runner{top:100px;}.page6.ele-pophome{top:16px;}}2.类覆盖，这种方式适用于小屏或者大屏屏幕完全兼容。首先添加小屏（大屏）识别类，小于420表示小屏（IPHONE4有上下导航栏）：varbh=$(window).height();//480-64=416iphone4if(bh<420){$('body').addClass('low-screen');}然后对应的识别类加上要改变的元素覆盖率，例如：.page6.ele-bg{top:10px;}.low-screen.page6.ele-bg{top:0px;}C.后期设计。这是最后一步，整体的检查和体验，会暴露出一些问题，比如IPHONE6P上的元素显得小或者IPHONE4上的元素无法挤压，可以来个大招来解决：适当使用zoomlargescreens:(magnification)ortransform:scale(magnification)增加元素，测出的失真完全看不出来，设计者也很满意（毕竟不用多做图！）；针对小屏幕适当去掉了一些元素，比如一些翻页提示，一些多余的图标可以通过设置为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已准备就绪，需要大家扩散分享，以示牛逼。但分享其实是一个陷阱，分享到微信、手Q等存在各种问题。A.微信老微信会使用WeixinJSBridge来声明分享的缩略图、标题、文字等，比较方便。例如：最新的微信提供了一个新的微信SDK，需要公众号绑定域名后调用分享。可以说，分享功能会更强大，陷阱也会更少。B、手Q手Q支持声明meta标签的分享方式，比如在qq.com域名下，也支持api的定义方式。C、广义分享默认兼容旧版微信、手Q或各种浏览器和平台。可以用这个方法：标题写h1，内容写p，缩略图写img。你只需要隐藏h1。此处的缩略图必须大于200x200像素。例如：当然，这也有利于搜索引擎拉取信息。还有更多的陷阱要分享。比如QQ浏览器、Chrome等不同的浏览器也有自己默认的拉取方式（部分截图用作缩略图），需要更多的测试和优化。(5)SEO搜索引擎优化SEO(SearchEngineOptimization)的基本做法是写好页面结构，包括：定义网页的精确标题。您的标题应该是通用的，可以清楚地告知搜索引擎和用户您网站的一般内容和目的。可以是当前页面的标题-类型-产品名称，例如“为大家猜歌-年费黄钻-QQ空间”。为页面内容补充描述和关键字的元标记。需要先简单概括一下页面的主要目标，然后补充描述，根据关键词补充关键词。优化您的超链接和图像。包括优化超链接显示的文字，必须是有语义的，和被超链接的网页相关，比如“空间首页”不要链接到“www.qq.com”。同时添加“title”和“alt”属性，例如“
