承接上文《
玩转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） 图片压缩
图片压缩是老生常谈，可是仍然有很多人忘记压缩，那但是活生生的带宽和流量的浪费啊… 压缩图片须要有好工具，有
智图，
TinyPNG，
JPEGmini等等。 依靠工具外，还有如下方式能够优化图片：
- 尽可能避免用PNG24。若是图片色彩要求不高，请使用PNG8；
- 使用新格式，WEBP和BPG等新格式的到来，在不用考虑兼容的状况下请大胆尝试；
- 用SVG和ICONFONT代替简单的图标；
- 用FUFU的字蛛来代替艺术字体切图。
（3）多终端兼容
多终端兼容是一切的根基，要知道有人拿着肾6+，有人拿着肾4，大则414×736，小则320×416（IPHONE4在SAFARI保留上下端导航），所以多终端兼容是十分必要的。 曾经有一种派系为320派系，就是大部分页面都是320宽度，所以干脆直接用320的容器来包一切页面，那样也简单，然而IPHOEN6和IPHONE6+的出现简直是灭了这个派系。
那么到底要如何兼容呢？ 这里我分了三个时期来讲说：
A.设计初期。先审视设计稿，由于320派系的缘由，大部分设计稿只考虑到IPHONE5来设计，所以不少背景元素是只有320px宽度（页面实际渲染宽度），例以下图。
那么，这时候就须要设计提供一个较长的延伸背景了，最好是能够重复的，用background-repeat能够减小图片大小。
B.设计中期。也就是具体的兼容方法，可使用CSS3 Media Query和类覆盖。 1.CSS3 Media Query，按范围兼容机型。
/*iphone6*/
@media only screen
and (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有上下导航栏）：
var bh = $(window).height();
// 480 - 64 = 416 iphone4
if(bh<420){
$('body').addClass('low-screen');
} |
而后，对应识别类加上要变更的元素覆盖，例如：
.page6 .ele-bg{top: 10px;}
.low-screen .page6 .ele-bg{top: 0px;} |
C.设计后期。这是最后一步，总体检查和体验，这里面会暴露一些问题，例如元素在IPHONE6P显得小了或者元素在IPHONE4挤不下了，能够来最后大招解决：
- 大屏适当用zoom:(倍率)或者transform:scale(倍率)来增大元素，实测失真根本看不出来，设计师也满意（毕竟不用多作一张图！）；
- 小屏适当去掉一些元素，例如一些翻页提示，一些多余图标，可让优雅降级，把它们 display:none掉。
有以上几步，基本就能兼容大部分机器了。兼容一直是个苦活，可是这是前端必修课，多练就会发觉其实也没有那么难嘛
（4）交互提示
前面说了，加了音效就要加上音乐切换开关的按钮，否则会被用户骂死。还有其余，例如若是你的页面不能兼容横屏，请监听横屏状态，而后加上适当的横屏提示。 例如：
// 横屏监听
var updateOrientation = 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，须要在公众帐号绑定所属域名以后调用SDK做分享，能够说分享功能会更增强大，坑也会更加少。
B.手Q 手Q支持声明meta标签的的分享方式，例如：
而若在qq.com域名下也支持api的定义方式。
C.通常化分享 在默认兼容旧版微信、手Q或者各类浏览器，平台，能够用这样的方法： 写h1作标题，p作内容，img作缩略图，只须要把h1隐藏掉就好，这里的缩略图最好要大于200x200px。 例如：
固然，这样也有利于搜索引擎拉取信息。 分享的坑还有更多，例如不一样浏览器例如QQ浏览器、Chrome也会有本身的默认拉取方式（部分截图做缩略图），须要多加测试优化。
（6）SEO搜索引擎优化
SEO（搜索引擎优化）的基本作法是把页面结构写好，这包括：
- 定义精确的网页标题。你的标题应该有归纳性，能明确告知搜索引擎和用户你的网站大概内容和目的，能够是当前页面标题-所属类型-产品名，例如“全民来猜歌-年费黄钻-QQ空间”。
- 针对页面内容补充description和keywords的meta标签。你须要简短总结页面的主要目标，而后补充description，以及根据关键词补充keywords。
- 优化你的超连接和图片。包括优化超连接显示的文本，要具备语义性也要跟超连接的网页具备相关性，例如“空间主页”就不要连接到“www.qq.com”。同时，要补充”title”和”alt”属性，例如“<img src=’images/apple.jpg’ title=’苹果示例图’ alt=’苹果示例图’ />”。
- 创建良好的网站导航和sitemap。网站须要有一个良好的导航，控制根目录和各子目录的关键，经过sitemap能够帮助网站主了解网站结构，也方便搜索引擎收录整个站点。
- 优化目录结构和URL。你的URL应该有语义性，简短易懂，例如http://www.apple.com/macbook-air/，并且每一层级都要有它对应的页面展现以及语义。
- 善用h1-h6的标题结构树。合理的标题能够强调文字，也能让搜索引擎更加了解到各标题的重要性，所以创建良好的标题树十分有意义。
- 不断致力于提供优质的内容。社交化分享是网站曝光最快的因素，所以不断提供了优质原创内容才能真正提升你的网站曝光权重。
（7）无障碍
无障碍的普及是一件好事，这让互联网真正地为全部人可用。所以咱们也应该为之而努力，无障碍的根基是你页面强壮的语义性和结构性，具体能够参考《
腾讯网无障碍说明》了解无障碍的优化手段。
做者：
腾讯ISUX
那么，这时候就须要设计提供一个较长的延伸背景了，最好是能够重复的，用background-repeat能够减小图片大小。
B.设计中期。也就是具体的兼容方法，可使用CSS3 Media Query和类覆盖。 1.CSS3 Media Query，按范围兼容机型。
而最新的微信提供了新的微信SDK，须要在公众帐号绑定所属域名以后调用SDK做分享，能够说分享功能会更增强大，坑也会更加少。
B.手Q 手Q支持声明meta标签的的分享方式，例如：
而若在qq.com域名下也支持api的定义方式。
C.通常化分享 在默认兼容旧版微信、手Q或者各类浏览器，平台，能够用这样的方法： 写h1作标题，p作内容，img作缩略图，只须要把h1隐藏掉就好，这里的缩略图最好要大于200x200px。 例如：
固然，这样也有利于搜索引擎拉取信息。 分享的坑还有更多，例如不一样浏览器例如QQ浏览器、Chrome也会有本身的默认拉取方式（部分截图做缩略图），须要多加测试优化。