前端調優規則一共23條，前面的推文我們掌握了一部分前端調優的規則，今天給大家繼續分享。後續文章都會系統分享幹貨，帶大家從0到1學會性能測試，另外還有教程等同步資料，文末加小編VX：flyhappy111領取即可。
08将JavaScript和CSS置于外部
所謂的将JavaScript和CSS置于外部，就是我們說的外置JavaScript和CSS。關于JavaScript和CSS在前端頁面中的使用通常有兩種方式：
一種是：内聯方式；
一種是：外置方式；
内聯方式是指将JavaScript和CSS直接嵌入到前端頁面，如以下代碼：
[head]
[script type="text/javascript"]
function IsEven()
{
var number = document.getElementById("TextBox1").value;
if (number % 2 == 0)
{
alert(number + " is even number");
}
else
{
alert(number + " is odd number");
}
}
[/script]
[/head] 外置方式是指将JavaScript或CSS寫在一個單獨的檔案中，字尾名為“.js”或“.css”格式，然後在HTML頁面中調用這個單獨的檔案，如以下代碼：
[head]
[script type="text/javascript" src="ExternalJavaScript.js"][/script]
[/head] 内聯JavaScript和CSS的優點如下：
1) 有效減少 HTTP 請求次數，提升前端頁面性能，緩解伺服器壓力。
2) 浏覽器加載完CSS才能渲染頁面，是以可以防止CSS檔案無法讀取而造成頁面裸奔的現象。
内聯JavaScript和CSS的缺點如下：
1) 可維護性差，每天如果有需要修改内容，必須對很多頁面進行修改。
2) 内聯JavaScript和CSS在每次頁面加載的都必須重新加載。
3) 協同開發的能力差，不友善多名開者同步工作。
外聯JavaScript和CSS的優點如下：
1) 如果JavaScript和CSS被多個頁面調用時，這樣修改更友善，隻要修改一個檔案就可以。
2) 分離HTML、CSS和Javascript可以更容易操縱它們，友善協同工作。
3) 外置Javascript檔案可以被浏覽器緩存。
外聯JavaScript和CSS的缺點如下：
1) 外置的方式增加了HTTP的請求數。
2) 浏覽器要加載完CSS才能渲染頁面，是以影響頁面的性能。
在現實世界中使用外部檔案通常會産生更快的頁面，因為浏覽器會緩存JavaScript和CSS檔案。每次請求HTML文檔時，都會下載下傳HTML文檔中内聯的JavaScript和CSS。這減少了所需的HTTP請求數量，但增加了HTML文檔的大小。另一方面，如果JavaScript和CSS位于浏覽器緩存的外部檔案中，則HTML文檔的大小會減少，而不會增加HTTP請求的數量。
關鍵因素是外部JavaScript和CSS元件相對于所請求的HTML文檔數量的緩存頻率。這個因素盡管難以量化，但可以使用各種名額進行衡量。如果您的網站上的使用者每個會話有多個頁面浏覽量，并且許多網頁重複使用相同的腳本和樣式表，則緩存的外部檔案可能帶來更大的潛在收益。
在比較内聯和外置檔案時，知道使用者緩存外部元件的可能性的可能性很重要，通常使用者在第一次通路頁面時是空緩存，之後的多次後續頁面檢視都是具有完整緩存的。如果在通路系統時，具有完整緩存的頁面占所有檢視數量的比例越多，那說明外置檔案的收益越高也就越有利，當然如果具有完整緩存的頁面占所有檢視數量的比例很低，那麼内聯檔案的方式更有利。
如果網站中有很多頁面使用相同的JavaScript和CSS，那麼使用外部檔案可以更好的提高這些元件的重用率，在這種情況下使用外部檔案更有優勢，因為當使用者在頁面導航時JavaScript和CSS元件已經位于浏覽器的緩存中。當然反過來也很容易了解了，如果沒有任何兩個頁面共享相同的JavaScript和CSS，重用率就會很低，當然很少有網站會出現這兩種極端的情況了。
如果首頁伺服器知道一個元件是否在浏覽器的緩存中，那麼就可以在内聯或使用外部檔案之間做出最佳選擇，當然伺服器不能檢視浏覽器緩存中有那些内容，但可以使用Cookies做訓示器，如果Cookies不存在，就使用内聯JavaScript和CSS，如果Cookies出現了，則可以使用外部元件位于浏覽器的緩存中，這就是我們通常說的“動态内聯”。
基于以上原因通常我們建議将JavaScript和CSS置于外部。
09減少DNS查找
DNS(Domain Name System，域名系統)，網際網路上作為域名和IP位址互相映射的一個分布式資料庫，能夠使使用者更友善的通路網際網路，不用記住能夠被機器直接讀取的IP數串。通過域名，得到該域名對應IP位址的過程叫做域名解析(或主機名解析)。DNS将主機名映射到IP位址上，就像電話本将人名映射到所對應的電話号碼一樣，當在浏覽器中輸入www.baidu.com時，連接配接到浏覽器DNS解析器傳回伺服器的IP位址。像百度官網的IP位址為14.215.177.38。DNS協定運作在UDP協定之上，使用端口号53。在RFC文檔中RFC 2181對DNS有規範說明，RFC 2136對DNS的動态更新進行說明，RFC 2308對DNS查詢的反向緩存進行說明。
然而，DNS解析也是存在開銷的，通常浏覽器查找一個指定主機名的IP位址，需要花費20到120ms，在DNS解析完成之前，浏覽器不能從主機名那裡下載下傳任何東西。DNS的查找有以下幾個步驟：
1) 浏覽器檢查自身緩存中有沒有被解析過的這個域名對應的IP位址，如果存在解析就結束了。
2) 如果浏覽器緩存中命中，即沒有找到，那麼浏覽器會檢查作業系統緩存中有沒有對應的已解析過的結果。在windows作業系統
C:\Windows\System32\Drivers\etc
路徑下有一個hosts的檔案，在這裡如果指定了一個域名對應的IP位址，那麼浏覽器會首先使用這個IP位址進行通路。
3) 如果前面兩步都沒有命中域名，那麼才會請求本地的域名伺服器(LDNS)來解析這個域名，大約80%的域名解析會到這裡完成。
4) 如果LDNS仍然沒有命中，就會直接跳到Root Server域名伺服器請求解析。
5) Root Server域名伺服器會傳回一個查詢域的主域名伺服器給LDNS。
6) 此時LDNS再發送一個請求給上一步傳回的主域名伺服器。
7) 接受請求的主域名伺服器查找并傳回這個域名對應的Name Server的位址，Name Server是網站注冊的域名伺服器。
8) Name Server根據映射關系表找一目标IP，傳回給LDNS。LDNS緩存這個域名和對應的IP。
9) LDNS把解析的結果傳回給使用者，使用者根據TTL值緩存到本地系統緩存中。
DNS解析的響應時間依賴于DNS解析器、它所承擔的請求壓力、用戶端與伺服器的距離和帶寬速度。
TTL(Time To Live)表示查找傳回的DNS記錄包含的一個存活時間，表明記錄可以被緩存多久，這個值告訴用戶端可以對該記錄緩存多久。過期則這個DNS記錄将被抛棄。盡管作業系統緩存會考慮TTL值，但浏覽器通常忽略該值，賆設定它自己的時間限制。并且浏覽器對緩存DNS的記錄數量也是有限制的，而不管緩存記錄時間，如果使用者在短時間通路了很多不同域名的網站，較早的DNS記錄将被丢棄，必須重新查詢該域名。
不同的浏覽器對于DNS緩存有所不同，
Internet Explorer的DNS緩存在
[HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Internet Settings]鍵下由三個設定控制：
"DnsCacheTimeout"=30分鐘
"KeepAliveTimeout"=1分鐘
"ServerInfoTimeOut"=2分鐘
這表示如果DNS伺服器TTL值小于30分鐘的話，對浏覽器進行DNS查找的頻率産生的影響很小。
對于FireFox浏覽器在about:config中設定就可以：
network.dnsCacheEntries=400
network.dnsCacheExpiration=60
network.http.keep-alive.timeout=115
在DNS解析過程中，減少唯一主機名的數量也呆以縮短DNS解析時間，如果用戶端的DNS緩存為空時，DNS查找的數量與Web頁面中唯一主機名的數量相等。但是減少唯一主機名的數量有可能減少頁面中發生的并行下載下傳量。減少并行下載下傳可能會增加響應時間。我的準則是将這些元件分成至少兩個但不超過四個主機名。這在減少DNS查找和允許高度并行下載下傳之間取得了很好的折衷。
綜上所述減少DNS查找通常可以提高響應性能。
下期繼續分享調優規則，敬請關注！
![性能測試之理發店模型解釋[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)