因為別人的推薦，所以看了《高性能網(wǎng)站建設(shè)指南》，之前一直想好好做個總結(jié)，但是拖延癥有點嚴(yán)重，過兩天可能會有一個轉(zhuǎn)正面試，正好好好總結(jié)下。
《高性能網(wǎng)站建設(shè)指南》結(jié)合Web2.0以來Web開發(fā)領(lǐng)域的最新形勢和特點，介紹了網(wǎng)站性能問題的現(xiàn)狀、產(chǎn)生的原因，以及改善或解決性能問題的原則、技術(shù)技巧和最佳實踐。全面涵蓋了前端性能問題的方方面面。在本書中，作者給出了14條具體的優(yōu)化原則，每一條原則都配以范例佐證，并提供了在線支持。
前端性能的重要性
性能黃金法則：
只有10%20%的最終用戶響應(yīng)時間花在了下載HTML文檔上，其余的80%90%的時間花在了下載頁面中的所有組件上。
所以，如果希望能夠有效地減少頁面的響應(yīng)時間，進(jìn)而提高網(wǎng)站整體的性能，就必須把關(guān)注點放在這80%90%中。如果我們可以將后端響應(yīng)時間縮短一半，整體響應(yīng)時間只能減少5%10%，而如果關(guān)注前端性能，同樣是減少一半響應(yīng)時間，那么整體的響應(yīng)時間可以減少40%~50%，這絕對是一個巨大的提升。
規(guī)則一：減少HTTP請求
減少了HTTP請求，不管用戶是在第一次訪問還是后續(xù)瀏覽，響應(yīng)時間都會有顯著的減少。主要使用的方法有：圖片地圖，CSS Sprites，內(nèi)聯(lián)圖片和腳本，樣式表的合并。
其實簡單要說就是把能包在一起的東西全部都包在一起就好了。
1、圖片地圖，就是把頁面上用到的多個圖片合并成一張圖片，利用map控制顯示的位置，接著在這張圖片上關(guān)聯(lián)多個URL，加載的時候就只要發(fā)送一次HTTP請求獲取這張圖片就行了。
2、CSS Sprites合并圖片，減少HTTP請求
3、內(nèi)聯(lián)圖片。瀏覽器不會緩存這種圖像。dataurl節(jié)省了HTTP請求,但是如果這個圖像在網(wǎng)頁多個地方顯示會加大網(wǎng)頁的內(nèi)容，延長下載時間。還有一點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)時間，還可以緩和Web流量峰值壓力，而且還有提供其他服務(wù)，自行百度吧。
CDN發(fā)布的內(nèi)容主要是靜態(tài)內(nèi)容，如圖片、腳本、樣式表和Flash。主要是靜態(tài)內(nèi)容更容易存儲且具有較少的依賴性。
規(guī)則三：添加Expires頭
這個規(guī)則主要是針對緩存的，使用緩存來減少加載組件的數(shù)量，不是針對首次訪問的優(yōu)化，但是對于多次瀏覽的響應(yīng)時間的優(yōu)化還是巨大的。通過使用一個長久的Expires頭，可以使需要緩存的組件被緩存，這會在后續(xù)的頁面瀏覽中避免不必要的HTTP請求。
Expires: Mon, 15 Apr 2024 20:20:20 GMT
這是一個有效期非常長久的Expires頭，它告訴瀏覽器該響應(yīng)的有效期持續(xù)到2024年4月15日為止。如果為頁面中的一個圖片返回了這個頭，瀏覽器在后續(xù)的頁面瀏覽中會使用緩存的圖片。
Expires存在限制，要求服務(wù)器和客戶端的時間嚴(yán)格同步，過期日期需要檢查，并提供新日期，所以還有另外一種選擇，cache-control使用max-age指令指定用戶被緩存多久，達(dá)到的效果也是一樣的。
作為一個比較low的前端開發(fā)，雖然可以看懂其中的邏輯，但是講真，我之前完全沒有聽過這個詞，看完之后也還不是很懂得怎么把這個付諸實踐，然而這并不影響這個的規(guī)則的有效性。
規(guī)則四：壓縮組件
這個其實沒有什么好解釋的，就是啟用Gzip壓縮，壓縮文檔、腳本、樣式表，傳輸?shù)拇笮∽冃×?，響?yīng)時間自然就減少了。
規(guī)則五：將樣式表放在頂部
規(guī)則六：將腳本放在底部
在下載腳本時瀏覽器會阻塞并行下載，如果放在上面的話有可能要等到頁面加載完成才能看到界面的整體效果，這對用戶體驗是很差的。
規(guī)則七：避免CSS表達(dá)式。
表達(dá)式的問題在于對其進(jìn)行的求值，它們不只在頁面呈現(xiàn)和大小改變時求值，當(dāng)頁面滾動、甚至用戶鼠標(biāo)在頁面上移過時都要被求值。所以對頁面的性能影響是很大的。
CSS3提供了calc()函數(shù)，可以用來實現(xiàn)css的一些求值運算。
規(guī)則八：使用外部的JS和CSS
因為外部的JS和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頭
