javascript DOM編程藝術(檢測與效能最佳化)

標籤：

一、對象檢測（是否支援js方法）:只有支援了該方法才可調用

if(!getElementById || getElementsByTagName){    return false;}

二、效能考濾

 1、盡量少訪問DOM和盡量減少標記：以下面代碼為例

if(document.getElementsByTagName("a").length > 0){   var aLiks = document.getElementsByTagName("a");   for(var i = 0 ; i < aLiks.length; i++){     }}

這段代碼是尋找DOM中的<a>元素。如果大於0，則獲得<a>的個數並迴圈遍曆。在這裡兩次使用了document.getElementsByTagName ，不管什麼時候，只要查詢DOM中的某個元素，都會搜尋整個DOM樹，所以這段代碼多執行了一次搜尋。

最佳化後的代碼：

var aLiks = document.getElementsByTagName("a");if(aLiks.length > 0){    for(var i = 0 ; i < aLiks .length; i++){     }}

 

三、合并和放置指令碼

<srcript src="js/A.js"></script>

多使用外部js引用的方式和將多個js檔案合并成一個，既可以共用又可以減少載入頁面時發送的請求數。

四、壓縮指令碼

//擷取對象數組var aLiks = document.getElementsByTagName("a");if(aLiks.length > 0){    //迴圈遍曆    for(var i = 0 ; i < aLiks .length; i++){     }}

壓縮後：

var aLiks = document.getElementsByTagName("a");if(aLiks.length > 0){for(var i = 0 ; i < aLiks .length; i++){}}

精簡後的指令碼雖然看不太懂但能減少指令碼的大小。大多數情況下我們應該有兩個版本的指令碼，一個有格式和注釋的開發版易於閱讀，一個壓縮的精簡版放在網站上。

 

javascript DOM編程藝術(檢測與效能最佳化)