最近在JavaScript性能方面有所感悟,把我的經驗分給大家:
說到JavaScript,就不得不說它的代碼的運行速度——
在我初學JavaScript的時候,只是覺得它是一個很強大的腳本。漸漸的,在做一些大的網站的項目的時候,卻發現,代碼執行的卻異常的慢(盡管JavaScript用的是V8引擎),任然不能滿足我的需求。這時候,我才慢慢的關注性能這一名詞。在以前,個人總是喜歡在網上搜一些好的插件,並把它用到網站的建設工作當中。那么問題來了,在大量的插件的使用當中,網頁總是要運行很久,處於很長時間的空白,這時候我發現JavaScript執行代碼的速度越來越慢。究其緣由,那就是網頁在渲染的過程前,一直在執行JavaScript代碼的編譯,以至於讓網頁長時間處於空白狀態。那么這種問題的來源是什么?怎么解決呢?
在引用<script>標簽的時候,我們習慣性的把它放在<head>標簽之內。這樣的做法,只是在最初接觸JavaScript,或者說小的項目的時候可以這樣做。個人覺得,做網頁就是要很好的實現與用戶的交互,如果像上述過程一樣,用戶長時間看的是一片空白的頁面,會導致什么樣的后果可想而知。為了提高JavaScript代碼編譯的運行速度,提升JavaScript的性能,(1)我推薦把<script>標簽寫在</body>之前,如果有很多的js,我建議用把包工具(雅虎YUI)合並一下.(2)在IE4+ Firefox3.5 的版本下,用代有defer的屬性,像這樣:<script defer></script> ,這樣做的原理是讓<script>標簽總在onload事件執行前調用,原因不用深究。(3)動態的創建JavaScript (有興趣的可以試試,不推薦)。
下面說到一個很實用,又簡單,提升JavaScript性能的方法:‘局部變量’
這里必須要說一下在JavaScript里面,有四種數據存取位置:1.直接量 2.變量 3.數組元素 4.對象成員。
通常來講,我們可以通過把常用的對象成員、數組元素、跨域變量保存在局部變量中來改善JavaScript性能,因為局部變量訪問的速度更快。為了便於理解,還是敲兩段代碼吧!
function myLoop1(){
for(var count=0;count<99999;count++){
$('#idName').innerHTML + = 'A';
}
}
說明一下這段代碼:每一次循環訪問id是idName的元素時,該元素一共被訪問了兩次,一次是讀取他的innerHTML,另一次是重寫idName的值。
那么怎么才算提升性能的做法呢?看如下代碼
function myLoop2(){
var show='';
for(var count=0;count<99999;count++){
show+ = 'A';
}
$('#idName').innerHTML += show;
}
實驗證明:在所有瀏覽器下,myLoop2的運行要比myLoop1,快幾十倍,在IE6下,更是快155唄。
那么為什么這樣做會快這么多呢。我簡單解釋一下:JavaScript實際上包括了ECMAScript、DOM、BOM,不要以為三者是和諧共處的,它們互相溝通可是要過“路費的”。所以,我們要盡可能的把運算留給ECMAScript這一端,減少訪問DOM的次數。
以后還有性能方面的問題還會分享給大家,不喜勿噴哦!