在同樣的化提網(wǎng)絡(luò )環(huán)境下，兩個(gè)同樣能滿(mǎn)足你的高網(wǎng)更新需求的網(wǎng)站，一個(gè)“Duang”的加載今日一下就加載出來(lái)了，一個(gè)加(?_?;)載了半天才出來(lái)，速度你會(huì )選擇哪個(gè)?化提研究表明：用戶(hù)最滿(mǎn)意的(de)打??開(kāi)網(wǎng)頁(yè)時(shí)間是2-5秒，如果等待超過(guò)10秒，高網(wǎng)更新99%的加載今日用戶(hù)會(huì )關(guān)閉這個(gè)網(wǎng)頁(yè)。也許這樣講，速度各位還不會(huì )有太多感觸，化提接下來(lái)我列舉一組數據：Google網(wǎng)站訪(fǎng)問(wèn)速度每慢400ms就導致用戶(hù)搜索請求下降0.59%;Amazon每增加100ms網(wǎng)站延遲將(????)導致收入下降1%;雅虎如果有400ms延遲會(huì )導致流量下降5-9%。高網(wǎng)更新網(wǎng)站的加載今日加載速度嚴重影響了用戶(hù)體驗，也決定了這個(gè)網(wǎng)站的速度生死存亡。

可能有人會(huì )說(shuō)：網(wǎng)站的化提性能是后端工程師的事情，與前端并無(wú)多大關(guān)系。高網(wǎng)更新事實(shí)上，加載今日只有10%~20%??的最終用戶(hù)響(xiang)應時(shí)間是用在從Web服務(wù)器獲??取HTML文檔并傳送到瀏覽器的，ヽ(′ー｀)ノ那剩余的時(shí)間去(qu)哪兒了?其余的80%~90%時(shí)間花在了下載頁(yè)面中的所有組件上。接下來(lái)帶您了解如何來(lái)提高頁(yè)面的加載速度。

一、減少HTTP請求

上面說(shuō)到80%~90%時(shí)間花在了下載頁(yè)面中的所有組件進(jìn)行的HTTP請求上。因此，改善響應時(shí)間最簡(jiǎn)單的途徑就是減少HTTP請求的數量。

二、使用CDN

如果ヾ(′ω｀)?應用程序web服務(wù)器離用戶(hù)更近，那么一個(gè)HTTP請求的響應時(shí)間將縮短。另一方面，如果組件web服務(wù)器離用戶(hù)更近，則多個(gè)HTTP請求的響應時(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ù)器，或者具有最短響應時(shí)間的服務(wù)器。

三、添加Expires頭

頁(yè)面的初次訪(fǎng)問(wèn)者會(huì )進(jìn)行很多HTTP請求，但是通過(guò)使用一個(gè)長(cháng)久的Expires頭，可以使這些組件被緩存，下次訪(fǎng)問(wèn)的時(shí)候，就可以減少不必要的HTPP請求(????)，從而提(ti)高加載速度。

四、壓縮組件

從HTTP1.1開(kāi)始，Web客戶(hù)端可以通過(guò)HTTP請求中的Accept-Encoding頭來(lái)表示對壓縮的支持，如??果Web服務(wù)器看到請求中有這個(gè)頭，就會(huì )使用客戶(hù)端列(lie)出來(lái)的方法中(zhong)的一種來(lái)進(jìn)行壓縮。Web服務(wù)器通過(guò)響應中的Content-Encoding來(lái)通知Web客戶(hù)端。

五、將樣式表放在頭部

首先說(shuō)明(ming)一下，將樣式表放在頭部對于實(shí)際頁(yè)面加載的時(shí)間并不能造成太大影響，但是這會(huì )減少頁(yè)面首屏出現的時(shí)間(jian)，(′-ι_-｀)使頁(yè)面內容逐步呈現，改善(???)用戶(hù)體驗，防止“白屏”。我們總是希望頁(yè)面能夠盡快顯示內容，為用戶(hù)提供可視化的回饋，這對網(wǎng)速慢的用戶(hù)來(lái)說(shuō)是很重要的。將樣式表放在文檔底部(′_ゝ`)會(huì )阻止瀏覽器中的內容逐步出現。為了避免當樣式變化時(shí)重繪頁(yè)面元素，瀏覽器會(huì )阻塞內容逐步呈現，造成“白屏??(′?｀*)”。

六、將腳本放在底部

跟樣式表相同，腳本放在底部對于實(shí)際頁(yè)面加載的時(shí)間并不能造成太大影響，但是這會(huì )減少頁(yè)面首屏出現的時(shí)間，使頁(yè)面內容逐步呈(′?｀*)現。js的下載和執行??會(huì )阻塞Dom樹(shù)的構(′▽?zhuān)?)建(嚴謹地說(shuō)是中斷了Dom樹(shù)的更新(′ω｀*))，所以scrip(╯°□°)╯t標簽放在首屏范圍內的HTML代碼段里會(huì )截斷首屏的內容。下載腳本時(shí)并行下載是被禁用的(′ω｀)——即使使用了(′?｀)不同的主機名，也不會(huì )啟用其他的下載。因為腳本可能修改頁(yè)面內容，因此瀏覽器會(huì )等待;另外，也是為了保證腳本能夠按照正確的順序執行，因為后面的腳本可能與前面的腳本存(╬?益?)在依賴(lài)關(guān)系，不按照順序執行可能會(huì )產(chǎn)生??錯誤。

七、避免CSS表達式

八、使用外部的JavaScript和CSS

內聯(lián)腳本或者樣式可以減少HTTP請求，按理來(lái)說(shuō)可以提高頁(yè)面加載的速度。然而在實(shí)際情況中，當腳本或者樣式是從外部引入的文件，瀏覽器就有可能緩存它們，從而在以后加載的時(shí)候能夠直接使用緩存，而HTML文檔的大小ヾ(′?｀)?減小，從而提高加載速度。

九、減少DNS查找

十、精簡(jiǎn)JavaScript

精簡(jiǎn)：精簡(jiǎn)就是從代碼??中移除不必要的字符以減少文件大小，降低加載(zai)的時(shí)間。代碼精簡(jiǎn)的時(shí)候會(huì )移除不必要的空白字符(空格，換行、制表符)，這樣整個(gè)文件的大小就變小了。

混淆：混淆是應用在源代碼上的另外一種方式，它會(huì )移除注釋和空白符，同時(shí)它還會(huì )(hui)改寫(xiě)??代碼。在混淆的時(shí)候，函數和變(bian)量名???將會(huì )被轉換成更短的字符串，這時(shí)代碼會(huì )更加精煉同時(shí)難以閱讀。通常這樣做是為了增加對代碼進(jìn)行反向工程的難度，這也同時(shí)提高了性能。