Best Practices for Speeding Up Your Web Site(3)

9、

Reduce DNS Lookups

tag: content

減小DNS查詢

標籤：內容

        域名系統（DNS）創建主機名到IP地址的映射，就像電話簿映射人名到其電話號碼同樣。當你鍵入www.yahoo.com到你的瀏覽器（地址欄）中，瀏覽器所鏈接到的DNS解析器會返回服務器的IP地址。DNS也會有開銷。DNS大概會花費20-120毫秒的時間爲給定的主機名查詢IP地址。瀏覽器不能從這個域名中下載任何東西，直到DNS查詢徹底結束。

        DNS會緩存結果覺得了更好性能。這個緩存可能存在於一個特殊的緩存服務器，該服務器由用戶的ISP提供商或者局域網來維護，可是在用戶的我的PC機中也會存在緩存的發生。DNS信息會保存在操做系統中的DNS緩存中（DNS Client Service on Microsoft Windows）。大多數的瀏覽器有本身的緩存，獨立於操做系統中的緩存。只要瀏覽器在本身的緩存中保存DNS記錄，就不會向操做系統發送記錄請求了。

        默認狀況下IE將DNS查詢結果緩存30分鐘，這是在DnsCacheTimeout註冊設置中規定的。FIrefox會將DNS查詢結果緩存1分鐘，這能夠經過network.dnsCacheExpiration配置進行控制。（Fasterfox 將時間改成1個小時）

        當客戶端的緩存是空白（對於瀏覽器緩存和操做系統緩存）時，DNS查詢的（請求）數量等同於在web頁面中包含的惟一主機名稱的數量。這些包含網頁URL，圖片，腳本，樣式表，Flash對象等等所用到的主機名稱。減小惟一的主機名稱會減小DNS的查詢數量。

         減小惟一主機名的數量，會潛在的減小網頁中的併發下載數量。避免DNS查詢縮短了響應時間，可是減小併發下載會增長響應時間。個人指導是將這些組件分隔在大於2個但小於4個的主機名稱中。這會在減小DNS查詢和容許一個較高併發下載之間達到一個較好的折衷。

10、

Minify JavaScript and CSS

tag: javascript, css

縮減Javascript和CSS

標籤：Javascript，css

        縮減操做指的是移除代碼中沒必要要的字符來縮小體積進而改善加載時間的操做。代碼縮減後，全部的註釋將被移除，沒必要要的空白字符（space, newline, and tab）將被移除。對於Javascript來講，這改善了響應時間效果，由於所下載的文件大小縮減了。兩個比較流行的Javascript代碼縮減工具是 JSMin和 YUI Compressor，

YUI Compressor一樣也能縮減CSS代碼。 

        除了能夠減少外部的腳本和樣式外，內聯的<script>和<style>塊也可以而且應該被減少。儘管你能夠壓縮（gzip）你的腳本和樣式，可是減少它們仍就能縮減5%甚至更多的大小。隨着你的Javascript和CSS的使用和大小的增長，代碼得到的縮減量也會增長。

11、

Avoid Redirects

tag: content

避免重定向

標籤：內容

        重定向能夠經過使用狀態碼301和302完成。如下是一個包含301的HTTP響應頭的例子：

        HTTP/1.1 301 Moved Permanently

        Location: http://example.com/newuri

        Content-Type: text/html

        瀏覽器會自動將用戶帶到Location所指明的URL中去。全部重定向所需的信息都在頭部。響應體一般是空的。無論它們的名字是什麼，不管是301仍是302響應，在實際中都不會被緩存，除了包含額外的頭信息，例如Expires or Cache-Control，來指示它們將被緩存。meta標籤的refresh和Javascript是其它能夠將用戶引向不一樣連接的方法，可是若是你必需要作一個重定向時，優先選擇的技術是利用標準的3xx HTTP狀態碼，主要是保證後退按鈕能正常工做。

        主要要記住的是重定向會下降用戶體驗。在用戶和HTML文檔之間插入一個重定向，會延遲頁面中的全部東西，由於頁面中的任何東西都不會被渲染而且任何組件都不會被當即下載，直到HTML文檔到來。

        其中一個最浪費的重定向常常發生而且開發者們多數不會注意到它。它發生在一個在URL中原本應該存在的反斜槓（/）被丟失的狀況下。例如：訪問 http://astrology.yahoo.com/astrology 致使一個包含301響應的重定向到http://astrology.yahoo.com/astrology/ （請注意尾部增長的反斜槓）若是你使用Apache handler，這能夠經過使用Alias或者mod_rewrite進行修復，或者用DirectorySlash 指令。

        鏈接一個老的站點到一個新的站點是重定向的另外一個比較廣泛的用處。其它的用處是鏈接站點的不一樣部分或者基於特定條件(瀏覽器的類型,用戶帳戶的類型,等等 etc.)來引導用戶。使用重定向來鏈接兩個站點是簡單的而且只須要不多的額外代碼。雖然在這些狀況下利用重定向會減輕開發者的開發複雜度，可是卻使用戶體驗下降了。若是你的兩條代碼路線都在同一臺服務器上提供，那麼可使用Alias 和 mod_rewrite來替代以上方法。若是是域名變換引發的重定向，一個可選的辦法是建立一個CNAME（一個DNS記錄，用來建立一個別名從指向一個域名到另外一個域名）來聯合Alias 或者 mod_rewrite.

12、

Remove Duplicate Scripts

tag: javascript

刪除重複的腳本

標籤：Javascript

        在一個頁面中兩次包含相同的腳本會影響性能。這不會像你想象的那樣常見。一個對美國前十名網站的評審顯示其中兩個站點都包含了重複的腳本。在一個單文檔中引起重複腳本機率增長的兩個主要因素是：團隊的大小和腳本的數量。當重複腳本的狀況確實發生時，它會經過建立沒必要要的HTTP請求和浪費掉的Javascript的執行來影響性能。

        

        沒必要要的HTTP請求發生在IE中，在Firefox中卻不會發生。在IE中，若是一個外部的腳本文件被包含兩次而且沒有被緩存，在頁面的加載過程當中會產生兩次的HTTP請求。儘管腳本是可緩存的，可是當用戶從新加載頁面時額外的HTTP請求又會產生。

        

        除了產生浪費掉的HTTP請求外，時間也會因爲屢次解析腳本而被浪費掉。這些多餘的腳本執行操做在IE和Firefox中都會存在，不管你的腳本是否是可緩存的。

 

         一個解決偶爾發生的包含兩次相同腳本的辦法是在你的模板系統中實現腳本管理模塊。典型的方式是在你的HTML頁面中，在script標籤包含你要使用的腳本。

         <script type="text/javascript" src="menu_1.0.17.js"></script>

    在PHP中的可選辦法是建立一個叫作insertScript的函數。

       

        <?php insertScript("menu.js") ?>

除了防止相同腳本在同一頁面中插入屢次，這個函數能處理其它的腳本問題，例如依賴檢測和增長腳本文件名版本號來支持將來的Expires 頭。