1. 程式人生 > >前端效能優化集【持續更新】

前端效能優化集【持續更新】

前端效能優化可以說很廣泛了:

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頁面效能的一個方案。