前端性能优化

前端性能优化

采用精灵图

采用精灵图，把一些小图合并到一张大图上，使用的时候通过背景图片定位，定位到具体的某一张小图片上。

.publicBg {// 共享类
	background: url('img/sprit.png') no-repeat;
  	background-size: 0 0 /*和原图大小保持一致*/
}
.myClass {// 元素私有类
    background-position: x y; /*通过背景定位，定位到具体的位置，展示不同的图片即可*/
}
.otherClass {
    background-position: x1 y1;
}

html示例：

<div class="publicBg myClass"></div>
<div class="publicBg otherClass"></div>

优点：减少http的请求次数，减少请求内容的大小（请求内容越大，消耗的时间越长）。

合并或者压缩css、js文件

利用构建工具构建应用。

图片懒加载

在实际项目中，我们开始图片都不加载，页面首次加载完成后，先把第一屏幕中可以看见的图片进行加载，随着页面滚动，再把下面区域中能够呈现出来的图片进行加载。

利用浏览器缓存

第一个请求css和js下来，浏览器会把请求的内容缓存起来，如果做了304处理，用户再次请求css和js，直接从缓存中读取，不再请求服务器获取（减少http请求次数）。
当用户强制刷新页面，或者当前缓存的css和js发生了变动，都会重新从服务器获取。

减少DOM操作

频繁的DOM操作会影响页面性能，因为DOM结构改变或者样式改变会触发浏览器的回流（重排DOM结构）和重绘（重新渲染样式）。

其他

减少使用闭包，因为

• 闭包会形成一个不销毁的栈内存，过多的栈内存累积会影响页面的性能
• 还会容易造成内存的泄漏

使用事件委托

把事件监听器绑定给外层容器，让子元素的事件进行冒泡触发。

使用css3动画

尽量使用css3动画代替js动画，因为css3的动画或者变形都开启了硬件加速，性能比js动画好。