規則1——減少HTTP請求
- 合并圖片，合并樣式表，合并腳本
規則2——使用cdn發布靜態資源
規則3——為問價添加長久的expires頭 || 設置cache-control的max-age值
- web服務器通過Expries頭來告訴web客戶端它可以使用一個文件的當前緩存，直到指定的時間為止。expries頭使用一個特定時間，它要求服務器的時間和客戶端的時間嚴格同步，另外過期日期需要經常檢查，一旦到期，則需要重新設置。
- cache-control使用max-age指令指定文件被緩存多久，它以秒為單位定義了一個更新時間。一個長久的max-age頭可以將刷新時間設置為未來10年。（只支持http1.1以上的瀏覽器）
- 最佳實踐：同時指定expries頭和max-age值，如果兩者同時出現，HTTP規范規定max-age指令將重寫expries頭。
規則4——壓縮文件、壓縮腳本樣式表、圖片等
- gzip是目前最流行和最有效的壓縮方法
- 用構建工具gulp壓縮腳本(gulp-uglify)和樣式表(gulp-minify-css) 圖片用tinypng這個網站壓縮，也用構建工具(gulp-imagemin)壓縮圖片，但是壓縮效果不佳
規則5——將樣式表放在文檔頂部
- 使用link標簽的方式將樣式表放在文檔的head中
- 盡量不要使用@import的方式引用樣式表，因為這種方式引用的樣式表會在文件加載完畢后才會下載，也就是導致頁面下載的無序性
規則6——將腳本放在文檔底部
- 腳本會阻塞頁面的呈現，即dom樹的渲染
- 瀏覽器會并行下載文件，HTTP1.1規范建議瀏覽器從每個主機名并行地下載兩個文件，所以如果一個web頁面平均的將其文件分別放在兩個主機名下面，整體響應時間了可以減少約一半。
- 腳本會阻塞并行下載，原因：①腳本可能使用document.write()來修改頁面內容，因此瀏覽器會等待，以確保頁面能夠恰當的布局；②為了保證腳本能夠按照正確的順序執行，如果并行下載多個腳本，就無法保證響應時按照特定的順序到達瀏覽器的，例如，如果后面的腳本比前面的小，就可能先執行，如果這兩個腳本存在依賴關系，就會出錯。
- 除了放在底部，還可以添加defer和async屬性來阻止頁面提前加載，使用這兩個屬性時，腳本中不能調用document.write()方法
- 如果一個script加了defer屬性，即使放在head中，它也會在html頁面解析完畢之后再去執行，也就類似于把這個script放到了頁面底部。js的加載不會阻塞頁面的渲染和資源的加載，同時defer還會按照原來的js順序執行，如果后面有依賴關系也可以放心使用
- async是HTML5中新增的屬性，它的作用是能夠異步的加載和執行腳本，不因為加載腳本而阻塞頁面的加載，不過它是加載完成后就立即執行，如果腳本之間有依賴關系則有可能會發生錯誤
規則7——避免CSS表達式
- 可以使用一次性表達式和事件處理程序來代替CSS表達式
規則8——將javscript和css文件放置在外部文件中
規則9——減少DNS查找
- 可以通過Keep-Alive和較少的域名來減少DNS查找
