近在學習《高性能網站建設指南》這本書，本文算是一個學習筆記，將學到的東西進行整理一下，方便後面查看。
性能黃金法則（Performance Golden Rule)解釋了只有10%~20%的最終用戶響應時間花在接受所請求的用戶HTML文檔上，剩餘的80%~90%時間花在為HTML文檔所引用的所有組件（圖片、腳本、樣式表等）進行的HTTP請求上，最終用戶響應時間花費在頁面組件上
――Steve Sounders
1 文件合併（減少HTTP請求數量）
CSS Sprites
利用css sprites將網站用到的圖片合併成一張圖片，通過background-position、width、height控制背景圖位置來使用某一個圖標，這種方式可以將多個圖片請求縮減為一次，生成css sprites的工具也很多，grunt和gulp中都有相關的插件，CssGaga也不錯。
合併js和css
和精靈圖一樣，合併css和js文件也是減少HTTP請求很重要的方式，對css文件的合併目前來說沒有什麼爭議，但是對於當前js模塊化盛行，將所有js文件合併成一個文件，彷彿是一種倒退。正確的方式是遵守編譯型語言的模式，保持js的模塊化，在生成過程中只對初始請求用到的js文件生成目標文件。
2 使用內容髮佈網絡（減少HTTP請求時間）
HTTP請求時間另一個影響因素是你與網站web服務器所處的距離，顯然距離越遠，請求所需的時間也越久，通過CDN可以大大改善這一點。
CDN是分佈在多個不同地理位置的web服務器，用於更加有效的向用戶發佈內容。 CDN最主要的功能是給終端用戶存放靜態文件，另外也提供下載、安全服務等功能。
3 設置瀏覽器緩存（避免重複HTTP請求）
使用Expire/Cache-control
瀏覽器通過使用緩存可以避免每次都進行重複的請求，HTTP 1.0和HTTP1.1分別有不同的緩存實現方式，Expires(1.0)和Cache-control(1.1)。 Web服務器通過expires告訴客戶端在指定的時間內，都使用該文件的緩存副本，不再向服務端重複發出請求，例如：
Expires: Thu, 01 Dec 2016 16:00:00 GMT （GMT格式）
這個設置意味著截止到2016年12月1日，都可以使用該緩存副本，無需再發出請求。
Expires這種通過截止日期的方式，存在一個限制：要求客戶端和服務端時鐘嚴格同步，而HTTP 1.1引入的Cache-Control通過指定一個以秒為單位的時間指定緩存日期，則不存該限制，例如：
Cache-Control: max-age=31536000
這個設置意味緩存時間為一年，推薦使用Cache-Control，但是在支持HTTP 1.1的情況下，另外要注意的一點：Cache-Control和Expire同時存在時，Cache-Control具有更高的優先級。
配置或移除ETag
使用Expire/Cache-Control可以避免第二次訪問時，使用本地緩存避免重複HTTP請求，提高網站速度。然而，在用戶點擊了瀏覽器刷新或者在expire已過期的情況下，仍然會向服務端發出HTTP GET請求，而此時如果該文件並沒有發生變化，服務端不會返回整個文件而是會返回304 Not Modified狀態碼。
服務端判斷該文件是否發生變化的依據有兩個：Last-Modified（最新修改日期）和ETag（實體標籤）;
ETag（Entity Tags）是在HTTP 1.1引入的，與Last-Modified同時存在時要有更高的優先級。服務端通過對比客戶端發來的ETag（If-None-Match）和當前ETag，若相同返回304 Not Modifed，否則返回整個文件以及200 OK。
ETag存在一個問題：當瀏覽器向一個服務器發送GET請求原始組件，之後又向另一台服務器請求該組件時，ETag是不匹配的，當然，如果你的網站寄宿在一台服務器上不存在這個問題，而現在很多網站使用多台服務器，ETag的存在就大大降低驗證有效性的成功率。
存在這個問題是時的解決辦法是對ETag進行配置，移除服務器innode值只保留修改時間戳和大小作為ETag值，或者直接移除ETag，使用Last-Modified來驗證文件有效性。
4 壓縮組件（減小HTTP請求大小）
通過對HTTP傳輸的文件進行壓縮減小HTTP請求的大小，提高請求速度，GZIP是目前最常用也是最有效的壓縮方式。
然而，並非所有的資源文件都需要壓縮，壓縮的成本包括服務端需要花費CPU週期進行壓縮，而客戶端也需要對壓縮文件進行解壓縮，必須結合自己網站進行權衡。現在絕大多數網站都對其HTML文檔進行壓縮，部分網站選擇對js、css進行壓縮，幾乎沒有網站對圖片、PDF等文件進行GZIP壓縮，原因在於這些文件是已經被壓縮過的，採用HTTP壓縮已經被過壓縮的東西並不能使它更小。事實上，添加標頭，壓縮字典，併校驗響應體實際上使它變得更大，而且還浪費了CPU。
如何對網站開啟GZIP，需要在所使用的web服務器（IIS、Nginx、Apache等）中進行設置。
5 CSS文件放在首部
將CSS文件放在首部和放在尾部，並不影響HTTP請求，因此從請求時間上來講是一致的，然而從用戶體驗的角度，將CSS文件放在首部，會獲得更好的用戶體驗。
原因在於瀏覽器是從上到下依次解析html文檔，將CSS文件置於頭部，頁面會首先對CSS文件發出請求，隨後加載DOM樹並對其進行渲染，頁面會逐步呈現在用戶面前。
而與之相反，如果將CSS文件放置在尾部，頁面加載完整DOM之後請求CSS文件，然後對整個DOM樹渲染並呈現給用戶，從用戶的角度，在css文件沒有請求完成之前，整個頁面是出於白屏狀態的，白屏是瀏覽器的一種行為，David Hyatt對其的解釋是這樣的
在樣式樹沒有完全加載之前，渲染dom樹就是一種浪費，因為在樣式樹加載完成之後會再次渲染，出現FOUC(無樣式內容閃爍)問題。
另外要注意的一點，使用link而不是@import引入css樣式表，使用@import引入的樣式即使寫在首部，也會在文檔最後加載。
6 JS文件放在尾部
HTTP請求是並行的，不同瀏覽器並行下載的數目也不一樣（2、4、或者8個），並行下載提高了HTTP請求的速度。而將JS文件放在首部，不僅會阻塞後面文件的下載而且會阻塞頁面的渲染。
為什麼會這樣呢？原因有兩個：
JS文件中可能存在document.write修改頁面的內容，因此頁面會在腳本執行完成之後才可使渲染。
不同JS文件不管大小如何，可能存在依賴關係，因此必須按照順序進行執行，因此在加載腳本的時候並行下載是禁止的。
所以，最好的方式是講js文件放置在尾部，等頁面所有可視化組件加載完成之後再進行請求，提高用戶體驗。
以上所述是小編給大家介紹的JavaScript關於提高網站性能的幾點建議(一)，希望對大家有所幫助，如果大家想了解更多內容，敬請關注武林網。在下篇文章小編給大家介紹javascript提高網站性能優化的建議(二)