前端常见性能优化

1.尽量减少HTTP请求次数

2.让Ajax可缓存

cache:true

3.懒加载

         1、什么是懒加载

               懒加载又称延迟加载。

               当访问一个页面时，先把img元素或者其他元素的背景图片替换成一张大小1*1px图片的路径（只需要请求一次的占位图），只有当图片出现在浏览器的可视区域内时，才设置图片真正的路径，让图片显示出来，这就是图片的懒加载。

         2、懒加载的实现原理

                页面中img元素，如果没有src属性，浏览器就不会发出请求去下载图片，只有通过js设置图片路径，浏览器才会发送请求；

                懒加载的原理是先在页面中把所有的图片统一使用一张占位图进行占位，把真正的路径存在元素的‘data-url’属性中，要使用的时候，在设置。

         3、懒加载的实现步骤                                       

                        1、 首先，不要将图片地址放到src属性中，而是放到其它属性(data-original)中。
                        2、 页面加载完成后，根据scrollTop判断图片是否在用户的视野内，如果在，则将data-original属性中的值取出存放到src属性中。
                        3、 在滚动事件中重复判断图片是否进入视野，如果进入，则将data-original属性中的值取出存放到src属性中。

         4、懒加载的优点

              页面加载速度快、可以减轻服务器的压力、节约了流量,用户体验好

4.GZip压缩文件内容

Content-Encoding: gzip
文件gzip压缩之后进行传输，到达客户端进行解压，

5.把样式表置于顶部

防止重载和重绘

6.避免使用css表达式

background-color: expression( (new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00″ );
不使用

7.避免使用滤镜

耗性能

8.把脚本置于页面底部

js是单线程

脚本带来的问题就是它阻止了页面的平行

9.减少DOM访问

• 缓存已经访问过的有关元素；

• 线下更新完节点之后再将它们添加到文档树中；

• 避免使用JavaScript来修改页面布局。

10.开发智能事件处理程序

使用事件委托 事件代理等方式对元素子级绑定的元素

11.减少Cookie体积

12.优化图像

除了动态图用gif，其它有透明用png

13.优化css spirite

spirite减少资源请求