提高網站通路速度的34條軍規（7-10）

原文：best practices for speeding up your web site

7 不使用CSS表達式 (Avoid CSS Expressions)

tag:css

CSS表達式是一種有力的（同時也很危險的）動态設定CSS屬性的方法。從IE5開始支援CSS表達式。比如，使用CSS表達式可以實作背景顔色每小時變換的效果。

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

如上所示，表達式方法采用了Javascript的表達。CSS屬性則被設為Javascript表達式的結果。其它的浏覽器會忽略CSS表達式，是以對于設定專屬IE的屬性以便在不同浏覽器間能有一緻的體驗是有用的。

而CSS表達式的問題是它比大多數人期望的執行次數更頻繁。表達式不僅僅在頁面展現和重新設定大小的時候執行，在頁面滾動，甚至使用者在頁面上挪動滑鼠時都會執行。給CSS表達式添加一個計數器可以跟蹤CSS在什麼時候和怎樣執行。在頁面上移動滑鼠可以輕易的産生一萬次以上的執行。

使用一次性的表達式是減少CSS表達式的執行次數的一個方法，當表達式第一次執行時，CSS表達式會被一個确定的值代替。如果在頁面生命周期中，樣式屬性必須動态的設定，使用事件處理替代CSS表達式是一個可選的方法。如果必須使用CSS表達式，要記得它們會執行上千次并影響頁面的性能。

8 使用外部的JavaScript和CSS (Make JavaScript and CSS External)

tag:javascript,css

很多性能規則都是解決怎樣處理獨立的元件的問題的。但是，考慮這些之前，你應該先考慮一個更基本的問題：JavaScript和CSS應該被放于外部的檔案，還是内聯在頁面裡？

在實際應用中使用外部的檔案往往産生更快的頁面，因為浏覽器會緩存JavaScript和CSS檔案。而内聯在頁面裡的JavaScript和CSS會在每次請求頁面時下載下傳。這會減少所需的HTTP請求數，但增大HTML文檔的體積。而另一方面，如果放在外部檔案裡的JavaScript和CSS被浏覽器緩存，則既不用增加HTTP請求的數量，HTML文檔的體積也會減少。

關鍵的問題是，外部的JavaScript和CSS的元件被緩存的頻率和HTML文檔被請求的次數相關。雖然很難去量化，但可以被用很多名額衡量。如果你的網站的使用者在每個會話中浏覽了很多網頁而且很多頁面重用了相同的JavaSctipt和樣式表，緩存外部檔案是有很大潛在的好處的。

很多網站都符合這樣的名額。對于這些網站來說，最好的解決方案是把JavaScript和CSS釋出為單獨的檔案。唯一的例外，對于首頁，内聯的檔案更好一些，例如Yahoo!'s front page 和My Yahoo!。首頁在每個會話中隻有很少浏覽（也許隻有一次），你會發現内聯的JavaScript和CSS會讓終端使用者的響應更快。

對于有很多頁面浏覽量的首頁來說，有很多能平衡内聯檔案所提供的HTTP請求減少的效果與外部檔案緩存獲得的好處的技巧。一種這樣的技巧就是把JavaScript和CSS内聯在說夜裡，但在頁面完成加載時動态下載下傳外部檔案。随後的頁面會調用浏覽器中已經緩存的外部檔案。

9 減少DNS的查詢 (Reduce DNS Lookups)

tag:content

正如電話簿使人名和他們的電話号碼相對應，域名系統（DNS）能夠使域名和IP位址相對應。當你在浏覽器中鍵入http://www.yahoo.com，浏覽器連結的DNS解析器會傳回伺服器的IP位址。域名解析會耗費一些時間，DNS查找給定域名的IP位址一般會耗費20-120毫秒。在DNS查找結束前，浏覽器不會從目标域名那裡下載下傳任何東西。

DNS查詢會被緩存以便優化性能。會有一個專門的緩存伺服器進行緩存，使用者的ISP或者本地網絡會維護它，但獨立使用者的電腦裡也會有緩存。DNS資訊存在于作業系統的DNS緩存裡（微軟Windows作業系統裡的“DNS客戶服務”）。大部分浏覽器有它們自己的緩存，與作業系統的緩存相獨立。當浏覽器在自己的緩存裡儲存了DNS的記錄，它不會向作業系統送出請求記錄的要求。

IE預設緩存DNS查詢30分鐘，在系統資料庫的DnsCacheTimeout的鍵值中設定。Firefox則緩存DNS查詢一分鐘，在配置network.dnsCacheExpiration 中設定。（Fasterfox 将它變為一小時。）

當用戶端的DNS緩存被清空（包括浏覽器和作業系統的緩存），DNS查詢的數量等同于網頁中單獨的域名的數量。包括頁面中的連結，圖檔，腳本檔案，樣式表，Flash對象等。減少不同域名的數量則會減少DNS查詢的數量。

減少不同域名的數量可能減少頁面并行的下載下傳數量。減少DNS查詢縮短了響應時間，但減少了并行下載下傳數也許會增加響應時間。我的建議是将元件分布在兩到四個域名之間。這能很好的折中減少DNS查詢提高的速度和維持較高水準的并行下載下傳的效果。

10 縮小JavaScript和CSS (Minify JavaScript and CSS)

tag:javascript,css

縮小是指從代碼中删除不必要的字母，減少檔案體積進而提高加載速度。縮減代碼時需要移除所有的注釋，以及不需要的空白（空格，新行和tab）。這樣處理JavaScript之後，會由于下載下傳檔案的體積被減少而提高響應的性能。兩個常用的縮減JavaScript代碼的工具是JSMin 和YUI Compressor。YUI compressor也可以壓縮CSS。

代碼混淆是另一個可用于源代碼的優化方案。它比壓縮更為複雜，而且在混淆的過程中更容易産生Bug。縱觀U.S.的前十大網站，壓縮獲得了21%的體積減小而代碼混淆達到了25%。雖然代碼混淆的壓縮程度更高，但壓縮JavaScript的風險更小。

不僅僅要壓縮外部的腳本和樣式表，内斂的<script>和<style>部分也可以而且應當被壓縮。即使你gzip了你的腳本和樣式，壓縮它們仍然能減少5%以上的體積。随着JavaScript和CSS的應用和體積的增加，壓縮你的代碼獲得的收益也會越來越多。