在同樣的(de)網絡環境下(xià)，兩個(gè)同樣能滿足你的(de)需求的(de)網站，一個(gè)“Duang”的(de)一下(xià)就加載出來(lái)了(le)，一個(gè)糾結了(le)半天才出來(lái)，你會昆山建站公司選擇哪個(gè)？研究表明(míng)：用(yòng)戶最滿意的(de)打開網頁時(shí)間是2-5秒，如果等待超過10秒，99%的(de)用(yòng)戶會關閉這(zhè)個(gè)網頁。也(yě)許這(zhè)樣講，各位還(hái)不會有太多(duō)感觸，接下(xià)來(lái)我列舉一組數據：Google網站訪問速度每慢(màn)400ms就昆山建站公司導緻用(yòng)戶搜索請 求下(xià)降0.59%;Amazon每增加100ms網站延遲将導緻收入下(xià)降1%;雅虎如果有400ms延遲會導緻流量下(xià)降5-9%。網站的(de)加載速度嚴重影(yǐng)響了(le)用(yòng)戶體驗，也(yě)決定了(le)這(zhè)個(gè)網站的(de)生死存亡。昆山建站公司

隻有10%~20昆山建站公司%的(de)最終用(yòng)戶響應時(shí)間花在了(le)下(xià)載HTML文檔上。其餘的(de)80%~90%時(shí)間花在了(le)下(xià)載頁面中的(de)所有組件上。

接下(xià)來(lái)帶您了(le)解如何來(lái)提高(gāo)頁面的(de)加載速度。

一、減少HTTP請求上面說到80%~90%時(shí)間花在了(le)下(xià)載頁面昆山建站公司中的(de)所有組件進行的(de)HTTP請求上。因此，改善響應時(shí)間最簡單的(de)途徑就是減少HTTP請求的(de)數量。

二、使用(yòng)CDN如果應用(yòng)程序web服務器離用(yòng)戶更近，那麽一個(gè)HTTP請求的(de)響應時(shí)間将縮短。另一方面，如果組件w昆山建站公司eb服務器離用(yòng)戶更近，則多(duō)個(gè)HTTP請求的(de)響應時(shí)間将縮短。昆山建站公司基于對(duì)網絡慕課擁堵的(de)測量。例如，CDN可(kě)能選擇網絡階躍數最小的(de)服務器，或者具有最短響應時(shí)間的(de)服務器。

三、添加Expires頭頁面的(de)初次訪問者會進行很多(duō)HTTP請求，但是通(tōng)過使用(yòng)一個(gè)長(cháng)久的(de)Expires昆山建站公司頭，可(kě)以使這(zhè)些組件被緩存，下(xià)次訪問的(de)時(shí)候，就可(kě)以減少不必要的(de)HTPP請求，從而提高(gāo)加載速度。

四、壓縮組件從HTTP1.1開始，Web客戶端可(kě)以通(tōng)過HTTP請求中的(de)Accept-Encoding頭來(lái)表示昆山建站公司對(duì)壓縮的(de)支持Accept-Encoding: gzip,deflate如果Web服務器看到請求中有這(zhè)個(gè)頭，就會使用(yòng)客戶端列出來(lái)的(de)方法中的(de)一種來(lái)進行壓縮。Web服務器通(tōng)過響應中的(de)Content-Enco昆山建站公司ding來(lái)通(tōng)知 Web客戶端。Content-Encoding: gzip代理(lǐ)緩存當浏覽器通(tōng)過代理(lǐ)來(lái)發送請求時(shí)，情況會不一樣。假設針對(duì)某個(gè)URL發送到代理(lǐ)的(de)第一個(gè)請求來(lái)自于一個(gè)不支持gzip的(de)浏覽器。昆山建站公司這(zhè)是代理(lǐ)的(de)第一個(gè)請求，緩存爲空。代理(lǐ)将請求轉發給服務器。此時(shí)響應是未壓縮的(de)，代理(lǐ)緩存同時(shí)發送給浏覽器。現在，假設到達代理(lǐ)的(de)請求是同一個(gè)url，來(lái)自于一個(gè)支持gzip的(de)浏覽器。代理(lǐ)會使用(yòng)緩存中未壓縮的(de)内昆山建站公司容進行響應，從而失去了(le)壓縮的(de)機會。相反，如果第一個(gè)浏覽器支持gzip，第二個(gè)不支持，你們代理(lǐ)緩存中的(de)壓縮版本将會提供給後續的(de)浏覽器，而不管它們是否支持gzip。解決辦法：在web服務器的(de)響應中添加va昆山建站公司ry頭Web服務器可(kě)以告訴代理(lǐ)根據一個(gè)或多(duō)個(gè)請求頭來(lái)改變緩存的(de)響應。因爲壓縮的(de)決定是基于Accept-Encoding請求頭的(de)，因此需要在vary響應頭中包含Accept-Encoding。vary:昆山建站公司 Accept-Encoding

五、将樣式表放在頭部首先說明(míng)一下(xià)，将樣式表放在頭部對(duì)于實際頁面加載的(de)時(shí)間并不能造成太大(dà)影(yǐng)響，但是這(zhè)會減少頁面首屏出現的(de)時(shí)間，使頁面内容逐步呈現，改善用(yòng)戶體驗，防止“白屏昆山建站公司”。我們總是希望頁面能夠盡快(kuài)顯示内容，爲用(yòng)戶提供可(kě)視化(huà)的(de)回饋，這(zhè)對(duì)網速慢(màn)的(de)用(yòng)戶來(lái)說是很重要的(de)。将樣式表放在文檔底部會阻止浏覽器中的(de)内容逐步出現。爲了(le)避免當樣式變化(huà)時(shí)重繪頁面元素，浏覽器會阻塞内容逐步呈昆山建站公司現，造成“白屏”。這(zhè)源自浏覽器的(de)行爲：如果樣式表仍在加載，構建呈現樹就是一種浪費，因爲所有樣式表加載解析完畢之前務虛會之任何東西。

六、将腳本放在底部更樣式表相同，腳本放在底部對(duì)于實際頁面加載的(de)時(shí)間并不昆山建站公司能造成太大(dà)影(yǐng)響，但是這(zhè)會減少頁面首屏出現的(de)時(shí)間，使頁面内容逐步呈現。js的(de)下(xià)載和(hé)執行會阻塞Dom樹的(de)構建（嚴謹地說是中斷了(le)Dom樹的(de)更新），所以script标簽放在首屏範圍内的(de)HTML代碼段裏會截斷首昆山建站公司屏的(de)内容。下(xià)載腳本時(shí)并行下(xià)載是被禁用(yòng)的(de)——即使使用(yòng)了(le)不同的(de)主機名，也(yě)不會啓用(yòng)其他(tā)的(de)下(xià)載。因爲腳本可(kě)能修改頁面内容，因此浏覽器會等待；另外，也(yě)是爲了(le)保證腳本能夠按照(zhào)正确的(de)順序執行，因爲後面的(de)腳本可(kě)能與前昆山建站公司面的(de)腳本存在依賴關系，不按照(zhào)順序執行可(kě)能會産生錯誤。

七、避免CSS表達式

八、使用(yòng)外部的(de)Jav昆山建站公司aScript和(hé)CSS内聯腳本或者樣式可(kě)以減少HTTP請求，按理(lǐ)來(lái)說可(kě)以提高(gāo)頁面加載的(de)速度。然而在實際情況中，當腳本或者樣式是從外部引入的(de)文件，浏覽器就有可(kě)能緩存它們，從而在以後加載的(de)時(shí)候能夠直接使用(yòng)昆山建站公司緩存，而HTML文檔的(de)大(dà)小減小，從而提高(gāo)加載速度。

九、減少DNS查找當我們在浏覽器的(de)地址欄輸入網址（譬如： www.linux178.com） ，然後回車，回車這(zhè)一瞬間到看到頁面到底發生了(le)什(shén)麽呢(ne)？域名昆山建站公司解析 --> 發起TCP的(de)3次握手 --> 建立TCP連接後發起http請求 --> 服務器響應http請求，浏覽器得(de)到html代碼 --> 浏覽器解析html代碼，并請求html代碼中的(de)資源（如js昆山建站公司、css、圖片等） --> 浏覽器對(duì)頁面進行渲染呈現給用(yòng)戶

十、精簡JavaScript精簡精簡就是從代碼中移除不必要的(de)字符以減少文件大(dà)小，降低加載的(de)時(shí)間。代碼精簡的(de)時(shí)候會移除不必要的(de)空白字符（空格，換昆山建站公司行、制表符），這(zhè)樣整個(gè)文件的(de)大(dà)小就變小了(le)。混淆混淆是應用(yòng)在源代碼上的(de)另外一種方式，它會移除注釋和(hé)空白符，同時(shí)它還(hái)會改寫代碼。在混淆的(de)時(shí)候，函數和(hé)變量名将會被轉換成更短的(de)字符串，這(zhè)時(shí)代碼會更加精煉同時(shí)難昆山建站公司

十一、避免重定向什(shén)麽是重定向？重定向用(yòng)于将用(yòng)戶從一個(gè)URL重新路由到另一個(gè)URL。

十二、删除重複腳本在團隊開發一個(gè)項目時(shí)，由于昆山建站公司不同開發者之間都可(kě)能會向頁面中添加頁面或組件，因此可(kě)能相同的(de)腳本會被添加多(duō)次。重複的(de)腳本會造成不必要的(de)HTTP請求（如果沒有緩存該腳本的(de)話(huà)），并且執行多(duō)餘的(de)JavaScript浪費時(shí)間，還(hái)有可(kě)能造成錯昆山建站公司誤。