因?yàn)閯e人的推薦粱哼，所以看了《高性能網(wǎng)站建設(shè)指南》，之前一直想好好做個總結(jié)檩咱，但是拖延癥有點(diǎn)嚴(yán)重揭措，過兩天可能會有一個轉(zhuǎn)正面試，正好好好總結(jié)下刻蚯。

《高性能網(wǎng)站建設(shè)指南》結(jié)合Web2.0以來Web開發(fā)領(lǐng)域的最新形勢和特點(diǎn)绊含，介紹了網(wǎng)站性能問題的現(xiàn)狀、產(chǎn)生的原因炊汹，以及改善或解決性能問題的原則躬充、技術(shù)技巧和最佳實(shí)踐。全面涵蓋了前端性能問題的方方面面讨便。在本書中充甚，作者給出了14條具體的優(yōu)化原則，每一條原則都配以范例佐證伴找，并提供了在線支持废菱。

前端性能的重要性

性能黃金法則：

只有10%_{20%的最終用戶響應(yīng)時(shí)間花在了下載HTML文檔上，其余的80%}90%的時(shí)間花在了下載頁面中的所有組件上衰倦。

所以樊零，如果希望能夠有效地減少頁面的響應(yīng)時(shí)間孽文，進(jìn)而提高網(wǎng)站整體的性能十性，就必須把關(guān)注點(diǎn)放在這80%_{90%中劲适。如果我們可以將后端響應(yīng)時(shí)間縮短一半厢蒜，整體響應(yīng)時(shí)間只能減少5%}10%斑鸦，而如果關(guān)注前端性能，同樣是減少一半響應(yīng)時(shí)間固以，那么整體的響應(yīng)時(shí)間可以減少40%~50%嘱巾，這絕對是一個巨大的提升旬昭。

規(guī)則一：減少HTTP請求

減少了HTTP請求，不管用戶是在第一次訪問還是后續(xù)瀏覽遍略，響應(yīng)時(shí)間都會有顯著的減少骤坐。主要使用的方法有：圖片地圖纽绍，CSS Sprites，內(nèi)聯(lián)圖片和腳本腔彰，樣式表的合并辖佣。
其實(shí)簡單要說就是把能包在一起的東西全部都包在一起就好了搓逾。
1、圖片地圖世蔗，就是把頁面上用到的多個圖片合并成一張圖片，利用map控制顯示的位置顶滩，接著在這張圖片上關(guān)聯(lián)多個URL寸爆，加載的時(shí)候就只要發(fā)送一次HTTP請求獲取這張圖片就行了。
2赁豆、CSS Sprites合并圖片，減少HTTP請求
3析二、內(nèi)聯(lián)圖片节预。瀏覽器不會緩存這種圖像安拟。dataurl節(jié)省了HTTP請求,但是如果這個圖像在網(wǎng)頁多個地方顯示會加大網(wǎng)頁的內(nèi)容，延長下載時(shí)間柱衔。還有一點(diǎn)IE8以下都不支持這種圖像,所以一般不用愉棱。
4、合并腳本和樣式表艾岂，盡量減少js和css的請求數(shù)量

規(guī)則二：使用內(nèi)容發(fā)布網(wǎng)絡(luò)

內(nèi)容發(fā)布網(wǎng)絡(luò)（content delivery network）是一組分布在多個不同地理位置的Web服務(wù)器王浴，用于更加有效地向用戶發(fā)布內(nèi)容梅猿。就是可以使用cdn，租用或者自建都可以钞啸，不僅可以縮短響應(yīng)時(shí)間体斩，還可以緩和Web流量峰值壓力，而且還有提供其他服務(wù)弧烤，自行百度吧蹬敲。
CDN發(fā)布的內(nèi)容主要是靜態(tài)內(nèi)容，如圖片话浇、腳本闹究、樣式表和Flash。主要是靜態(tài)內(nèi)容更容易存儲且具有較少的依賴性赏寇。

規(guī)則三：添加Expires頭

這個規(guī)則主要是針對緩存的价认，使用緩存來減少加載組件的數(shù)量，不是針對首次訪問的優(yōu)化渠退，但是對于多次瀏覽的響應(yīng)時(shí)間的優(yōu)化還是巨大的脐彩。通過使用一個長久的Expires頭，可以使需要緩存的組件被緩存梅誓，這會在后續(xù)的頁面瀏覽中避免不必要的HTTP請求佛南。

Expires: Mon, 15 Apr 2024 20:20:20 GMT

這是一個有效期非常長久的Expires頭嗅回，它告訴瀏覽器該響應(yīng)的有效期持續(xù)到2024年4月15日為止。如果為頁面中的一個圖片返回了這個頭妈拌，瀏覽器在后續(xù)的頁面瀏覽中會使用緩存的圖片蓬蝶。
Expires存在限制，要求服務(wù)器和客戶端的時(shí)間嚴(yán)格同步培愁，過期日期需要檢查，并提供新日期谍咆，所以還有另外一種選擇私股，cache-control使用max-age指令指定用戶被緩存多久，達(dá)到的效果也是一樣的供嚎。
作為一個比較low的前端開發(fā)克滴，雖然可以看懂其中的邏輯优床，但是講真，我之前完全沒有聽過這個詞着帽，看完之后也還不是很懂得怎么把這個付諸實(shí)踐移层，然而這并不影響這個的規(guī)則的有效性幽钢。

規(guī)則四：壓縮組件

這個其實(shí)沒有什么好解釋的，就是啟用Gzip壓縮匪燕，壓縮文檔帽驯、腳本、樣式表利凑，傳輸?shù)拇笮∽冃×耍憫?yīng)時(shí)間自然就減少了牌借。

規(guī)則五：將樣式表放在頂部

規(guī)則六：將腳本放在底部

在下載腳本時(shí)瀏覽器會阻塞并行下載，如果放在上面的話有可能要等到頁面加載完成才能看到界面的整體效果膨报，這對用戶體驗(yàn)是很差的现柠。

規(guī)則七：避免CSS表達(dá)式弛矛。

表達(dá)式的問題在于對其進(jìn)行的求值，它們不只在頁面呈現(xiàn)和大小改變時(shí)求值周循，當(dāng)頁面滾動鱼鼓、甚至用戶鼠標(biāo)在頁面上移過時(shí)都要被求值。所以對頁面的性能影響是很大的迄本。
CSS3提供了calc()函數(shù)课竣，可以用來實(shí)現(xiàn)css的一些求值運(yùn)算。

規(guī)則八：使用外部的JS和CSS

因?yàn)橥獠康腏S和CSS是可以被緩存的公条，而如果是內(nèi)聯(lián)的話就要每次都要加載迂曲。

規(guī)則九：減少DNS查找

方法：通過使用Keep-Alive和較少的域名來減少DNS查找

其他

• 規(guī)則十路捧、精簡JS，相當(dāng)于壓縮队寇，且會除去注釋及空格
• 規(guī)則十一章姓、避免重定向。重定向會延遲整個HTML文檔的傳輸
• 規(guī)則十二零渐、移除重復(fù)腳本
• 規(guī)則十三相恃、配置或移除Etag
• 規(guī)則十四笨觅、使用Ajax可緩存。確保ajax請求遵守性能指導(dǎo)杀糯，尤其應(yīng)具有長久的expires頭