移动H5前端性能优化

移动H5前端优化，从如下几个方面入手：

一、加载优化

二、图片优化

三、css优化

四、脚本优化

五、渲染优化

加载优化

一、合并CSS、JS

二、合并小图片，使用雪碧图

三、缓存一切可缓存的资源

四、使用长Cache

五、使用外联式引用CSS、JS

六、压缩HTML、CSS、JS

七、启用GZip

八、使用首屏加载

九、使用按需加载

十、使用滚屏加载

十一、使用Media Query加载

十二、增长Loading进度条

1三、减小Cookie

1四、避免重定向

1五、异步加载第三方资源

图片优化

一、使用智图

二、使用（CSS三、SVG、IconFont）代替图片

三、使用Srcset

四、webP优于JPG

五、PNG8优于GIF

六、首次加载不大于1014KB（基于3秒联通平均网速所能达到值）

七、图片不宽于640

CSS优化

一、CSS写在头部，JS写在尾部或异步

二、避免图片和iFame等的空src

三、尽可能避免重设图片大小

四、图片尽可能使用DataURL

五、尽可能避免在HTML标签中些style属性

六、避免css表达式

七、移除空的CSS规则

八、正确使用display属性

九、不滥用float

十、不滥用web字体

十一、不声明过多的font-size

十二、值为0时不须要任何单位

1三、标准化各类浏览器前缀

1四、避免让选择符看起来像正则表达式

脚本优化

一、尽可能减小重绘和回流

二、缓存DOM选择和计算

三、缓存列表、length

四、尽可能使用事件代理，避免批量绑定事件

五、尽可能使用ID选择器

六、使用touchstart、touchend代替click

渲染优化

一、HTML使用Viewport

二、减小DOM节点

三、尽可能使用CSS3动画

四、合理使用requestAnimationFrame动画代替setTimeout

五、适当使用Canvas动画

六、Touchmove、Scroll事件会致使屡次渲染

七、使用CSS3 transition、CSS3 3D transforms、opacity、canvas、WebGL、video来触发GPU渲染

 

后续须要展开对每一项进行阐述   以此提醒本身