前端性能优化小结

1.减少http请求：

 css sprite；

css、js文件合并压缩 

CDN托管

网页Gzip压缩

图片服务器

图片延迟加载

小图标用iconfont 

小图片用base64

data缓存

前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

css：

避免使用CSS Expression

 当需要设置的样式很多时设置className而不是直接操作style

合并代码，如margin-top margin-left 合为margin

 

js： 

   -用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能

   -用hash-table来优化查找

    -少用全局变量，减少作用域链查找。将全局变量用局部变量保存起来

     eg:(此例子中需要查找全部变量两次)

     

var galobalVal = 1;

function callFn(info){
  //用局部变量缓存全局变量
  var localVal = galobalVal ;
  //do sth ...
 
  //将新值赋值回来
  galobalVal = localVal ;
}

 -缓存DOM节点查找的结果, 如 var imgs = doc.getElementByTagName("name")

//document是全局查找
function updateUI(){
    var doc = document;//用局部变量 缓存起来
    var imgs = doc.getElementByTagName("name");//用局部变量 缓存起来
    for (var i = imgs.length - 1; i >= 0; i--) {
        imgs[i].title = doc.title + " image " + i;
    }
    var msg = doc.getElementByTagName("msg"); //用局部变量 缓存起来
    msg.innerHTML = "update complete";
}

   

   -把一些共同、功能相似 的代码抽取成方法 减少代码重复率

  -字符串拼接：在js中用+来拼接字符串效率比较低，因为每次运行都会开辟新的内存并生成新的字符串变量，然后加你个拼接结果赋值给新变量。与之相比，更为高效的做法是使用数组：即将需要拼接的字符串放在数组中,最后调用join()。不过使用数组也有一定开销，因此当需要拼接 的字符串较多时可以考虑此方法。

   -模板

  --尽量使用内置函数，使用原生方法：因为内置函数（原生方法）是通过c、c++之类的编译语言编译到浏览器中的，比js快很多。如Math中复杂的数学运算。

html：

  -减少层级嵌套

  -避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢

 --------------------以下来自《JavaScript高级程序设计》--------------------------

1.避免不必要的属性查找

  算法复杂度O,最快捷的算法是常数值，即O(1),算法越复杂 运行所需时间越长。

  查找变量和访问数组数组元素都是O(1)

 访问对象属性是O(n)，（）使用变量和数组都比访问对象的属性更有效率，因为必须在原型链上对拥有该名称 的属性进行一次搜索。属性越多，属性查找时间越长

  因此一旦多次用到对象属性，应该将其存储在局部变量中，第一次访问是O(n)，但后面都会是O(1)。

2.优化循环

  1）减值迭代

  2）简化终止条件,避免属性查找或其他O(n)，如  i<values.length,在循环时每次都是算一下values.length。可以改为减值迭代

  3）简化循环体

  4）使用后测试循环体

   减值迭代：   

for (var i = values.length - 1; i >= 0; i--) {
       var value = values[i]
       process(value) ;
 }

 后测试循环体：do-while,可以避免最初终值的计算，运行更快。但需注意确保处理的值至少有一个

var i = values.length - 1;
if(i >-1){
   do {
     process(values[i]) ;
   }while( --i >= 0)
}

3.展开循环

  当循环次数确定，消除循环并使用多次函数调用则更快。

//消除循环 
process(values[0]) ;
process(values[1]) ;
process(values[2]) ;

性能的其他注意事项：

 1.使用原生方法

 2.switch语句较快。若是有一系列复杂的if else语句，可以转为switch

3.位运算符较快。 当进行数学运算时，位运算比布尔运算或算术要运算快。取模 逻辑与 逻辑或都可以考虑位运算实现

---------------------

与get请求相比，post请求消耗的资源会更多一些。

从性能角度看，以发送相同的数据计，get请求的速度最多可打到post请求的两倍。