一.標識(注釋)的優(yōu)化
網(wǎng)站在開發(fā)上往往容易出現(xiàn)這樣兩種情況:一種是代碼過于緊密,其中包含大量注釋信息和排版空白,一種就是代碼太過寬松,其中不但包含了編輯器自動生成的標識語言及大量縮排空白,而且包含了編輯器常用來控制文件結構的特定注釋,甚至還有冗余或無用的標識或代碼。象這樣的代碼是不適合傳輸?shù)摹N覀兛梢酝ㄟ^下面一些安全有效的途徑來減小文件的大?。?
1.1 刪除多余的空白區(qū)域
一般說來,可以把那些多余的空白字符如空格,水平TAB,換行符等刪除掉。不過當然了,象<pre>,<textarea>文本框和CSS的<white-space>屬性中的空白是不能刪除的。
1.2 刪除注釋文字
除客戶端對IE瀏覽器和文檔類型聲明條件注釋之外的注釋幾乎都可以刪除,不會對文件造成什么影響。
1.3 將色值重新調(diào)整至最簡短形式
在顏色上,盡量不要只使用十六進制值或只使用顏色名稱,哪個短就用哪個。比如對于紅顏色,用它的屬性值“#ff0000”就沒有“red”來得簡短。而對于“淺金黃色”如果用它的顏色名“l(fā)ightgoldenrodyellow”就太長了,反不如用屬性值“#FAFAD2”。
1.4 將文字實體重新調(diào)整至最簡短形式
這一點與色值的替換類似。我們可以把一個單詞名很長的文字實體用一個數(shù)字性實體來表示。
1.5 刪除無用的標識
將無用代碼刪除。
二.CSS的優(yōu)化
我們可以對CSS代碼進行精簡來進一步減小文件的大小。不過,如今大多數(shù)網(wǎng)站所創(chuàng)建的CSS都要比普通HTML難壓縮的多。對CSS的代碼精簡有下面這樣一些安全有效的措施:
2.1 刪除CSS空白
CSS對空白的敏感度遠遠低于(X)HTML,因而可將CSS中的空白刪除來有效降低CSS文件和樣式表區(qū)域的大小。
2.2 刪除CSS注釋信息
就象刪除普通代碼中的注釋來精簡代碼一樣,由于CSS中的注釋對普通的終端用戶來說并沒有什么實用價值,所以應予刪除。不過,如果需要考慮改進過的瀏覽器,則可以保留在CSS的<style>中的屏蔽注釋信息。
2.3 將CSS中色值調(diào)整至最簡短形式
這一點也和HTML相似。對CSS字體顏色可以用單詞或十六進制格式。不過,這樣做在CSS中的效果會更為顯著一些。這是因為CSS支持3位6進制色值,例如對白色(#ffffff)可用“#fff”來表示。
2.4 對CSS設置進行重組,減少及刪除
CSS中設定了字體的大小,字重,顏色等。一般CSS內(nèi)容都是:
p {font-size:36pt;
font-family:Arial;
line-height:48pt;
font-weight:bold;}
我們可以將其改寫成:p{font:bold 36pt/48pt Arial;}
如果運用得當?shù)脑?,可以對樣式表中的一些語法規(guī)則進行大幅削減。不過目前還沒有這樣的工具,所以我們只能手工刪除,不過即將推出的w3compiler2.0版將會包含這一特性。
2.5重命名類和ID值
在CSS優(yōu)化中,對樣式表或ID值的重命名可能是最危險的一個步驟。對樣式表的重命名可以遵循這樣的原則:例如對于: .superSpecial{color: red; font-size: 36pt;} 則可將其更名為sS。而對ID值一樣可以遵循這樣的原則,例如對于:#firstParagraph {background-color: yellow;} 則可將原來的 "#firstParagraph" 更名為 "#fp" 。自然,這樣做可能會牽涉到“標識-樣式-腳本”的問題:如果一個“tag”有一個ID值,而這個值又可能不但用于樣式表,還可能用于腳本參考,甚至可能是一個鏈接目標地址。在這種情況下一旦修改了這個值,那么必須確保對所有文件中相關的腳本和鏈接參考都進行了相應的修改。
請注意:最好不要更改名稱屬性,尤其是表單區(qū)域中的名稱屬性。因為這些數(shù)值也會被服務器端程序操作。
作者簡介:
托馬斯.鮑威爾:PINT.com創(chuàng)始人,美國加洲大學圣地亞哥分校計算機科學系講師。曾在多家大型刊物雜志上發(fā)表文章,如《網(wǎng)絡世界》,《互聯(lián)網(wǎng)周刊》和ZDNet。并出版大量關于網(wǎng)絡技術和開發(fā)設計的書籍,其中包括在美國最暢銷的《網(wǎng)絡設計完全參考》。
喬.利馬:Port80Software.com的產(chǎn)品開發(fā)經(jīng)理。曾就職于多家不同互聯(lián)網(wǎng),無線和軟件開發(fā)公司, 尤擅主從式架構技術(server-centric)的研究和開發(fā)。