在同樣的化提網(wǎng)絡(luò )環(huán)境下，兩個(gè)同樣能滿(mǎn)足你的高網(wǎng)更(geng)新需求的網(wǎng)站，一個(gè)“Duang”的加載今日一下就加載出來(lái)了，一個(gè)加載了半天才出來(lái)，速度你會(huì )選擇哪個(gè)?化提研究表明：用戶(hù)最滿(mǎn)意的打開(kāi)網(wǎng)頁(yè)時(shí)(shi)間是2-5??秒，如果等待超過(guò)10秒，高網(wǎng)更新99%的加載今日用戶(hù)會(huì )關(guān)閉這個(gè)(ge)網(wǎng)頁(yè)。也許這樣講，速度各位還不會(huì )有太多感觸，化提接下來(lái)我列舉一組數據：Google網(wǎng)ヾ(′?｀)?站訪(fǎng)問(wèn)(wen)速度每慢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ù)響應時(shí)間是用在從Web服務(wù)器獲取HTML文檔并傳送到瀏覽器的，那剩余的時(shí)間去哪兒了?其余的80%??~90%時(shí)間花在了下(xia)載頁(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ò ))是一組分布在(zai)多個(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請求，從而提高加載速(?Д?)度。
四、壓縮組件
從HTTP1.1開(kāi)始，Web客戶(hù)端可以通過(guò)HTTP請求中的Acceヽ(′ー｀)ノpt-Encoding頭來(lái)表示對壓縮的支持，如果??Web服務(wù)器看到請求中有這個(gè)頭，就會(huì )使用客戶(hù)端列出(chu)來(lái)的方法中(zhong)的一種來(lái)進(jìn)行壓縮。W??eb服務(wù)器通過(guò)響應中的??Content-Encoding來(lái)通知Web客戶(hù)端?。
五、將樣式表放在頭部
首先說(shuō)明一下，將樣式表放在頭部對于實(shí)際頁(yè)面加載的時(shí)間并不能造成太大??影響??，但是這會(huì )減少頁(yè)面首屏出現??的時(shí)間，使頁(yè)(°ロ°) !面(mian)內容逐步呈現，改善用戶(hù)體驗，防止“白屏”。我們總是希望頁(yè)面能夠盡快顯示內容，為用戶(hù)提供可視化的回饋，這對網(wǎng)速慢的用戶(hù)來(lái)說(shuō)是很重要的。將樣式表放在文檔底部會(huì )阻止瀏覽器中??的內容逐步出現。為了避免當樣式變化時(shí)重繪頁(yè)面元素，瀏覽器會(huì )阻塞內(nei)容逐步呈現，造成“白屏”。
六、將腳??本放在底部
跟樣式表相同，腳本放在底(′-ι_-｀)部對于實(shí)際頁(yè)面加載的時(shí)間并不能造成太大??影響，但是這會(huì )減??少頁(yè)面首屏出現的時(shí)間，使頁(yè)面內容逐步呈??現。js的下載和執行會(huì )(hui)阻塞Do??m樹(shù)的構建(嚴謹地說(shuō)是中斷了Dom樹(shù)的更新)，所以script標簽放在首屏范圍內的HTML代碼段里會(huì )截斷首屏的內容。下載腳本時(shí)并行下載是被禁??用的——ヽ(′ー｀)ノ即使使用了不同的主機名，也不會(huì )啟用其他的下載。因為(wei)腳本可能修改頁(yè)面內容(′▽?zhuān)?，因此瀏覽器會(huì )等待;另外，也是為了保證腳本能夠按照正確的順序執行，因為后面的腳本可能與前面??的腳本存在依賴(lài)關(guān)系，不(′?｀*)按照順序執行可能會(huì )產(chǎn)生錯??誤。
七、避免CSS表達式
CSS表達式是動(dòng)態(tài)設置CSS屬性的(de)一種強大并且危險的(de)方式，它只支持IE5以及之(???)后版本、IE8之前版本。
八、使用外部的JavaScript和CSS
內聯(lián)腳本或者樣式可以減少HTTP請求，按理來(lái)說(shuō)可以提高頁(yè)面加載的速??度。然而在實(shí)際情況中，當腳本或者樣式是從外部引入的文件，瀏覽器就有可能緩存它們，從而在??以后加載的時(shí)候能夠直接使用緩存，而HTML文檔的大??小減小，從而提高加載速度。
九、減少DNS查找
當我們在瀏覽器的地址欄輸入網(wǎng)址 ，然后回車(chē)，回車(chē)這一瞬間到看到頁(yè)面到底發(fā)生了什么呢?域名解析 –> 發(fā)起TCP的(de)3次握手 –> 建立TCP連接后發(fā)起http請求 –> 服務(wù)器響應http請求，瀏覽器得到html代碼 –> 瀏覽(′?｀)器解析html代碼，并(╬?益?)請求html代碼中的資源(如js、css、圖片等??) –> 瀏覽器對頁(yè)面進(jìn)行渲染呈現給用戶(hù)。
十、精簡(jiǎn)??Javヾ(′?｀)?aScript
精簡(jiǎn)：精簡(jiǎn)就是(shi)從代碼中移除不必要的字符以減少文件??大小，降低加(′?ω?`)載的時(shí)間。??代碼精簡(jiǎn)的時(shí)候會(huì )移除不必(bi)要的空白字符(空???格，換行、制表符)，這樣整個(gè)文件的大小就變小了。
混淆：混淆是應用在源代碼上的另外一種方式，它會(huì )移除注釋和空白符，同時(shí)它還會(huì )改寫(xiě)代碼。在混淆的時(shí)候，函數和變量名將會(huì )被轉換成更短的字符串，這時(shí)代碼會(huì )更加精煉同時(shí)難以閱讀。通常這樣(yang)做是為了增加對代碼進(jìn)行反向工程的難度，這也同時(shí)提高了性能。
中文 
