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

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

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

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

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

3）事件委托，在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;
  }
});

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

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

猜你喜欢