掘金品質
工匠精神
\
聯(lian)系掘金設(she)計服務顧問(wen)！為您提供專業的網站策劃方案和建議。
免費服務熱線：
0592-5782073
稍后再說
掘金品質
工匠精神
聯(lian)系掘金設(she)計服務顧問(wen)！為您提供專業的網站策劃方案和建議。
免費服務熱線：
可能有人會說：網站的性能是后端工程師的事情，與前端并無多大關系。事實上，只有10%~20%的最終用戶響應時間是用在從Web服務器獲取HTML文檔并傳送到瀏覽器的，那剩余的時間去哪兒了？
只有10%~20%的最終用戶響應時間花在了下載HTML文檔上。其余的80%~90%時間花在了下載頁面中的所有組件上。
接下來帶您了解如(ru)何來提高頁面的加載速度。
一、減少HTTP請求
上面(mian)說到(dao)80%~90%時間花在了下載頁面(mian)中的(de)(de)所有組(zu)件進行的(de)(de)HTTP請求(qiu)(qiu)上。因(yin)此(ci)，改善響應時間最簡單(dan)的(de)(de)途徑就是減少HTTP請求(qiu)(qiu)的(de)(de)數量。
二、使用CDN
如果應用程序web服務器離用戶更近，那么一個HTTP請求的響應時間將縮短。另一方面，如果組件web服務器離用戶更近，則多個HTTP請求的響應時間將縮短。
CDN（內容發布網(wang)絡(luo)）是(shi)一組分布在(zai)(zai)多個不同地(di)理(li)位(wei)置的(de)(de)Web服務(wu)器(qi)，用于更加有效(xiao)地(di)向用戶(hu)發布內容。在(zai)(zai)優化性(xing)能時(shi)(shi)，向特定用戶(hu)發布內容的(de)(de)服務(wu)器(qi)的(de)(de)選擇基(ji)于對網(wang)絡(luo)慕(mu)課擁堵的(de)(de)測量。例(li)如，CDN可能選擇網(wang)絡(luo)階(jie)躍數(shu)最小的(de)(de)服務(wu)器(qi)，或者具(ju)有最短響應時(shi)(shi)間的(de)(de)服務(wu)器(qi)-。
三、添加Expires頭
頁(ye)面的(de)(de)(de)初次訪(fang)問者(zhe)會進行很多HTTP請求，但是通過使用一個(ge)長久的(de)(de)(de)Expires頭，可以(yi)使這些組件被(bei)緩存，下(xia)次訪(fang)問的(de)(de)(de)時候，就(jiu)可以(yi)減少不(bu)必要的(de)(de)(de)HTPP請求，從而提高加載(zai)速度-
四、壓縮組件
從HTTP1.1開始，Web客戶端可以通過HTTP請求中的Accept-Encoding頭來表示對壓縮的支持
Accept-Encoding: gzip,deflate
如果Web服務器看到請求中有這個頭，就會使用客戶端列出來的方法中的一種來進行壓縮。Web服務器通過響應中的Content-Encoding來通知 Web客戶端。
Content-Encoding: gzip
代理緩存
當瀏覽器通過代理來發送請求時，情況會不一樣。假設針對某個URL發送到代理的第一個請求來自于一個不支持gzip的瀏覽器。這是代理的第一個請求，緩存為空。代理將請求轉發給服務器。此時響應是未壓縮的，代理緩存同時發送給瀏覽器。現在，假設到達代理的請求是同一個url，來自于一個支持gzip的瀏覽器。代理會使用緩存中未壓縮的內容進行響應，從而失去了壓縮的機會。相反，如果第一個瀏覽器支持gzip，第二個不支持，你們代理緩存中的壓縮版本將會提供給后續的瀏覽器，而不管它們是否支持gzip-。
解決辦法：在web服務器的響應中添加vary頭Web服務器可以告訴代理根據一個或多個請求頭來改變緩存的響應。因為壓縮的決定是基于Accept-Encoding請求頭的，因此需要在vary響應頭中包含Accept-Encoding。
vary: Accept-Encoding
五、將樣式表放在頭部
首先說明一下，將樣式表放在頭部對于實際頁面加載的時間并不能造成太大影響，但是這會減少頁面首屏出現的時間，使頁面內容逐步呈現，改善用戶體驗，防止“白屏”。
我們總是希望頁面能夠盡快顯示內容，為用戶提供可視化的回饋，這對網速慢的用戶來說是很重要的。
將樣(yang)式表(biao)放(fang)在文(wen)檔底部(bu)會阻止瀏覽(lan)器(qi)中的內容逐(zhu)步(bu)(bu)出現。為(wei)了避免(mian)當樣(yang)式變化時重繪頁面(mian)元素，瀏覽(lan)器(qi)會阻塞(sai)內容逐(zhu)步(bu)(bu)呈現，造成“白屏”。這(zhe)源自瀏覽(lan)器(qi)的行為(wei)：如果樣(yang)式表(biao)仍在加載，構建(jian)呈現樹就是一種浪費，因為(wei)所有樣(yang)式表(biao)加載解析(xi)完畢之前務虛會之任何東西。
六、將腳本放在底部
更樣式表相同，腳本放在底部對于實際頁面加載的時間并不能造成太大影響，但是這會減少頁面首屏出現的時間，使頁面內容逐步呈現。
js的下載和執行會阻塞Dom樹的構建（嚴謹地說是中斷了Dom樹的更新），所以script標簽放在首屏范圍內的HTML代碼段里會截斷首屏的內容。
下(xia)載(zai)腳本(ben)時并行下(xia)載(zai)是(shi)被禁用(yong)的(de)(de)(de)——即(ji)使(shi)使(shi)用(yong)了不(bu)同的(de)(de)(de)主機名(ming)，也不(bu)會(hui)啟(qi)用(yong)其(qi)他的(de)(de)(de)下(xia)載(zai)。因為腳本(ben)可(ke)能(neng)修改頁面內容，因此瀏覽器會(hui)等(deng)待；另(ling)外(wai)，也是(shi)為了保證(zheng)腳本(ben)能(neng)夠(gou)按照(zhao)正確的(de)(de)(de)順序執行，因為后(hou)面的(de)(de)(de)腳本(ben)可(ke)能(neng)與前面的(de)(de)(de)腳本(ben)存在依賴關系，不(bu)按照(zhao)順序執行可(ke)能(neng)會(hui)產生錯誤。
七、避免CSS表達式
CSS表達式(shi)是動態設置CSS屬性的一種強大并且(qie)危(wei)險的方式(shi)，它受到了(le)IE5以及之后版本(ben)、IE8之前版本(ben)的支持。
八、使用外部的JavaScript和CSS
內聯腳(jiao)本或者(zhe)樣(yang)式可以減(jian)少HTTP請求，按理來說可以提高頁面加(jia)載(zai)(zai)的速度。然而在(zai)實際情況中，當腳(jiao)本或者(zhe)樣(yang)式是從外部引入的文件，瀏覽器就有可能(neng)(neng)緩存它們，從而在(zai)以后加(jia)載(zai)(zai)的時候能(neng)(neng)夠直(zhi)接使用緩存，而HTML文檔的大小減(jian)小，從而提高加(jia)載(zai)(zai)速度。
九、減少DNS查找
當我們在瀏覽器的地址欄輸入網址（譬如： www.linux178.com） ，然后回車，回車這一瞬間到看到頁面到底發生了什么呢？
域名解析 --> 發起TCP的(de)3次握(wo)手 --> 建立TCP連接(jie)后發起http請求(qiu) --> 服務器(qi)(qi)響(xiang)應http請求(qiu)，瀏(liu)(liu)覽器(qi)(qi)得(de)到(dao)html代(dai)(dai)碼(ma) --> 瀏(liu)(liu)覽器(qi)(qi)解析html代(dai)(dai)碼(ma)，并請求(qiu)html代(dai)(dai)碼(ma)中的(de)資(zi)源(yuan)（如js、css、圖片(pian)等） --> 瀏(liu)(liu)覽器(qi)(qi)對(dui)頁(ye)面進(jin)行渲染(ran)呈現給用戶
十、精簡JavaScript
精簡
精簡就是從代碼中移除不必要的字符以減少文件大小，降低加載的時間。代碼精簡的時候會移除不必要的空白字符（空格，換行、制表符），這樣整個文件的大小就變小了。
混淆
混(hun)淆是(shi)應用在源代(dai)(dai)碼(ma)上(shang)的另外一種方式，它會移除注釋和空白符(fu)(fu)，同時它還會改(gai)寫代(dai)(dai)碼(ma)。在混(hun)淆的時候，函數和變量名將會被轉換成更短的字符(fu)(fu)串，這時代(dai)(dai)碼(ma)會更加精煉同時難(nan)以閱讀。通常這樣做是(shi)為了增加對代(dai)(dai)碼(ma)進行反向工(gong)程的難(nan)度，這也同時提高了性能(neng)-。
十一、避免重定向
什(shen)么是重(zhong)定(ding)(ding)向？重(zhong)定(ding)(ding)向用于將用戶(hu)從一個(ge)URL重(zhong)新(xin)路由到另一個(ge)URL。
十二、刪除重復腳本
在團隊開發一個項目時，由于不同開發者之間都可能會向頁面中添加頁面或組件，因此可能相同的腳本會被添加多次。
重復的(de)腳(jiao)本會造成不(bu)必(bi)要的(de)HTTP請求（如(ru)果沒有(you)緩存該腳(jiao)本的(de)話(hua)），并且(qie)執行多余的(de)JavaScript浪費(fei)時間，還有(you)可能造成錯誤。
