1、Script的 defer屬性
2、為body添加腳本
3、CDATA小節(jié)
4、null和undefined變量
5、縮減JavaScript代碼
1、Script的 defer屬性
如果將defer屬性設置為"defer",那么表示該腳本不會生成任何文檔內容,于是瀏覽器可以提前處理頁面的剩余部分,在頁面處理結束并做好顯示準備時才處理腳本部分。defer屬性可以提高頁面載入的速度,特別是那些引用了大量的JavaScript代碼或者龐大的JavaScript程序庫的頁面。
<script type="text/javascript" defer="defer">
no content being generated
</script>
2、為body添加腳本
前面我們曾經(jīng)說過,因為對script元素進行集中管理有利于網(wǎng)頁的可維護性,所以script元素通常將添加在網(wǎng)頁上的head元素中。然而,在body元素中添加腳本的原因往往是出于性能的考慮。
因為瀏覽器從同一個域名并發(fā)載入的資源是有限制的,所以,當把腳本添加到head元素中時,首先載入的將是腳本,其次才是文檔的剩余部分。此外,瀏覽器可能會延遲頁面剩余部分的顯示,因為腳本中可能會調用document.write方法修改document對象。如果JavaScript文件很龐大,那么網(wǎng)頁中的圖片以及其他重要的信息將會被延遲顯示,這所帶來的問題遠比可維護性更加重要。
即使在script元素中使用defer屬性也不一定能完全解決該問題,特別是并發(fā)資源訪問和頁面顯示的限制。
在High Performance Web Sites(中譯版《高性能網(wǎng)站建設指南》一書中,作者推薦將script元素放在文檔的最末尾處,這樣網(wǎng)頁的其他部分就可以優(yōu)先載入。大多數(shù)復雜網(wǎng)站的開發(fā)人員更傾向于這種方法。這種方法帶來的負面影響是腳本不容易查找,網(wǎng)頁的可維護性也較差。
那么什么才是最佳方法呢?我發(fā)現(xiàn)大多數(shù)網(wǎng)站并不引用龐大的JavaScript程序庫,在保證較好性能的前提下,將腳本放在head元素中,也確保網(wǎng)頁可維護性的優(yōu)勢。不過,如果的確需要使用龐大的JavaScript程序庫,那么可以考慮將腳本放在頁面的最末尾處。
不論采用何種方法,請確保腳本位置的一致性,要么全部放在head元素中,要么全部在body元素的最末尾處。
3、CDATA小節(jié)
<script type="text/javascript">
//<![CDATA[
function hello() {
var msg = "Hello, <em>World!</em>";
document.open();
document.write(msg);
document.close();
}
//]]>
</script>
之所以使用CDATA小節(jié),是因為XHTML處理器在解釋標記型語言時會識別出所有的開始標簽和結束標簽。
在頁面文件中通過script元素的src屬性引用的JavaScript,是XHTML標準所兼容的,并且不要求使用CDATA小節(jié)。如果是嵌入的JavaScript代碼,那么就需要使用CDATA小節(jié),特別是包含在body元素中的代碼。對于大多數(shù)瀏覽器而言,還需要用JavaScript注釋符(//)來隱藏CDATA小節(jié),如示例1.3所示,否則將會出現(xiàn)JavaScript錯誤。
當然,保持頁面整潔的最佳方式是將JavaScript代碼從頁面中徹底移去,改成使用鏈接JavaScript文件的方式。
在本書的大多數(shù)示例中,JavaScript代碼是直接嵌入在頁面里的,這樣可以提高代碼的可讀性且易于檢查。然而,Mozilla推薦將所有嵌入的JavaScript代碼都從頁面中移去,放在獨立的JavaScript文件中。使用獨立的JavaScript文件,可以避免校驗以及文本解釋錯誤等問題,而不用擔心頁面是以HTML還是XHTML的方式進行處理。
提示
使用JavaScript文件往往也能提高網(wǎng)頁載入的效率,因為瀏覽器會在第一次載入文件的時候進行緩存,引用相同文件時則會從緩存中獲取。
4、null和undefined變量
null變量是已定義的、值為null的變量。以下是一個null變量的示例:
var nullString = null;
如果變量已經(jīng)聲明但是還沒有初始化,那么就是undefined變量:
var undefString;
如果聲明了變量并且賦予了初始值,那么該變量就不是null或undefined:
var sValue = "";
當你使用JavaScript程序庫時,或者在一些復雜的代碼中,某些變量有可能還沒有初始化;如果嘗試在表達式中使用這樣的變量,那么就有可能得到出乎意料的結果,通常會導致JavaScript錯誤。如果不確定變量的狀態(tài),那么可以在條件表達式中測試該變量,例如:
if (sValue) ... // 如果變量是null或undefined,那么結果為true,否則是false
在第3章中將詳細介紹條件語句,現(xiàn)在你只需要知道該表達式會判斷變量sValue是否已經(jīng)聲明并初始化,如果已聲明并初始化則該表達式的值為true,否則,該表達式的值為false。
if (unknownVariable) // false,變量沒有聲明或賦值
if (undefinedString) // false,變量沒有賦值
if (nullString) // false,變量已經(jīng)聲明并且賦值,但是所賦的值是null
if (sValue) // true,變量已經(jīng)聲明并且賦值(包括空字符串) 使用null關鍵字,可以判斷數(shù)值是否為null:
if (sValue == null)
在JavaScript中,即使變量已經(jīng)聲明,但只要還沒有初始化就是undefined變量。如果變量已經(jīng)聲明并初始化,那么變量就不是null或undefined。然而,在該示例中它是一個全局變量,正如之前的章節(jié)所述,沒有以var關鍵字聲明的變量可能會引起各種各樣的問題。
5、縮減JavaScript代碼
空格能夠提高代碼的可讀性,但同時也會增加文件的大小。通常情況下,這沒什么影響,因為大多數(shù)JavaScript文件都非常小。然而,對于某些大型Ajax應用,或者復雜的JavaScript程序庫來說,太大的JavaScript文件會影響載入JavaScript的速度。
如果要盡可能壓縮JavaScript文件,那么可以選用一些免費的工具,例如Dean Edward的Packer(http://dean.edwards.name/packer/),它能夠在線壓縮JavaScript代碼。或者使用Wikipedia中"minify"條目(http://en.wikipedia.org/wiki/Minify)中所列舉的工具,這些工具可以在桌面或者服務器上使用。
另一類工具是用來保護JavaScript代碼版權的。這些工具不僅僅會壓縮JavaScript代碼,甚至還會對代碼進行加密,從而使代碼難以閱讀。
posted on 2010-05-24 17:13
黃小二 閱讀(368)
評論(0) 編輯 收藏 所屬分類:
Ajax