前端性能优化可以说很广泛了:
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页面性能的一个方案。