SEO移动优化随着HTML5标准的出台，作为前端工程师们很有需要研究一下如何优化HTML5在移动设置上的性能体现。首先我们必要明确以下几个原则：1. PC优化手段在Mobile侧同样适用;2. 在Mobile侧我们提出三秒种渲染完成首屏指标;3. 基于第二点，首屏加载3秒完成或使用Loading;4. 基于联通3G网络平均338KB/s(2.71Mb/s)，所以首屏资源不应超过1014KB;5. Mobile侧因手机配置缘故原由，除加载外渲染速度也是优化重点;6. 基于第五点，要合理处理代码削减渲染损耗;7. 基于第二、第五点，所有影响首屏加载和渲染的代码应在处理逻辑中后置;8. 加载完成后用户交互使用时也需细致性能。下面我们就从上面8点入手分多个方面对移动端的HTML5性能进行优化：
第一步：加载优化
1削减HTTP请求。
由于手机欣赏器同时相应请求为4个请求(Android支撑4个，iOS 5后可支撑6个)，所以要尽量削减页面的请求数模块电源，首次加载同时请求数不能超过4个。a) 合并CSS、javascript;b) 合并小图片，使用雪碧图(CSS SPRITE);
2缓存。
使用缓存可以削减向服务器的请求数，节省加载时间，所以所有静态资源都要在服务器端设置缓存，并且尽量使用长Cache(长Cache资源的更新可使用时间戳)。
a) 缓存统统可缓存的资源;b) 使用长Cache(使用时间戳更新Cache);c) 使用外联式引用CSS、javascript;
3压缩HTML、CSS、javascript。
削减资源大小可以加快网页表现速度，所以要对HTML、CSS、javascript等进行代码压缩，并在服务器端设置GZip。a) 压缩(例如，多余的空格、换行符和缩进);b) 启用GZip;
4确保无壅塞。
写在HTML头部的javascript(无异步)，和写在HTML标签中的Style会壅塞页面的渲染，因此CSS放在页面头部并使用Link体例引入，避免在HTML标签中写Style，javascript放在页面尾部或使用异步体例加载
5使用首屏加载。
首屏的快速表现，可以大大提拔用户对页面速度的感知，因此应尽量针对首屏的快速表现做优化。
6按需加载。
将不影响首屏的资源和当前屏幕资源不用的资源放到用户必要时才加载，可以大大提拔紧张资源的表现速度和降低总体流量(PS：按需加载会导致大量重绘，影响渲染性能)。
a) LazyLoad;b) 滚屏加载;c) 通过Media Query加载;
7预加载。
大型重资源页面(如游戏)可使用增长Loading的方法，资源加载完成后再表现页面。但Loading时间过长，会造成用户流失。对用户举动分析google关键词排名，可以在当前页加载下一页资源，提拔速度;a) 可感知Loading(如进入空间游戏的Loading);b) 不可感知的Loading(如提前加载下一页);
8压缩图片。
图片是最占流量的资源，因此尽量避免使用他，使用时选择最合适的格式(实现需求的前提下，以大小判断)，合适的大小，然后使用智图压缩，同时在代码中用Srcset来按需表现(PS：过度压缩图片大小影响图片表现结果)。
a) 使用智图(雪碧图);
b) 使用其它体例代替图片(1. 使用CSS3 2. 使用SVG 3. 使用IconFont);
c) 使用Srcset;
d) 选择合适的图片(1. webP优于JPG 2. PNG8优于GIF);
e) 选择合适的大小(1. 首次加载不大于1014KB 2. 不宽于640(基于手机屏幕一样平常宽度));
9削减Cookie、避免重定向以及异步加载第三方资源。
Cookie会影响加载速度广告策划，所以静态资源域名不使用Cookie。此外，重定向也会影响加载速度，所以在服务器精确设置避免重定向。最后，第三方资源不可控会影响页面的加载和表现，因此要异步加载第三方资源。
END
第二步：脚本实行优化
1脚本处理不当会壅塞页面加载、渲染，因此在使用时需当细致：
· CSS写在头部，javascript写在尾部或异步。
· 避免图片和iFrame等的空Src。
空Src会重新加载当前页面，影响速度和服从。
· 尽量避免重设图片大小。
重设图片大小是指在页面、CSS、javascript等中多次重置图片大小，多次重设图片大小会引发图片的多次重绘，影响性能。
· 图片尽量避免使用DataURL。
DataURL图片没有使用图片的压缩算法文件会变大，并且要解码后再渲染，加载慢耗时长。
END
第三步：CSS优化
1尽量避免写在HTML标签中写Style属性。
· 避免CSS表达式CSS表达式的实行需跳出CSS树的渲染，因此请避免CSS表达式
· 移除空的CSS规则空的CSS规则增长了CSS文件的大小，且影响CSS树的实行，所以需移除空的CSS规则
· 精确使用Display的属性Display属性会影响页面的渲染，因此请合理使用a) display:inline后不应该再使用width、height、margin、padding以及floatb) display:inline-block后不应该再使用floatc) display:block后不应该再使用vertical-alignd) display:table-*后不应该再使用margin或者float
· 不滥用Float。
Float在渲染时计算量比较大，尽量削减使用
· 不滥用Web字体。
Web字体必要下载，解析，重绘当前页面，尽量削减使用
· 不声明过多的Font-size。
过多的Font-size引发CSS树的服从
· 值为0时不必要任何单位。
为了欣赏器的兼容性和性能，值为0时不要带单位
· 标准化各种欣赏器前缀。
a) 无前缀应放在最后
b) CSS动画只用 (-webkit- 无前缀)两种即可
c) 其它前缀为 -webkit- -moz- -ms- 无前缀 四种，(-o-Opera欣赏器改用blink内核，所以镌汰)
· 避免让选择符看起来像正则表达式。
高级选择器实行耗时长且不易读懂，避免使用
END
第四步：javascript实行优化
1· 削减重绘和回流。
a) 避免不需要的Dom操作
b) 尽量改变Class而不是Style，使用classList代替className
c) 避免使用document.write
d) 削减drawImage
· 缓存Dom选择与计算。
每次Dom选择都要计算，缓存它
· 缓存列表.length。
每次.length都要计算，用一个变量保存这个值
· 尽量使用事件代理，避免批量绑定事件
· 尽量使用ID选择器。
ID选择器是最快的
· TOUCH事件优化。
使用touchstart、touchend代替click，因快影响速度快。但应细致Touch相应过快，易引发误操作
END
第五步：渲染优化
· HTML使用Viewport。
Viewport可以加速页面的渲染，请使用以下代码
· 削减Dom节点。
Dom节点太多影响页面的渲染，应尽量削减Dom节点
· 动画优化。
a) 尽量使用CSS3动画b) 合理使用requestAnimationFrame动画代替setTimeoutc) 适当使用Canvas动画 5个元素以内使用css动画，5个以上使用Canvas动画(iOS8可使用webGL)
· 高频事件优化。
Touchmove、Scroll 事件可导致多次渲染a) 使用requestAnimationFrame监听帧转变步进式开水机，使得在精确的时间进行渲染b) 增长相应转变的时间间隔，削减重绘次数
· GPU加速。
CSS中以部属性(CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video)来触发GPU渲染，请合理使用(PS：过渡使用会引发手机过耗电增长)
