前端性能优化集【持续更新】

前端性能优化可以说很广泛了：

1，减少HTTP请求次数的优化：

  1）使用代理请求，对于用户频繁的请求，客户端先自己缓存进入代理对象，代理来决定是否真正进行HTTP请求，而不是每次都触发请求。

  2）缓存代理，例如分页请求，可以将之前的请求数据缓存再代理对象中，下次请求时候先过缓存代理，有缓存就拿缓存的数据，减少HTTP请求次数。

  3）合并多个JS文件，CSS样式文件等。

  4）直接把图像嵌入网页中，Data URI Scheme,节省HTTP请求，但是浏览器不会缓存，每次更新页面都加载。

2，事件委托，在Javascript中，添加到页面的事件处理程序数量关系到页面的整体运行性能，每个绑定函数都是对象会占内存，内存对象越多，性能越差。对于“事件处理程序过多”可以使用事件委托进行性能优化：利用事件冒泡，只指定一个事件处理程序管理所有事件。例如：

click事件的冒泡到document层，可以为整个页面指定一个onclick事件处理程序，而不用为每个可点击的元素分别添加事件处理程序。

#The bad#
var item1 = document.getElementById("goSomewhere");
var item2 = document.getElementById("doSomething");
var item3 = document.getElementById("sayHi");
EventUtil.addHandler(item1, "click", function(event){
location.href = "http://www.wrox.com";
});
EventUtil.addHandler(item2, "click", function(event){
document.title = "I changed the document's title";
});
EventUtil.addHandler(item3, "click", function(event){
alert("hi");
});

#The good#

var list = document.getElementById("myLinks");

EventUtil.addHandler(list, "click", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
switch(target.id){

case "doSomething":
  document.title = "I changed the document's title";
  break;
case "goSomewhere":
  location.href = "http://www.wrox.com";
  break;
case "sayHi":
  alert("hi");
  break;
  }
});

 3，浏览器卸载页面之前移除页面中的所有事件处理程序。针对那些过时不用的“空事件处理程序”，是造成Web内存与性能的一个原因，而在不需要时候及时移除事件程序是提成Web页面性能的一个方案。

 4，页面的性能优化：

  1）因为网页的内存限制会影响分配内存给变量，所以优化内存占比时候，释放不用的数据，及时给不用的变量解除引用，确保浏览器及时回收内存，也是一种性能上面的优化。

  2）Javascript的阻塞特性，当浏览器在执行js代码时候，不能同事做其他事情，所以一般将script标签放在body标签底部，或者在window.onload事件触发后再下载脚本，又，可以加defer/async属性给script标签，两个都表示异步加载。表示加载文档和script的加载并行进行。

  3）针对DOM的操作一般代价比较昂贵，因为DOM和js之间的操作需要中间搭建一个通道，所以针对DOM的操作，如果多次操作一个DOM对象，可用临时变量将DOM对象保存。

作用域链的优化：

  1）在作用域链中，一个变量的位置越深，读写速度越慢，所以尽可能用局部变量，而不用去查询全局变量。