瀏覽器探測時的效能最佳化

標籤：style   color   io   ar   strong   sp   div   on   問題   

 

瀏覽器探測時的效能最佳化

在進行瀏覽器探測時，會基於瀏覽器的功能就行分支判斷，導致做大量的重複工作。針對這類問題，可以有兩種解決方案：消極式載入和積極式載入。 
基於瀏覽器功能的探測：

 

1. function addHandler(ele,eventType,hadler){
2. if(ele.addEventListener){
3. ele.addEventListener(eventType,handler,false);
4. }else { //IE
5. ele.attachEvent(‘on‘+eventType,handler);
6. }
7. }

1、消極式載入 
延時載入，即在函數被調用前，不會對瀏覽器類型進行判斷， 
在函數被調用時，再進行瀏覽器檢測。

 

1. function addHandler(ele,eventType,hadler){
2. if(ele.addEventListener){
3. addHandler=(ele,eventType,hadler){ //覆蓋現有的事件綁定函數
4. ele.addEventListener(eventType,handler,false);
5. }；
6. }else if(ele.attachEvent){ //IE8及以下
7. addHandler=(ele,eventType,hadler){
8. ele.attachEvent(‘on‘+eventType,handler);
9. }；
10. }else{
11. ele[‘on‘+eventType]=handler;
12. }
13. addHandler(ele,eventType,hadler)； //調用新函數（重寫後）
14. }

調用延時載入函數時，只有在第一次調用時，會對瀏覽器進行探測，之後都會調用重寫後的新函數，不再進行檢測。因此，只有在第一次調用時，會消耗較長時間，之後都會很快。 
適用性：函數在頁面中不會立即調用時，消極式載入是最好的選擇。 
2、條件預先載入 
在指令碼載入期間進行瀏覽器檢測，而不會等到函數被調用。檢測操作依然只執行一次，只不過來得更早一些。

 

1. var addHandler=document.body.addEventListener ? function (ele,eventType,hadler){ ele.addEventListener(eventType,handler,false);
2. } : function (ele,eventType,hadler){
3. ele.attachEvent(‘on‘+eventType,handler);
4. }

適用性：一個函數馬上要用到，並且在整個頁面中頻繁調用

瀏覽器探測時的效能最佳化