前端性能优化

一、减少http请求

每次请求资源都需要耗时，减少http请求，减少加载时间

1. 合并图片，css sprites
2. 懒加载，lazyload

二、减少重绘和回流

重绘:当元素外观发生改变，但是不影响页面布局时，发生重绘。
Reflow回流，就是DOM的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证DOM树上的所有其它结点的visibility属性，这也是Reflow低效的原因。

1. 使用class改变要设置的元素样式，而不是使用style
2. 有动画效果的元素，position设置为fix或absolute

三、减少Dom操作

每次dom操作浏览器都会去遍历每一个节点，性能消耗非常大。

1. 合理利用javascript的变量存储功能
2. 事件委托

四、使用JSON数据来进行数据交换

因为同样的数据相比于xml，json数据体积更小，而且json是js原生格式贴合性较好。

五、使用CDN加速

CDN全名内容分发网络，CDN能够缓存一般的CSS，js图片等静态资源文件，而且这些文件的访问频率很高，由于减少了网络传输距离，静态资源缓存在CDN可以极大的提高网站的访问速度。

六、css放在头部，js放在尾部(防止阻塞页面加载)

七、压缩css(包含css预处理器less，sass)，js代码