在Mobile侧我们提出三秒种渲染完成首屏指标
１、基于第二点，首屏加载3秒完成或使用Loading
２、基于联通3G网络平均338KB/s(2.71Mb/s），所以首屏资源不应超过1014KB，Mobile侧因手机配置原因，除加载外渲染速度也是优化重点
３、基于第五点，要合理处理代码减少渲染损耗
４、基于第二、第五点，所有影响首屏加载和渲染的代码应在处理逻辑中后置，加载完成后用户交互使用时也需注意性能
前端性能优化移动端：
1、减少或者避免页面重绘（repaint,reflow）
2、尽量缓存所有可以缓存的数据。如h5 localStrorage
3、使用css3 transform代替dom操作。
减少Dom节点： Dom节点太多影响页面的渲染，应尽量减少Dom节点
动画优化
a） 尽量使用CSS3动画
b） 合理使用requestAnimationFrame动画代替setTimeout
c） 适当使用Canvas动画 5个元素以内使用css动画，5个以上使用Canvas动画（iOS8可使用webGL）
高频事件优化：Touchmove、Scroll 事件可导致多次渲染
a） 使用requestAnimationFrame监听帧变化，使得在正确的时间进行渲染
b） 增加响应变化的时间间隔，减少重绘次数
CSS优化：
尽量避免写在HTML标签中写Style属性，避免CSS表达式，CSS表达式的执行需跳出CSS树的渲染，因此请避免CSS表达式。移除空的CSS规则，空的CSS规则增加了CSS文件的大小，且影响CSS树的执行，所以需移除空的CSS规则。
正确使用Display的属性： Display属性会影响页面的渲染，因此请合理使用。
a） display:inline后不应该再使用width、height、margin、padding以及float
b） display:inline-block后不应该再使用float
c） display:block后不应该再使用vertical-align
d） display:table-*后不应该再使用margin或者float
GPU加速
CSS中以下属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）来触发GPU渲染，请合理使用。
PS：过渡使用会引发手机过耗电增加。
移动端非主流hack:
1、不要给非static定位元素增减css3动画。
2、适当使用硬件加速，利用手机GPU做渲染。比如可以用canvas做硬件加速，也可以做普通展示层的硬件加速，例如在css里增加transform:translate3d(0,0,0)也可以被系统开启硬件加速。
前端性能优化PC端：
1、减少http请求：
1）.合并脚本和样式表，在理想情况下，一个页面应该使用不多于一个的脚本和样式表
2).采用css sprites
3).使用内联图片，base64形式图片，data:URL模式可以在web页面中包含图片，但是无需任何额外的http请求。在图片体积小，复用性高，更新不频繁，而且无法做成雪碧图的情况下，可以采用base64图片。
2、将样式表放在头部，将脚本放在底部。将样式表放在头部，使页面逐步加载，逐步呈现，避免白屏和无样式内容的闪烁。脚本如果放在头部，会阻塞对其后面内容的呈现，阻塞对其后面组件的下载。
3、添加Expires头。
4、gzip压缩组件。
5、减少DNS查找。将页面中的组件分别放到至少2个，但是不要超过4个的主机名下，这是在减少DNS查找和允许高度并行下载之间作出的很好的权衡。确保服务器支持keep-alive。
6、避免重定向。
7、减少DOM操作，遍历数据而非DOM，利用事件委托，避免过多DOM元素的事件绑定。
8、每张图片要有宽和高，alt 不能为空。
转载请注明：TUTERM.COM » 前端性能优化之移动端
