前端性能优化小结

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请求的两倍。