前端性能优化

前言：关于前端性能优化的问题已经是老生常谈了，面试中也是经常被问到，当然每个人都能说出个几条，但是都是零零散散的，我对自己的总结以及网上查到的童鞋们的总结进行了一个整合，纯手打，就以它作为我的第一篇博客吧，希望自己能坚持写下去，坚持总结生活中的点点滴滴，也见证自己的成长吧。

一，css优化；

1.css写在头部，js写在尾部或者异步。

2.避免图片和iframe等的空的src.

3.尽量避免重设图片大小。

4.尽量避免在html标签中写style属性。

5.正确使用display属性：使用display改变属性后，会使很多页面组合样式无效。

6.不滥用float：很多css bug都是浮动引起的。

7.不滥用web字体： web fonts通常体积庞大，而且一些浏览器在下载web fonts时会阻塞页面渲染，影响性能。

8.不声明过多的font-size：这是设计层面考虑的东西，精良的页面没有过多的字体。

9.值为零时不需要任何单位。

10.标准化各浏览器的前缀 ：通常将浏览器的前缀写在属性前面。使用css渐变等高级特性时，需指定所有浏览器的前缀。

11.避免让选择符看起来像正则表达式：css3添加了一些选择符，类似~=这种，但是不是所有浏览器都支持，因此容易出现兼容性问题。

12.移除空的css规则：减小css文档的体积。

13.不在选择符中使用ID选择符：主要考虑到样式的重用性（权重不同 ，解析不同） 和页面的耦合性。

14.避免使用多类选择符。ie6以及更古老的浏览器对类似。.father.parent{}这样的多类选择符，解析不正确。

15.不给h1~h6定义过多的样式/不重复定义h1-h6。

二，图片优化；

1.使用智图。 http://zhitu.rencent.com/

2.使用（css3,svg,iconfont）代替图片。

3.使用Sprites.

4.使用webP由于jpg.

5.使用png8优于gif.

6.首次加载不大于1014kb（基于3s联通平均网速所能达到的值）。

7.图片不宽于640.

三，渲染优化；

1.html使用viewport

2.减少dom节点。

3.尽量使用css3动画。

4.合理使用requestAnimationFrame动画代替setTimeout

5.适当使用canvas动画。

6.touchMove,scroll事件会导致多次渲染。

7.使用（css3transition，css3 3Dtransforms,opacity,canvas,webgl,video）来触发gpu渲染。

四，脚本优化；

1.减少冲回和回流，

2.缓存dom选择与计算

3.缓存列表.length

4.尽量使用ＩＤ选择器

5.使用ｔｏｃｈｓｔａｒｔ，ｔｏｃｈｅｎｄ代替ｃｌｃｋ．

五，加载优化；

1.合并css,javascript;

2.合并小图片，使用雪碧图

3.缓存一切可缓存的资源。

4.使用长cache.

5.使用外联式引入css,javascript;

6.使用首屏加载，

7.压缩html,css,javascript;

8,启用Gzip；

9.使用按需加载。

10.使用滚屏加载。

11.通过Media query加载。

12.增加loading进度条。

13.减少cookie.

14.避免重定向。

15.异步加载第三方资源。