JavaScript網頁指令碼效能優化

訪問dom的方式對指令碼效能會產生非常大的影響。以下面**為例：

if (document.getelementsbytagname("a").length > 0) 
}

這段**可以執行，本身並沒有什麼問題，但它卻不是我們期望的最優性能。細看這段**，可以發現其先後兩次使用dom方法getelementsbytagname()來查詢a元素，實際上相當於浪費了一次搜尋。不管什麼時候，只要是查詢dom中的某些元素，瀏覽器都會搜尋整個dom樹，從中查詢可能匹配的元素。所以這段**對效能的影響，可見一斑。基於此，可以設計出更好的方案，即將第一次搜尋的結果儲存在變數中進行重用。如下：

var links = document.getelementsbytagname("a");
if (links.length > 0) 
}

這樣以來，**的功能沒有變，但搜尋dom的次數由兩次降到了一次，效能得到了最優化。

另外，有時在程式中寫了多個函式，可能某些函式的功能有類似相近之處，這時就應該考慮重構，把可以共用的結果儲存在全域性變數裡，把功能相近類似的函式高度抽象化，盡可能地減少對dom的訪問。

還有乙個需要注意的地方，就是要儘量減少文件中的標記數量。過多不必要的的元素只會增加dom樹的規模，進而增加遍歷dom樹以查詢特定元素的時間。

src="scripts/functiona.js">
script>
src="scripts/functionb.js">
script>
src="scripts/functionc.js">
script>
src="scripts/functiond.js">
script>

推薦的做法是把functiona.js functionb.js functionc.js functiond.js 合併到乙個指令碼檔案中。這樣，就可以減少載入頁面時傳送的請求數量。而減少請求數量通常都是在效能優化時首先要考慮的。

通過以上分析，可知：若位於head區域的指令碼檔案沒有載入完畢，瀏覽器也不會載入body區域的html元素，這樣一來，倘若指令碼檔案過大，使用者要看到頁面就需要等待很長時間，這當然不是我們所期望的。所以，在實際的web頁面開發中，為了最快地把html頁面呈現給使用者，必須把所有script標籤（注意：這裡的所有，指的僅是對當前html頁面進行操縱的指令碼檔案，某些另外引用的第三方庫檔案還是需要放在head區域以便在操縱頁面的指令碼之前載入）都放到文件的末尾，body標記之前。這樣就可以讓頁面變得更快，先顯示最基本的html頁面，然後載入對頁面進行操縱的指令碼檔案。即使這樣，在載入指令碼時，window物件的load事件依然可以執行對文件進行的各種操作。

這裡舉個例子，下面這張是我個人csdn部落格主頁源**末尾部分的截圖，大家可以看到，這些指令碼都是放在了文件末尾的body標記之前。有興趣的的也可以右鍵檢視源**，會發現在head區域依然有script標籤包含的指令碼檔案，這裡面不僅有引用的第三方庫檔案，也有**編寫者自己設定的一些東西等需要在操縱頁面的指令碼之前載入。

所謂壓縮指令碼檔案，指的是把指令碼檔案中不必要的位元組，如空格和注釋，統統刪除，從而達到「壓縮」檔案的目的。好在，有很多任務具都可以替我們來做這件事。有的精簡程式甚至會重寫部分**，使用更短的變數名，從而減少整體檔案的大小。

例子，下面這幅是googles首頁源**部分截圖，從圖中，我們可以看到，指令碼**是經過精簡的。

精簡後的**雖然不容易看懂，卻能大幅度減少檔案大小。多少情況下，我們應該有兩個版本，乙個是工作副本，可以修改源**並新增注釋；另乙個是精簡副本，用於放在站點上。通常，為了與非精簡版區分開來，建議精簡副本地檔名中加上min字樣。如下：

src="scripts/scriptname.min.js">
script> //用於實際站點的精簡版 
src="scripts/scriptname.js">
script> //作為工作副本的正常版

JavaScript網頁指令碼效能優化

網頁指令碼加密解密

PHP動態網頁指令碼

自動點選網頁指令碼 selenium庫使用

JavaScript網頁指令碼效能優化

網頁指令碼加密解密

PHP動態網頁指令碼

自動點選網頁指令碼 selenium庫使用

相關推薦