在很多情況下我們在訪(fǎng)問(wèn)一些網(wǎng)站的種網(wǎng)載速時(shí)候，總是頁(yè)提感覺(jué)頁(yè)面加載的速度不夠快，這是高加什么原ヾ(′▽?zhuān)??因導致的呢？作為網(wǎng)站的開(kāi)發(fā)者又能做哪些優(yōu)化，來(lái)提高頁(yè)面的種網(wǎng)載速加載??速度呢？??接下來(lái)大寶跟大家聊下我是如何來(lái)提高頁(yè)面的加載速度的。
一、頁(yè)提減少HTTP請求
一個(gè)網(wǎng)站80%~90%時(shí)間花在了下載頁(yè)面(mian)中的高加所有組件進(jìn)行的HTTP請求上。因此，種網(wǎng)載速改善響應時(shí)間最簡(jiǎn)單的頁(yè)提途徑就是減少HTTP請求的數量。
圖片地圖：
假設導航欄上有五幅圖片，高加??點(diǎn)擊每張圖片??都會(huì )進(jìn)入一個(gè)鏈接，種網(wǎng)載速這(zhe)樣五張導航的頁(yè)提圖片在(′；ω；`)加載時(shí)會(huì )產(chǎn)生5個(gè)HTTP請求。然而，高加使用一個(gè)圖片地圖可以提高效率，種網(wǎng)載速這樣就只需要一個(gè)HTTP請求。頁(yè)提
服務(wù)器端圖片地圖：將所有點(diǎn)擊提交到同一個(gè)url，高加同時(shí)提交用戶(hù)點(diǎn)擊的x、y坐標，服務(wù)器端根據坐標映射響應
客戶(hù)端圖片地圖：直接將點(diǎn)擊映射到操??作
<imgsrc="planets.jpg" border="0"usemap="#planetmap"alt="Planets&??quot;/><map name="planetmap" id="planetmap"> <areashape="rect" coords="180,139,14" href ="venus.html" alt="Venus" /&g??t; <area shape="rect&q??uot;coords="129,161,10" href ="mercur??.html" alt="Mercury" /> <area shape="rect" coords=&??quot;0,0,11┐(′д｀)┌0,260"href ="sun.htm??l" alt="Sun" /> <area shape="rect" coords="140,0,110,260" href ="star.html" alt="Sun&q(′_ゝ`)uot; /></map>(???);使用圖片地圖的缺點(diǎn)：指定坐標區(′_｀)域時(shí)，矩形或圓形比較容易指定，而其(qi)它形狀手工指定比較難
CSS Spri(╬ ò﹏ó)tes
CSS Sprites直譯過(guò)來(lái)就是CSS精(jing)靈，但是這種翻譯顯然是不夠的，其實(shí)就是通過(guò)將多個(gè)圖片融合到一副圖里面，然后通過(guò)CSS的一些技術(shù)布局到網(wǎng)頁(yè)上。特別是圖片特別多的網(wǎng)站，如果能用css sprites降(╬?益?)低圖片數量??，帶來(lái)的將是速度的提升。
<div> <span id="image1" class="nav"></span><spanid="image2"class="nav"></span><span id="image3" class="nav"></span> <span id="image4" class="nav"></span> <spanid="image5" class="nav"></span></div>.nav {width: 50px;height:50px; dis(?????)play: inline-block; border: 1px solid #000; backgr(′?ω?`)ound-image: url('E:/┐(′?｀)┌1.png&#??39;);}#image1 { background-position: 0 0;}#image2 { backgro(′_｀)und-position: -95px 0;}#image3{ background-position: -185px? 0;}#image4{background-position: -275px 0;}#imag??e5 { background-position: -366px -3px;}運行結果：
PS：使用CSS Sprites還有可能降低下載量，可能大家會(huì )認為合并后的圖片會(huì )比分離圖片的總和要大，因為還有可能會(huì )附加空白區域。實(shí)際上，合并后的圖片會(huì )(′_ゝ`)比分離的圖片??總和要小，因為它降低了圖片自身的開(kāi)銷(xiāo)，譬如顏?色表、格式信息等。
字體圖標
在可以大量使用字體圖標的地方我們可以盡可能使用字體圖標，字體圖標可(ke)以減少很多圖片的使用，從而減少http請求，字體圖標還可以??通過(guò)CSS來(lái)設置顏色、大小等樣(yang)式，何樂(lè )而不為。合并腳本 和樣式表
將多個(gè)樣式表或者腳本文件合并到一個(gè)文件中，可以減少HTTP請求的數量從而縮短效應時(shí)間。
然而合(′?ω?`)并所有文件對許多人尤其是編寫(xiě)模塊化代碼的??人來(lái)說(shuō)是不能(neng)忍的，而且合并所有的樣式文件或者腳本文件可能會(huì )導致在一個(gè)頁(yè)面加載時(shí)加載了多于自己所需要的樣式或者腳本，對于只訪(fǎng)問(wèn)該網(wǎng)站一個(gè)（或幾個(gè)）頁(yè)面的人來(lái)說(shuō)反而增加了下載量，所以大家應該自(′▽?zhuān)?)己權衡利弊。
二、使用CDN
如果應用程序web服務(wù)器離用戶(hù)更近，那么一個(gè)HTTP請求的響應時(shí)間將縮短(◎_◎;)。另一方面，如果組件web服務(wù)器離用戶(hù)(╬ ò﹏ó)更近，則多個(gè)HTTP請求的響應(ying)時(shí)間將縮短。
CDN（內容發(fā)布網(wǎng)絡(luò )）是一組分布在多個(gè)不同地理位置的Web服務(wù)器，用于更加有效地向用戶(hù)發(fā)布內容。在優(yōu)化性能時(shí)，向特定用戶(hù)發(fā)布內容的服務(wù)器的選擇基于對網(wǎng)絡(luò )慕課擁堵的測量。例如，CDN可能選擇網(wǎng)絡(luò )階ヽ(′ー｀)ノ躍數最小的服務(wù)器，或者具有最短響應(ying)時(shí)間的服務(wù)器。
CDN還可以進(jìn)行數(shu)據備份、擴展存儲能力，進(jìn)行緩存，同時(shí)有助于緩和(he)We??b流量峰值壓力。
CDN的(de)缺點(diǎn)：
1、響應時(shí)間可能會(huì )受到其他網(wǎng)站流量的影響。CDN(?_?;)服務(wù)提供商在(⊙_⊙)其所有客戶(hù)之間共享Web服務(wù)器組。
2、如果CDN服務(wù)質(zhì)量下降了，那么你的工作質(zhì)量也將下降
3、無(wú)法直接控制組件服務(wù)器
三、添加Expires頭
頁(yè)面的初次訪(fǎng)問(wèn)者會(huì )進(jìn)行很多HTTP請求，但是通過(guò)使用一個(gè)長(cháng)久的Expires頭，可以使這些組件被緩存，下次訪(fǎng)問(wèn)的時(shí)候，就可以減少不必要的HTPP請求，從而提高加載速度。
Web服務(wù)器通過(guò)Expires頭告訴客戶(hù)端可以使用一個(gè)組件的當前副本，直到指定的時(shí)間為止。例如：
Expires:Fri, 18 Mar 2016 07:41:53 GMT
Expires缺點(diǎn)： 它要求服??務(wù)器和客戶(hù)端時(shí)鐘嚴格同步；過(guò)期日期需要經(jīng)??常檢查HTTP1.1中引入Cache-Control來(lái)克服Expires頭的限制，使用max-age指定組件被緩存多久。
Cache-Control： max-age=12345600若同時(shí)??制定Cache-Control和Expires，則max-age將覆蓋Expires頭
四、壓縮組件
從HTTP1.ヽ(′ー｀)ノ1開(kāi)始，Web客戶(hù)端可以通過(guò)HTTP請求中的Accept-Encoding頭來(lái)表示對壓縮的支持
Accept-Encoding: gzip,deflate??
如果Web服務(wù)器看到請求中有這個(gè)頭，就會(huì )使用客戶(hù)端列出來(lái)的方法中的一種來(lái)進(jìn)行壓縮。Web服務(wù)器通過(guò)響應中的Content-Encoding來(lái)通知 Web客戶(hù)端。Content-Encoding: gzip
代理緩存
當瀏覽器通過(guò)代理來(lái)發(fā)送請求時(shí)，情況會(huì )不一樣。假設針對某個(gè)URL發(fā)送到代理的第一個(gè)請求來(lái)自于一個(gè)不支(′?_?`)持gzi(′?_?`)p的瀏覽器。這是代理┐(′ー｀)┌的第一個(gè)請求，緩存為空。代理將請求轉發(fā)給服務(wù)器。此時(shí)響應是未壓縮的，代理緩存同時(shí)發(fā)送給瀏覽器?，F在，假設到達代理的請求是同一個(gè)url，來(lái)自于一個(gè)支持gzip的瀏覽器。代理會(huì )使用緩存(cun)中未壓縮的內容進(jìn)行響應，從而失去了壓縮的機會(huì )。相反，如果第一個(gè)瀏覽器支持gzip，第二個(gè)不支持，你們代理緩存中的壓縮版本將會(huì )提??供給后續的瀏覽器，而不管它們是否支持gzip。
解決辦法：在web服務(wù)器的響應中添加vary頭Web服務(wù)器可以告訴代理根據一個(gè)或多個(gè)請求頭來(lái)改變緩存的響應。因為壓縮的決定是基于A(yíng)ccept-Encoding請求頭的，因此需要在vary響應頭中包含Accept-Encoding。
vary:Accept-Encoding五、???將樣式表放在頭??部
首先說(shuō)明一下，將樣式表放在頭部對于實(shí)際頁(yè)面加載的時(shí)間并不能造成太大影響，但是這會(huì )減少頁(yè)面首屏出現的時(shí)間，使頁(yè)面內容逐步呈現，改善用戶(hù)體驗，防止“白屏”。我們總是希望頁(yè)面能夠盡快顯示內容，為用戶(hù)提供可視化的回饋，ヽ(′?｀)ノ這對網(wǎng)速慢的用戶(hù)來(lái)說(shuō)是很重要的。
將樣式表放在文(⊙_⊙)檔底部會(huì )阻止瀏覽器中的內容逐步出現。為了避免當樣式變化時(shí)(shi)重繪頁(yè)面元素，瀏覽器會(huì )阻塞內容逐步呈現，造成“白屏”。這源自瀏覽器的行為：如果樣式表仍在加載，構建呈現??樹(shù)就是一種(zhong)浪費，因為所有樣式表加載解析完畢之前務(wù)虛會(huì )之任何東西
六、將腳本放在底部
更樣式表相同，腳本(′?｀*)放在底部對于實(shí)際頁(yè)面加載的(de)時(shí)間并不能造成太大影響，但是這會(huì )減少頁(yè)面首屏出現的時(shí)間，使頁(yè)面內容逐步呈現。
js的下載和執行會(huì )阻塞Dom樹(shù)的構建（嚴謹地說(shuō)是中斷了Dom樹(shù)的更新），所以script標簽放在首屏范圍內的HTML代碼段里會(huì )截斷首屏的內容。
下載腳本時(shí)并行下載是被禁用的——即使使用了不同的主機名，也不會(huì )(hui)啟用其他的下載。因為腳本可能修改頁(yè)面內容，因此瀏覽器會(huì )等待；另外，也是為了保證腳本能(′_｀)夠按照正確的順序執行，因為后面的腳本??可能與前面的腳本存在依賴(lài)關(guān)系，不按照順序執行??可能會(huì )產(chǎn)生錯誤。
七、避免CSS表達式CSS表達式是動(dòng)態(tài)設置CSS屬(/ω＼)性的一種強大并且危險的方式，它受到了IE5以及之后版本、IE8之前版??本的支持。
p {width:expression(func(),documen??t.body.clientWidth > 400 ? &qu??ot;400px" : &q??uot??;a??uto??&qu???ot;); height: 80px; border: 1px solid #f00;}<p><span(′?ω?`)></span></p><p><span></span></p><p><span><??;/span></p>&??lt;p><span></span></p><p><span></span></p><script>var?? n = 0; function func() { n++;//alert();con(′?｀)sole.log(n); }</script>
鼠標移動(dòng)了幾次，函數的運行次數輕而易舉的達到了幾千次，危險性顯而易見(jiàn)。
如何解決：
一次性表達式：
p { width??: expression(func(this)); height: 80px; border:1px solid #f00;}<p><span>&ヾ(′?｀)?lt;/span></p><(′?_?`)p><span></span></p><p><(°□°);span></span></p><p><span&(′▽?zhuān)?gt;</span></p><p><span></span></p><scrip??t(╬?益?)> var n = 0; function func(elem) { n++; elem.sty??le.width= document.body.clientWidth > 400 ? '400px' : "auto"; consol??e.log(n??); }</script>事件處理機制
用js事件處理機制來(lái)動(dòng)態(tài)改變元素的樣式，使函數運行次數在可控范圍之內。
八、使用外部的JavaScript和CSS
內聯(lián)腳本或者樣式可以減少HTTP請求，按理來(lái)說(shuō)可以(yi)提高頁(yè)面加載的速度。然而在實(shí)際情況中，當腳本或者樣式是從外部引入的文件，瀏覽器就有可能緩存它們，從而在以后加載的時(shí)候能夠直接使用緩存，而HTML文檔的大小減小，從而提高加載速??度。
影響因素：
1、每個(gè)用戶(hù)產(chǎn)生的頁(yè)面瀏覽量越少，內聯(lián)腳本和樣(yang)式的論據越強勢。譬如一個(gè)用戶(hù)每個(gè)月只訪(fǎng)問(wèn)你的網(wǎng)站一兩次，那么這種情況下內聯(lián)將會(huì )更好。而如果該用戶(hù)能夠產(chǎn)生很多頁(yè)面瀏覽量，那(′?_?`)么緩存的樣式和腳本將會(huì )極ヽ(′▽?zhuān)?/大減少下載的時(shí)間，提交頁(yè)面加載速度。
2、如果你的網(wǎng)站不同的頁(yè)面之間使用的組件大致相同，那么使用外部文件可以提高這些組件的重用率。
加載后下載
有??時(shí)候我們希望內聯(lián)樣式和腳本，但又可以為接下來(lái)的頁(yè)面提供外部文件。那么我們可以在頁(yè)面加載完成止嘔動(dòng)態(tài)加載外部組件，以便用戶(hù)接下來(lái)的訪(fǎng)問(wèn)。
1functiondoOnload() { 2 setTimeout("downloadFile()",100??0); 3 } 4 5 window.onload = doOnload; 6 7 function downl??oadFile() { 8 downloadCss(&??quot;http://abc.com/css/a.css"); 9 downloadJS("http://abc.com/js/a.js");10 }1112 function downloadCss(url) { 13 var ele = document.createElement('link');14ele.rel = "stylesheet&quo(°ロ°) !t;;15 ele.type = "text/css";16 ele.href = url;1718 document.body.appendChil┐(′?｀)┌d(ele);19 }2021 function downloadJS(url) { 22 var ele = document.createElement('script');23 ele.src = url;24 document.body.appendChild(ele);25 }在該頁(yè)面中，JavaScript和ヽ(′ー｀)ノCSS被加載兩次（內聯(lián)和外部??）。要使其正常工作，必須處理雙重定義。將ヾ(?■_■)ノ這些組件放到一個(gè)不可見(jiàn)的IFrame中是一個(gè)比較好的解決方式。
九、減少DNS查找
當我們在瀏覽器的地址欄輸入網(wǎng)址（比如： www.linux178.com） ，然后回車(chē)，回車(chē)這一瞬間到看到頁(yè)面到底發(fā)生了什么呢？域名解析 --> 發(fā)起TCP的3次握手 --> 建立TCP連接后發(fā)起http請求 --> 服務(wù)器響應http請求，瀏覽器得到html代碼 --&g(′▽?zhuān)?t; 瀏覽器解析html代碼，并(bing)請求html代碼中的資源（如js、css、圖片等） --> 瀏覽器對頁(yè)面進(jìn)行渲??染呈現給用戶(hù)
域名解析是頁(yè)面加載的第一步，那么域名是如何解析的呢？以Chrome為例(′?ω?`)：
1. Chrome瀏覽器 會(huì )首先搜索瀏覽器自身的DNS緩存（緩存時(shí)間比較短，大概只有1分鐘，且只能容納1000條緩存），看自身的緩存中是否有www.linux178.com 對應的條目，而且沒(méi)有過(guò)期，如果有且沒(méi)有過(guò)期則解析到此結束。注：我們怎么查看Chrome自身的緩存？可以使用 chrome://net-internals/#dns 來(lái)進(jìn)行查看ヽ(′▽?zhuān)?ノ2. 如果瀏覽器自身的緩存里面沒(méi)有找到對應的條目，那么Chrome會(huì )搜索操作系統自身的DNS緩存,如果找到且沒(méi)有過(guò)期則停止搜索解析到此結束.注：怎么查看操作系統自身的DNS緩存，以Windows系統為例，可以在命令行下使用 ipconfig /displaydns 來(lái)進(jìn)行查看 3. 如果在Windows系統的DNS緩存也沒(méi)有找到，那么嘗試讀取hosts文件（位于C:\Window┐(′д｀)┌s\System32\drivers??\etc），看看這里面有沒(méi)有該域名對應的(′?｀*)IP地址，如果有??則解析成功。4. 如果在hos(′?｀*)ts文件中也沒(méi)有找到對(dui)應的條目，瀏覽器就會(huì )發(fā)起一個(gè)DNS的系統調用，就會(huì )向本地配置的首選DNS服(°ロ°) !務(wù)器（一般是電信運營(yíng)商提供的，也可以使用像Google┐(′?｀)┌提供的DNS服務(wù)器）發(fā)起域名解析請求（通過(guò)的是UDP協(xié)議向DNS的53端口發(fā)起請求，這個(gè)請求是遞歸的請求，也就是運營(yíng)商的DNS服務(wù)器必須得提供給我們該域名的IP地址），運??營(yíng)商的DNS服務(wù)器首先查找自身的緩存，找到對應的條目，且沒(méi)有過(guò)期，則解析成功。如果沒(méi)有找到對應的條目，則有運??營(yíng)商的DNS代我們的瀏覽器發(fā)起迭代DNS解析請求，它首先是會(huì )找根域的DNS的IP地址（這個(gè)DNS服( ?° ?? ?°)務(wù)器都內置13臺根域的D??NS的IP地址），找打根域的DNS地址，就會(huì )向其發(fā)??起請ヾ(′ω｀)?求（請問(wèn)www.linux178.com這個(gè)域名的IP地址是多少??？），根域發(fā)現這是一個(gè)頂級域com域的一個(gè)(′▽?zhuān)?域名，于是就告訴運營(yíng)商的DNS??我不知道這(zhe)個(gè)域名的IP地址，但是我知道com域的IP地址，你去找它去，于是運營(yíng)商的DNS就得到了com域的IP地址，又向com??域的IP地址┐(′?｀)┌發(fā)起了請求（請??問(wèn)www.linux178.com這個(gè)域名的IP地址是多少?）,com域這臺服務(wù)器告訴運營(yíng)商的( ???)DNS我不知道www.linux178.com這個(gè)域名的IP地址，但是我知道linux178.co??m這個(gè)域(???)的DNS地址，你去找它去，于是運營(yíng)商的DNS又向linux178.com這個(gè)域名的DNS地址（這個(gè)一般就是由域名注冊商提供的，像萬(wàn)網(wǎng)，新網(wǎng)等）發(fā)起請求（請問(wèn)www.linux178.com這個(gè)域名的IP地址是多少？），這個(gè)時(shí)候linux178.com域的DNS服務(wù)器一查，誒，果真在我這里，于是就把找到的結果發(fā)送給運營(yíng)商的DNS服務(wù)器，這個(gè)時(shí)候運營(yíng)商的DNS服務(wù)器就拿到了www.linux178.com這個(gè)域名對應的??IP地址，并返回給Windows系統內核，內核又把結果返回給瀏覽器，終于瀏覽器拿到了www.linux178.com對應的I??P地址，該進(jìn)行(⊙_⊙)一步的動(dòng)作了。注：一般情況下是不會(huì )進(jìn)行以下步驟??的(de)如果經(jīng)過(guò)以上的4個(gè)步驟，還沒(méi)有解析成功，那么會(huì )??進(jìn)行ヾ(′▽?zhuān)??如下步驟：5. 操作系統就會(huì )查找NetBIOS name Cache（NetBIOS名稱(chēng)緩存，就存在客戶(hù)端電腦中的），那這個(gè)緩存有什么東西呢？凡是最近一段時(shí)間內和我成功通(′?｀*)訊的計算機的計算機名和Ip地址，就都會(huì )存在這個(gè)緩存里面。什么情況下該步能解析成功呢？就是該名稱(chēng)正好是幾分鐘前和我成功通信過(guò)，那么這一步就可以成功解析。6. 如果第5步也沒(méi)有成功，那會(huì )查詢(xún)WINS 服務(wù)器（是NETBIOS名稱(chēng)和IP地( ???)址對應的服務(wù)器）7. 如果第6步也沒(méi)有查詢(xún)成功，那么客戶(hù)端就要進(jìn)行廣播查找8. 如果第7步也沒(méi)有成功，那么客戶(hù)端就讀取LMHOSTS文件（和HOSTS文件同一個(gè)目錄下，寫(xiě)(╯‵□′)╯法也一樣）如(????)果第八步還沒(méi)有解析成功，那么就宣告這次解析失敗，那就無(wú)法跟目標計算機進(jìn)行通信。只要這八步中有一步可以解析成功，那就可以成功和目標計算機進(jìn)行通信。DNS也是開(kāi)銷(xiāo)，通常瀏覽器查找一個(gè)給定域名的IP地址要花??費20~120毫秒，在(zai)完成域名解析之前(′Д` )，瀏覽器不能從服務(wù)器加載ˉ\_(ツ)_/ˉ到任何東西。那么如何減少域名解析時(shí)間，加快頁(yè)面加載速(╬ ò﹏ó)度呢？
當客戶(hù)端DNS緩存（瀏覽器和操作系統）緩存為空時(shí)(shi)，DNS查找的數量與要加載的We( ?ω?)b頁(yè)面中唯一主機名的數量相同，包括頁(yè)面URL、腳本、樣式表、圖片、Flash對象等的主機名。減少主機名的 數量就可以減少DNS查找的數量。減少唯一主機名的數量會(huì )潛在減少頁(yè)面中并行ヽ(′ー｀)ノ下載(zai)的數量（HTTP 1.1規范建議從每個(gè)主機名并行下載兩個(gè)組件，但實(shí)際上ヽ(′▽?zhuān)?/可以多個(gè)），這樣減少主(′?｀)機(′?ω?`)名和并行??下載的方案會(huì )產(chǎn)生矛盾，需要大家自己權衡。建議將組件放到至少兩個(gè)但(dan)不多于4個(gè)主機名下，減少DNS查找的同時(shí)也允(╬?益?)許高度并行下載。
十、精簡(jiǎn)Jav??aScrip??t
精簡(jiǎn)
精簡(jiǎn)就是(°ロ°) !從代碼中移除不必要的字符以減??少文(wen)件大??小，降低加載的(?????)時(shí)間。代碼精簡(jiǎn)的時(shí)候會(huì )移除不必要的空白(′?｀)字符（空格，換行、制表符），這樣整個(gè)文件的大小就變小了。
混淆
混淆是應用在源代碼上的另外一種方(fang)式，它會(huì )移除注釋和空白符，同時(shí)它還會(huì )改寫(xiě)代碼。在混淆的時(shí)候，函數和變量名將會(huì )被轉換成更短的字符串，這時(shí)代碼會(huì )更加??精煉同時(shí)難以閱讀。通常這樣做是為了增加對代碼進(jìn)行反向工程的難度，(╯°□°）╯︵ ┻━┻這也同時(shí)提高了性能。
缺點(diǎn)：
混淆本身比較復雜，可能會(huì )引入錯誤。
需要對不能改變的符號做標記，防止Ja??vaScript符號（譬如關(guān)鍵字、保留字）被修改。
混淆會(huì )使代碼難以閱讀，這使得在產(chǎn)品環(huán)境中調試問(wèn)題更加困難。
在以上提到了關(guān)于用gzip之類(lèi)的壓縮方式來(lái)壓縮文件，這邊說(shuō)明一下，就算使用gzip等方式來(lái)壓縮文件，精簡(jiǎn)代碼依然是有必要的。一般來(lái)說(shuō)，壓縮產(chǎn)生的節省是高于精簡(jiǎn)的，在生產(chǎn)環(huán)境中，精簡(jiǎn)和壓縮同時(shí)使用能夠最大限度的獲得更多的節省。
CSS的精簡(jiǎn)
CSS的精簡(jiǎn)帶來(lái)的節省一般來(lái)說(shuō)是小于JavaScript精簡(jiǎn)的，因為CSS中注(′?｀*)釋和空白相對較少。除了移除空??白、注(′?ω?`)釋之外，CSS可以通過(guò)優(yōu)化來(lái)獲得更多的節?。?/span>
合并相同的類(lèi)；
移除??不使用的類(lèi)；
使用縮寫(xiě)，譬如
.right { color: #fff; padding-top: 0;margin: 0 10px; bor??de??r: 1px solid #111}.wrong { color:#ffffff; padding-top: 0px; mar??gin-top: 0; margin-bottom: 0; margin-left: 10px; margin??-right:10px; border-color: #111; border-width: 1px; border-style: solid;??}上面.right是正確的的(′▽?zhuān)?)寫(xiě)法，顏色使用縮寫(xiě)，使用0代替0px，合并可以合并的樣(yang)式。另外，在精簡(jiǎn)的時(shí)候其實(shí)樣式最后(hou)一行的'；'也是可以省略的。
來(lái)看看精簡(jiǎn)的例子：
以上分(fen)別是jquery-2.0.3的學(xué)習版（未精簡(jiǎn)）和精簡(jiǎn)版，可見(jiàn)精簡(jiǎn)文件的大小比源文件小了155k，而且，在精簡(jiǎn)版中jquery還做了混淆，譬如用e代替window等，從而獲得最大的ヽ(′▽?zhuān)?ノ節省。
十一、避免重定向
什么是重定向？
重定向用于將用戶(hù)??從一個(gè)URL重新路由到另一個(gè)URL。
常用重定向的類(lèi)型
301：永久重定向，主要用于當網(wǎng)站的域名發(fā)生變更之后，告訴搜索引擎域名已經(jīng)變更了，應該把舊域名的的數據和鏈接數轉移到新域名下，從而不會(huì )??讓網(wǎng)站的排名因域名變更而受到影響。
302：臨時(shí)重定向，主要實(shí)現post請求后告知瀏覽器轉移到新的URL。
304：Not Modified，主要用于當瀏覽器在其緩存中保留了組(°□°)件的一個(gè)副本，同時(shí)組件已經(jīng)過(guò)期了，這是瀏覽器就會(huì )生成一個(gè)條件GET請求，如果服務(wù)器的組件并沒(méi)有修改過(guò)，則會(huì )返回304??狀態(tài)碼，同時(shí)不攜帶主體，告知瀏覽器可以重用這個(gè)副本，減少響應大小。
重定向如何損傷性能?
當頁(yè)面發(fā)生了重定向，就會(huì )延遲整個(gè)HTML文檔的傳輸。在HTML文檔到達之??前，頁(yè)面中不會(huì )呈現任何東西，也沒(méi)有任何組件會(huì )被下載。
來(lái)看一個(gè)實(shí)際例子：對于A(yíng)SP.NET webform開(kāi)發(fā)來(lái)說(shuō)，對于新手很容易犯一個(gè)錯誤，就是把頁(yè)面的連接寫(xiě)成服務(wù)器控件后臺代碼里，例如用一個(gè)Button控件，在它的后臺click事件中(′?｀)寫(xiě)上：Response.Redirect("")；然而這個(gè)Button的(de)作用只是轉移U( ?ヮ?)RL，這是非常(chang)低效的做法，因為點(diǎn)擊Button后，先發(fā)送一個(gè)Post請求給服務(wù)器，服務(wù)器處理Response.Redirect("ヽ(′▽?zhuān)?ノ;")后就發(fā)送一個(gè)302響應給瀏覽器，瀏覽器再根據響應的URL發(fā)送GET請求。正確的做法應該是在html頁(yè)面直接使用a標簽做鏈接，這樣就避免了多余的post和重定向。
重定向的應用場(chǎng)景1. 跟蹤內部流量
重定向經(jīng)常用于跟蹤用戶(hù)流量的方向,當擁有一個(gè)門(mén)戶(hù)主頁(yè)的時(shí)候，同時(shí)想對用戶(hù)離開(kāi)主頁(yè)后的流量進(jìn)行跟蹤，這時(shí)可以使用重定向。例如: 某網(wǎng)站主頁(yè)新聞的鏈接地址http://a.com/r/news，點(diǎn)擊該鏈接將產(chǎn)生301響應，其Lo??cation被設置為http://news.a.com。通過(guò)分析a.com的web服務(wù)器日志可以得知人(′_ゝ`)們離開(kāi)首頁(yè)之后的去向。
我們知道重定向是如何損傷性能的，為了實(shí)現更好的效率，可以使用Referer日志來(lái)跟蹤內部流量去向。每個(gè)HTTP請求都有一個(gè)Referer表示原始請求頁(yè)(除了從書(shū)簽打開(kāi)或直接鍵入URL等操作)，記錄下每個(gè)請求的Referer??，就避免了向用戶(hù)發(fā)送重定向，從而改善了響應時(shí)間。
2. 跟蹤出站流(′?ω?`)量
有時(shí)鏈接可能將用戶(hù)帶離你的網(wǎng)站，在這種情況下，使用Referer就不太現實(shí)了。
同樣也可以使用重定向來(lái)解決跟(′▽?zhuān)?蹤出站流量問(wèn)題。以百度搜索為例，百度通過(guò)將每個(gè)鏈接包裝到一個(gè)302重定向來(lái)解決跟蹤的問(wèn)題，例如搜索關(guān)鍵字“前端性能優(yōu)化”，搜索結果中(′-ι_-｀)的一個(gè)URL為htt(′▽?zhuān)?)ps://www.bai??du.com/link?url=pDjwTfa0IAf_FRBNlw1qLDtQ27YBujWp9jPN4q0QSJdNtGtDBK3ja3jyyN2CgxR5aTAywG(′?ω?`)4SI6V1NypkSyLISWjiFuFQDin(′ω｀)hp??Vn4QE-uLGG&wd=&eqid=9c02bd21001c69170000000556ece297，即使搜索結果并沒(méi)有變，但這個(gè)字符串是動(dòng)態(tài)改變的(de)，暫時(shí)還不知道這(′?｀*)里起到怎樣的作用？（個(gè)人感覺(jué)：字符串中包含了待訪(fǎng)問(wèn)的網(wǎng)址，點(diǎn)擊之(zhi)后會(huì )產(chǎn)生302(′▽?zhuān)?)重定向，將頁(yè)面轉到目標頁(yè)面（待修改，求大神們給我指正））
除了重定向外，我們還可以選擇使用信標(beacon)——一個(gè)HTTP請求(′?｀)，其URL中包含有跟蹤信息。跟蹤信息可以從信標Web服務(wù)器的訪(fǎng)問(wèn)日記中提取出來(lái)，信標通常是一個(gè)1px*1px的(de)透明圖片，不過(guò)2??04響應更優(yōu)秀，因(yin)為它更(geng)小，從來(lái)不被緩存，而且絕不會(huì )改變?yōu)g覽器的狀態(tài)。
十二、刪(′▽?zhuān)?)除重復腳本
在團隊開(kāi)發(fā)一個(gè)項目時(shí)，由于不同開(kāi)發(fā)者之間都可能會(huì )向頁(yè)面中添加頁(yè)面或組件，因此可能相同??的腳本會(huì )被添加多次。(′-ι_-｀)
重復的腳本會(huì )造成不必要的HTTP請求（如果沒(méi)有緩存該腳(′▽?zhuān)?)本的話(huà)），并且執行多余的JavaScript浪費時(shí)間，還有可(′?｀)能造成錯誤。
如何避免重復腳本呢？
1. 形成良好的腳本組織。重復腳本有可能出現在不同的腳本包含同一??段腳本的情況，有些是必要的，但有些卻不是必要的，所以需要對腳本進(jìn)行一個(gè)良好的組織。
2. 實(shí)現??腳本管理器模塊。
例如：
1functioninsertScript($file) { 2 if(hadInserted($fi??le)) { 3 return; 4 } 5 exeInsert($file); 6 7 if(hasDep(′ω｀*)end(′?_?`)encies($file)) { 8 9 $deps = getDepe(???)ndencies($file);1011 foreach ($deps as $script) { 12 insertScript($script);13}1415 echo "<script type='text/javasc(╯°□°）╯ript' src='".getVersion($file)."'></script>";1617 }18 }先檢查是否插入過(guò)，如果插入過(guò)則返回(/ω＼)。如果該腳本依賴(lài)其ヽ(′ー｀)ノ它腳本，則被依賴(lài)的(′?_?`)腳本也會(huì )被插入。最后腳本被??傳送到頁(yè)面，getVersion會(huì )檢查腳本并返回追加了對應版本號的文件名，這(zhe)樣如果??腳本的版本變化了，那么以前瀏覽器緩存的ヽ(′▽?zhuān)?ノ就會(huì )失效。
十(shi)三、配置ETag
以前瀏覽器緩存的就會(huì )失效。
什么是ETag？
實(shí)體標簽(E?ntityTag)是唯一標識了一個(gè)組件的??一個(gè)特定版本的字符串，是web服務(wù)器用于確認緩存組件的有效性的一種機制，通?？梢允褂媒M件的某些屬性來(lái)構造它。
條件GET請求
如果組件過(guò)期了，瀏覽器在重用它之前必須首先檢查它是否有效。瀏覽器將發(fā)送一個(gè)條件GET請求到服務(wù)器，服務(wù)器判斷緩存還有效，則發(fā)送一個(gè)304響應，告訴瀏覽器可以重用緩存組件。
那么服務(wù)器是根據什么判斷緩存是否還有效呢???有兩種方式：
ETag（實(shí)體標簽）；
最新修改日期；
最新修改日期
原始服務(wù)ヽ(′▽?zhuān)?ノ器通過(guò)Last-Modi┐(′?｀)┌fied響應頭來(lái)返回組件的??最新修改日期。
舉個(gè)栗子：當我們不帶緩存訪(fǎng)問(wèn)www.google.com.hk的時(shí)候，我們ヽ(′▽?zhuān)?ノ需要下載google的logo，這時(shí)會(huì )發(fā)送這樣一個(gè)HTTP請求：
GET googlelogo_color_272x92dp.pngHTTP 1.1
Host: www.google.com.hkResponse(/ω＼):
HTTP 1.1 200 OK
Last-Modified:Fri, 04 Sep 2015 22:33:ヾ(′ω｀)?08 GMT
當需要再次訪(fǎng)問(wèn)相同組件的時(shí)候，同時(shí)緩存已經(jīng)過(guò)期，瀏覽器會(huì )發(fā)(fa)送如下條件GET請求：
GETgooglelogo_color_272x92dp.pngHTTP 1.1
If-Modified-Since:??Fri, 04 Sep 2015 22:33:08 GMTH( ?ω?)ost: www.googl??e.com.hk
實(shí)體標簽
ETag提供了另外一種方式，用于檢??測瀏覽器緩存中的(de)組件與原始服務(wù)器(qi)上的組件是否匹配。摘抄自書(shū)上的例子：
不帶緩存的請求：
Reque(????)st：
GET /i/yah???oo/gif HTTP 1.1
Host: us.yimg.com
Response:
HTTP 1.1 200 OKLast-Modified:Tue,12 Dec 200603:03:59 GMT
ETag:”10c24bc-4ab-457elc1f“
再次請求相同組件:
Request：
GET /i/yahoo/gif HTTP 1.1
Host: us.yimg(╯°□°)╯.co??m
If-Modified-Since:Tue,12?? Dec 200603:03:59 GMT
If-No??ne-M??atc??h:”10c2??4bc-4ab-457elc1f“Response:
HTTP 1.1 304 Not Midified
為什么要引入ETag?
ETag主要是為了解(╬ ò﹏ó)決Last-Modif??ied無(wú)法解決的一些ヽ(′▽?zhuān)?ノ問(wèn)題：1. 一些文件也許會(huì )周期??性的更改，但是他的內容并不改變(僅僅改變的修改時(shí)間)，這個(gè)時(shí)候我們并不希望客戶(hù)端認為這個(gè)文件被修改了，而重新GET;
2. 某些文件修改非常頻繁，比如在秒以下的時(shí)間內(nei)進(jìn)行修改，(比方說(shuō)1s內修改了N次)，If-Modified-Since能檢查到的粒度是s級的，這種修改無(wú)法判斷(或者說(shuō)UNIX記錄MTIME只能精確(╬?益?)到秒);
3. 某些服務(wù)器??不能精確的得到文件的最后修改時(shí)間。
ETag帶來(lái)的問(wèn)題
ETa┐(′?｀)┌g的問(wèn)題在于通常使用某些屬性來(lái)構造它，有(you)些屬性對于特定的部署了網(wǎng)站的(de)服務(wù)器來(lái)說(shuō)是唯一的。當(dang)使用集群服務(wù)器的時(shí)候，瀏覽器從一臺服務(wù)器上獲取了原始組ヾ(′▽?zhuān)??件，之后又向另外一臺不同的服務(wù)器發(fā)起條??件GET請??求，ETag就會(huì )出現不匹配的狀況。例如：使用in(???)ode-size-timestamp來(lái)生成ETag，文件系統使用in??ode存儲文件類(lèi)型、所有者、組和訪(fǎng)問(wèn)模式等信息，在多臺服務(wù)器上，就算文件大小、權限、時(shí)間戳等都相同，inode也是不同的。
最佳實(shí)踐
1. 如果使用Last-Modi(???)fied不會(huì )出現任何問(wèn)(wen)題，可以直接移除ETag，google的搜索首頁(yè)則沒(méi)有使用ETag。
2. 確定要使用(╬?益?)ETag，在配置ETag的值的時(shí)候，移除可能影響到組件集群服務(wù)器驗證的屬性，例如使用size-timestamp來(lái)生成時(shí)間戳。
十四、(′ω｀)使A(′?｀)jax可緩存
維基百科中這樣定義Ajax：
AJAX即“Asynchronous Ja??vaScript and XML”（異步的JavaScript與XML技術(shù)），指的是一套綜合了多項技術(shù)的瀏覽器端網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)。Ajax的(de)概念由杰西·詹姆士??·賈瑞特所提出。傳統的Web應用允許用戶(hù)端??填寫(xiě)表單（form），當提交表單時(shí)就向Web服務(wù)器發(fā)送一個(gè)請求。服務(wù)器接收并處(′_｀)理傳來(lái)的表單，然后送回一個(gè)新的網(wǎng)頁(yè)，但這個(gè)做法浪費了(′?ω?`)許多帶??寬，因為在前后??兩個(gè)頁(yè)面中的大部分HTM??L碼往往是相(′▽?zhuān)?同的。由(???)于每次應用的(de)溝通都需要向服務(wù)器發(fā)送請求，應用的回應時(shí)間依賴(lài)于服務(wù)器的回應時(shí)間。這導致了用戶(hù)界面的回應比本機應用慢得多。
與此不??同，??AJAX應用可以?xún)H向服務(wù)器發(fā)送并取回必須的數據，并在客戶(hù)端采用JavaScript處理來(lái)自服務(wù)器的回應。因為在服務(wù)器和瀏覽器之間交換的數據大量減少（大約只有原來(lái)的5%）[來(lái)源請求],服務(wù)器回(hui)應更快了。同時(shí)，很多的??處理工作可以在發(fā)出請求的客戶(hù)端機器上完成，因此Web服務(wù)器的負荷也減少了。
類(lèi)似于DHTML或LAMP，AJAX不是指一種單一的技術(shù)，而是有機地利用了一系列相關(guān)的技術(shù)。雖(′?ω?`)然其名稱(chēng)包含XML，但實(shí)際上數據格式可以由JSON代替，進(jìn)一步減少數據量，形成所謂的A(′▽?zhuān)?)JAJ。而客戶(hù)端與服務(wù)器也并不需要異步。一些基于A(yíng)JAX的“派生／合成&rd??quo;式（derivative/composite）的技術(shù)也正在出現，如AFLAX。
Ajax的目地是為突破web本質(zhì)的開(kāi)始—停止交互方式，向用戶(hù)顯示一個(gè)白屏后重繪整個(gè)頁(yè)面??不是一種好的用戶(hù)體驗。
異步與??即時(shí)
Ajax的一個(gè)明顯的有點(diǎn)就是向用戶(hù)提供了(le)即時(shí)反饋，因為它異步的從后端web服務(wù)器請求信息??。
用戶(hù)是否需要等待的關(guān)鍵因素在于A(yíng)jax請求是被動(dòng)的還是主動(dòng)的。被動(dòng)請求是為(′ω｀*)了將??來(lái)來(lái)使用而預先發(fā)起的，主動(dòng)請求是基于用戶(hù)當前的操作而發(fā)起的
什ヽ(′?｀)ノ么樣的AJAX請求可以被緩存？
POST的請求，是不可以在客戶(hù)端緩存的，每次請求都需要發(fā)送給服務(wù)器進(jìn)行處理，每次都會(huì )返回狀態(tài)碼200。（可以在(T_T)服務(wù)器端對數據進(jìn)行緩存，以便提高處理速度）
GET的請求，是可以（而且默認）在客戶(hù)端進(jìn)行(′?_?`)緩存的，除非指定了不同的地址，否則同一個(gè)地址的AJAX請求，不會(huì )重復在服務(wù)器(qi)執行，而是返回304。A??jax請求使用(yong)緩存
在進(jìn)行Ajax請求的時(shí)(′?｀*)候，可以選擇盡量使用get方法，這樣可以使用客戶(hù)端的緩存，提高請求速度。
本文(′▽?zhuān)?)來(lái)源網(wǎng)絡(luò )，轉載請注明大寶SEO博客。
