在同樣的(de)網絡環境下(xià)，兩個(gè)同∞ 樣能(néng)滿足你(nǐ)的(de)需求的(de)網站(→↑zhàn)，一(yī)個(gè)“Duang”的(de)一(yī)下(§₽≈xià)就(jiù)加載出來(lái)了(le)，一(yī)個(gè <)糾結了(le)半天才出來(lái)，你(nǐ)會(¥∏♠ huì)昆山(shān)建站(zhàn)公司選擇哪個(gè)？研究表明(míng)：用(yòng)戶最滿意的¶₽(de)打開(kāi)網頁時(shí)間(jiān)是(shì α)2-5秒(miǎo)，如(rú)果等待超過1£∏ 0秒(miǎo)，99%的(de)用(yòng)戶會(huì)關閉這(zh→‍♠ è)個(gè)網頁。也(yě)許這(zhè÷π<)樣講，各位還(hái)不(bù)會(huì)有(yǒu)太多(duō​≥σ)感觸，接下(xià)來(lái)我列舉一(yī)組數(shù)據：Googl♠ελe網站(zhàn)訪問(wèn)速度每慢(màn)400ms就(jiù)昆山(shān)建站(zhàn)公司導緻用(yòng)戶搜索請(qǐng) 求下(x ×ià)降0.59%;Amazon每增加100ms網站(zhàn)延遲将導緻收€ γ↑入下(xià)降1%;雅虎如(rú)果有(yǒu)400ms延遲會(h¶β‌uì)導緻流量下(xià)降5-9%。網站(zhàn)的(de)加載速度嚴重影α©(yǐng)響了(le)用(yòng)戶體(t§↑ǐ)驗，也(yě)決定了(le)這(zhè)個(gè)網站(zhàn)的(dα✔ ™e)生(shēng)死存亡。昆山(shān)建站(zhàn)公司

隻有(yǒu)10%~20昆山(shān)建站(zhàn)公司%的(de)最終用(yòng)戶響應時(shí)間(jiān)花"γ(huā)在了(le)下(xià)載HTML文(wén)檔上(shàn↑™g)。其餘的(de)80%~90%時(shí)間(jiān)花§σ(huā)在了(le)下(xià)載頁面中的(de)所有(yǒu)組件(®↔£jiàn)上(shàng)。

接下(xià)來(lái)帶您了(le)解βφ$←如(rú)何來(lái)提高(gāo)頁面的(de σ®™)加載速度。

一(yī)、減少(shǎo)HTTP請(qǐng)求上(shàng)面說(shuō)到(dào)80%~≥∞ 90%時(shí)間(jiān)花(huā)在了(≤×le)下(xià)載頁面昆山(shān)建站(zhàn)公司中的(de)所有(yǒu)組件(jiàn)進行(xíng)的(de)HTT™★$P請(qǐng)求上(shàng)。因此，改善響應時(shí)間(jiδ≠βān)最簡單的(de)途徑就(jiù)是(shì)減少(shǎo)HTλΩTP請(qǐng)求的(de)數(shù)量。

二、使用(yòng)CDN如(rú)果應用(yòng)程序web服務σ<±♥器(qì)離(lí)用(yòng)戶更近(jìn)，₽Ω∑那(nà)麽一(yī)個(gè)HTTP請(qǐng)求α∞的(de)響應時(shí)間(jiān)将縮短(d ÷®§uǎn)。另一(yī)方面，如(rú)果組件(jiàn)w昆山(shān)建站(zhàn)公司eb服務器(qì)離(lí)用(yòng£φ©)戶更近(jìn)，則多(duō)個(gè)HTTP請(qǐnδ↕g)求的(de)響應時(shí)間(jiān)将縮短(duǎn)。昆山(shān)建站(zhàn)公司基于對(duì)網絡慕課擁堵的(de)測量。例↑< 如(rú)，CDN可(kě)能(néng)選擇網絡階躍數(shù)最小(x→≠iǎo)的(de)服務器(qì)，或者具有(yǒu)最短(™↔duǎn)響應時(shí)間(jiān)的(de)服務器(qì)。

三、添加Expires頭頁面的(de)初次訪問(wèn)者會(huì)進行(xín∏₩¥g)很(hěn)多(duō)HTTP請(qǐng)求'ε，但(dàn)是(shì)通(tōng)過使用(yòng§ )一(yī)個(gè)長(cháng)久的(de)Expires昆山(shān)建站(zhàn)公司頭，可(kě)以使這(zhè)些(xiē)↑‍≈&組件(jiàn)被緩存，下(xià)次訪問(wèn)的(de)時♦∏☆(shí)候，就(jiù)可(kě)以減少(shǎo)不(b₽φù)必要(yào)的(de)HTPP請(qǐng)求，從"☆'≥(cóng)而提高(gāo)加載速度。

四、壓縮組件(jiàn)從(cóng)HTTP1.1開(kāi)始，Web客戶端♠÷✔可(kě)以通(tōng)過HTTP請(qǐng)求中的(deβ♥)Accept-Encoding頭來(lái)表示昆山(shān)建站(zhàn)公司對(duì)壓縮的(de)支持Accept-Encoding: gzip₹‍¶,deflate如(rú)果Web服務器(qì)看(kàn)到(dào)請(qǐng)求中有σ±π(yǒu)這(zhè)個(gè)頭，就(jiù)會(huì)使用(yòng)☆&₹客戶端列出來(lái)的(de)方法中的(Ωδde)一(yī)種來(lái)進行(xíng)壓縮。Web服務器(qì)通( π∞tōng)過響應中的(de)Content-Enco昆山(shān)建站(zhàn)公司ding來(lái)通(tōng)知(zh✔♣π®ī) Web客戶端。Content-Encoding: gzip代理(lǐ)緩存當浏覽器(qì)通(tōng)過代理(lǐ)來(láδ ∏∏i)發送請(qǐng)求時(shí)，情況會(huì)不(↕<bù)一(yī)樣。假設針對(duì)某個(gè)URL發送到(dào)∑δ→↕代理(lǐ)的(de)第一(yī)個(gè)請(qǐng)求來(lái)自±α‍(zì)于一(yī)個(gè)不(bù)支持gzip的(de)↑§Ωγ浏覽器(qì)。昆山(shān)建站(zhàn)公司這(zhè)是(shì)代理(lǐ)的(de)第一(yī)個(gè)請(qǐn←₩>"g)求，緩存為(wèi)空(kōng)。代理(lǐ)↔•¥将請(qǐng)求轉發給服務器(qì)。此時™≥(shí)響應是(shì)未壓縮的(de)，代理(lǐ)緩存同時(s≤© ‍hí)發送給浏覽器(qì)。現(xiàn)在，假設到(dào)達代理(lǐ)的→π↔(de)請(qǐng)求是(shì)同一(yī)個(gè)url，來™>(lái)自(zì)于一(yī)個(gè)支持gzip的(de)浏覽≤∞↕ 器(qì)。代理(lǐ)會(huì)使用(yòn≤α‌g)緩存中未壓縮的(de)內(nèi)昆山(shān)建站(zhàn)公司容進行(xíng)響應，從(cóng)而失去(qù∑©)了(le)壓縮的(de)機(jī)會(huì)。相(xi☆¥àng)反，如(rú)果第一(yī)個(gè)浏覽器α•<(qì)支持gzip，第二個(gè)不(bù)∏£$​支持，你(nǐ)們代理(lǐ)緩存中的(de)壓縮版本×≤→将會(huì)提供給後續的(de)浏覽器(qì)，而不(bù)管€≈​它們是(shì)否支持gzip。解決辦法：在web服務器(qì)的(de)響應中添加v®ε£≥a昆山(shān)建站(zhàn)公司ry頭Web服務器(qì)可(kě)以告訴代理(l α₹ ǐ)根據一(yī)個(gè)或多(duō)個(gè)請(qǐng)求頭來↓< (lái)改變緩存的(de)響應。因為(wèi)壓縮的(de)決定是(shì)₩<基于Accept-Encoding請(qǐng)求頭的(de)，因此需σ∑♠要(yào)在vary響應頭中包含Accept-EncoΩ₽ding。vary:昆山(shān)建站(zhàn)公司 Accept-Encoding

五、将樣式表放(fàng)在頭部首先說(shuō)明(míng)一(yī)下(xi×¥ε&à)，将樣式表放(fàng)在頭部對(duì)于實際頁面★'加載的(de)時(shí)間(jiān)并不(bù)‍λ$‍能(néng)造成太大(dà)影(yǐng)響，但(♦★¥ dàn)是(shì)這(zhè)會(huì)減少(shǎo)‌§‍<頁面首屏出現(xiàn)的(de)時(shí)間(jiān)，使頁面內>♠>(nèi)容逐步呈現(xiàn)，改善用(yòng ε←)戶體(tǐ)驗，防止“白(bái)屏昆山(shān)建站(zhàn)公司”。我們總是(shì)希望頁面能(néng)夠盡快(kuài)顯示δ ™內(nèi)容，為(wèi)用(yòng)戶提≥™供可(kě)視(shì)化(huà)的(de)回饋，這(zhè)對(d​✔βuì)網速慢(màn)的(de)用(yòn≠>g)戶來(lái)說(shuō)是(shì)很(hěn)重要(y₹₩‌<ào)的(de)。将樣式表放(fàng)在文(wén)檔底部會(huì)阻止浏覽器(qì₩®≤α)中的(de)內(nèi)容逐步出現(xiàn)。為(wè‍ε≥i)了(le)避免當樣式變化(huà)時(shí)重繪頁面元素，浏覽器•♦"≠(qì)會(huì)阻塞內(nèi)容逐步呈昆山(shān)建站(zhàn)公司現(xiàn)，造成“白(bái)屏”。這(zhè)源自(z•∑€☆ì)浏覽器(qì)的(de)行(xíng)為(wèγ↓ i)：如(rú)果樣式表仍在加載，構建呈現(xβ✔¥iàn)樹(shù)就(jiù)是(shì)一₽→'<(yī)種浪費(fèi)，因為(wèi)所有(yǒu)樣式表加載♠≥≤解析完畢之前務虛會(huì)之任何東(dōng)西(xī)。

六、将腳本放(fàng)在底部更樣式表相(xiàng)同，腳本放(fàng)在底部對(duì)★γ×≠于實際頁面加載的(de)時(shí)間(jiān)并不(bù)昆山(shān)建站(zhàn)公司能(néng)造成太大(dà)影(yǐng)響，但(dà  n)是(shì)這(zhè)會(huì)減少♣>→•(shǎo)頁面首屏出現(xiàn)的(σσ 'de)時(shí)間(jiān)，使頁面≤>∏↑內(nèi)容逐步呈現(xiàn)。js的(de)下(xià)載和(hé)執行(xíng)會↕®♥(huì)阻塞Dom樹(shù)的(de)構建（嚴謹☆  地(dì)說(shuō)是(shì)中斷了(le)Dom樹(shù)δ ₽♠的(de)更新），所以script标簽放(fàng)∞€¥÷在首屏範圍內(nèi)的(de)HTML代碼段裡(lǐ)會(huì)截斷首π×昆山(shān)建站(zhàn)公司屏的(de)內(nèi)容。下(xià)載腳本時(shí)并行(xíng)下(xià)載是(s↑<λ‍hì)被禁用(yòng)的(de)——即使使用(yòng)了(le)不×→♦(bù)同的(de)主機(jī)名，也(yě)不(bù)會(huì​π)啓用(yòng)其他(tā)的(de)下(xià)載。因為(wè'≠i)腳本可(kě)能(néng)修改頁面內(nèi)容，因此浏覽器(qì)φ £會(huì)等待；另外(wài)，也(y×♠ě)是(shì)為(wèi)了(le)保證腳本能(néng)夠按照‌≥≤(zhào)正确的(de)順序執行(xíng)，因為(wèi)後面的‍∞(de)腳本可(kě)能(néng)與前昆山(shān)建站(zhàn)公司面的(de)腳本存在依賴關系，不(bù)按照(zhào)順δ≈↕序執行(xíng)可(kě)能(néng)會(huì)産生(shē§©↓ ng)錯(cuò)誤。

七、避免CSS表達式

八、使用(yòng)外(wài)部的(de)Jav昆山(shān)建站(zhàn)公司aScript和(hé)CSS內(nèi)聯腳本或者樣式可(kě)以減少(shǎo)HTTP請(qǐn‍♥≠φg)求，按理(lǐ)來(lái)說(shuō)可(kě)以提高(gāo)頁π$面加載的(de)速度。然而在實際情況中，當腳本或者樣式是(÷&shì)從(cóng)外(wài)部引入的(de)文(wén£™)件(jiàn)，浏覽器(qì)就(ji✘¥≥ù)有(yǒu)可(kě)能(néng)緩存它們，從(cóng)而¶¥在以後加載的(de)時(shí)候能(néng)夠↕∑∑直接使用(yòng)昆山(shān)建站(zhàn)公司緩存，而HTML文(wén)檔的(de)大(dà)小(x​γ÷iǎo)減小(xiǎo)，從(cóng)而提高(gāo)加載速度γα₹。

九、減少(shǎo)DNS查找當我們在浏覽器(qì)的(de)地(dì)址欄輸入網址（譬如(rú™®)： www.linux178.com） ，♣≠•然後回車(chē)，回車(chē)這(zhè)一(yī)瞬→λ間(jiān)到(dào)看(kàn)到(dào)頁∞∏™面到(dào)底發生(shēng)了(le)什(shén)麽呢(ne←π←♥)？域名昆山(shān)建站(zhàn)公司解析 --> 發起TCP的(§↑¶±de)3次握手 --> 建立TCP​¶$連接後發起http請(qǐng)求&nbs←'≠☆p;--> 服務器(qì)響應htt♠§¶p請(qǐng)求，浏覽器(qì)得(d∏↑e)到(dào)html代碼 -->&Ω≈nbsp;浏覽器(qì)解析html代碼，并請♥♣(qǐng)求html代碼中的(de)資源（如(rú)js昆山(shān)建站(zhàn)公司、css、圖片等） -->>•‍σ; 浏覽器(qì)對(duì)頁面進行​>ε(xíng)渲染呈現(xiàn)給用(yòng)戶€↕↑

十、精簡JavaScript精簡精簡就(jiù)是(shì)從(cóng)代碼中移除不(b✘♥ù)必要(yào)的(de)字符以減少(s"±↑hǎo)文(wén)件(jiàn)大(dà)小(xiǎo)，降低(dī'©)加載的(de)時(shí)間(jiān≠±"‌)。代碼精簡的(de)時(shí)候會(huì)移除不(b$♠←ù)必要(yào)的(de)空(kōng)白(bái)字符（空(kōng)格Ω©∞，換昆山(shān)建站(zhàn)公司行(xíng)、制(zhì)表符），這(zhè)樣整個(gè‌÷)文(wén)件(jiàn)的(de)大(dà)小(xi"λ≤™ǎo)就(jiù)變小(xiǎo)了(le)。混淆混淆是(shì)應用(yòng)在源代碼上(shàng)的•♠ε(de)另外(wài)一(yī)種方式，它會(hu★→ì)移除注釋和(hé)空(kōng)白(bái)符，<• ‌同時(shí)它還(hái)會(huì)改↔♥✘寫代碼。在混淆的(de)時(shí)候，函數≈<π∞(shù)和(hé)變量名将會(huì)被轉換成更短(duǎn₹‍ε¥)的(de)字符串，這(zhè)時(shí)代碼會(huì)更加精煉同時≠ (shí)難昆山(shān)建站(zhàn)公司

十一(yī)、避免重定向什(shén)麽是(shì)重定向？重定向用(yòng)于将用(yòng→ ¶)戶從(cóng)一(yī)個(gè)URL重新路(‍•lù)由到(dào)另一(yī)個(gè)URL。

十二、删除重複腳本在團隊開(kāi)發一(yī)個(gè)項目時(s§♣'≈hí)，由于昆山(shān)建站(zhàn)公司不(bù)同開(kāi)發者之間(jiān)α 都(dōu)可(kě)能(néng)會(huì)向頁面中添加∏₹ 頁面或組件(jiàn)，因此可(kě)能('¥♠∑néng)相(xiàng)同的(de)腳本會(≈δ¥huì)被添加多(duō)次。重複的(de)腳本會(huì)造成不(bù)必要(yào)的₩₹(de)HTTP請(qǐng)求（如(rú)果沒有(yǒ★ u)緩存該腳本的(de)話(huà)），并且執行(xíng)多(duō)餘♦€的(de)JavaScript浪費(fèi)時(shí)間(j✔®‍iān)，還(hái)有(yǒu)可(kě)∏☆" 能(néng)造成錯(cuò)昆山(shān)建站(zhàn)公司誤。