頁面內容
(1) 減少HTTP請求數
Web前端80%的響應時間花在圖片，樣式，腳本等資源上，最直接的方式是減少頁面所需的資源，但並不現實，所以減少HTTP請求數主要途徑是:
1 合併JS/CSS 文件，服務器CDN自動合併，通過把所有的腳本放在一個文件中來減少請求數
2 使用CSS雪碧圖，合成一個文件 通過background-image和background-position控制
3 行內圖片 Base64編碼
減少頁面HTTP請求數是個起點，這是提升站點返回訪問速度的重要指導規則
(2)減少DNS查詢
用戶輸入URL以後，瀏覽器要進行查詢域名對應服務器的IP地址，一般需要耗費20-120ms
這是個同步行爲，DNS查詢完成之前，瀏覽器無法從服務器下載任何數據
(3)避免重定向
HTTP重定向是通過301和302狀態碼實現的
HTTP/1.1 301 Moved Permanently
Location:http://example.com
Content-Type:text/html
瀏覽器會自定跳轉到Location域指明的URL，重定向的所有信息都在HTTP頭部，而響應體一般是空的。
客戶端收到服務器的重定向響應後，會根據響應頭中的Location的地址在次發送請求，DNS等 還要發生，會影響用戶體驗，尤其是多次重定向，用戶在一段事件內看不到任何內容，只看到瀏覽器進度條一直在刷新
最浪費的重定向經常發生，而且容易被忽略，URL末尾應該添加/ 但是沒有添加。這時候就會被重定向
(4)緩存Ajax請求
最重要的優化方式是緩存響應結果，有尚未過期的Expires或者Cache-Controlde HTTP頭，那麼之前的資源就可以從緩存中讀出，就必須通知瀏覽器，應該使用之前緩存的資源響應，還是去請求一個新的。可以通過給資源的AjaxURL裏添加一個表明用戶資源最後修改時間的時間戳來實現。如果資源從上一次下一之後沒有修改，時間戳不變，就從瀏覽器緩存中讀出
(5)延遲加載
頁面初始加載時哪些內容時絕對必需的?不在答案之列的資源都可以延遲加載,比如:
- 非首屏使用的數據，樣式，腳本，圖片等
- 用戶交互時才顯示的內容
遵循漸進增強歷理念開發的網站:JavaScript用於增強用戶體驗，但沒有JS也能正常工作，完全可以延遲加載JS
(6)預加載
預加載利用瀏覽器空閒時間請求將來要使用的資源，以便用戶訪問下一頁面時更快第響應.
- 無條件預先加載:頁面加載完成後，馬上獲取其他資源。
- 有條件預先加載:根據用戶行爲去預判用戶去向，預載相關資源。
- 有陰謀的預先加載:頁面即將上線新版前預先加載新版內容。網站改版後由於緩存，使用習慣等原因，會有舊版的網站更快更流暢的返回，爲緩解這一問題，在新版上線之前，舊版可以利用空閒提前加載一些新版的資源緩存到客戶端，以便新版正式上線後更快的載入
(7)減少DOM元素數量
JSDOM操作很慢
從以下幾個角度考慮移出不必要的標記:
- 使用語義化的標籤
- 不要使用表格佈局
- 能通過僞元素實現的功能，就沒必要添加額外的元素，比如清除浮動
(8)劃分內容到不同的域名
瀏覽器一般會限制每個域的並行線程(一般爲6個，甚至更少)使用不同的域名可以最大化下載線程，但注意保持2-4個域名，以避免DNS查詢損耗
比如動態內容放到一個域名下，靜態資源放到一個域名下。這樣還可以禁止靜態資源域下的Cookie，減少數據傳輸
(9)儘量減少iframe的使用
優點
- 可以用來加載速度比較慢的第三方資源如廣告
- 可以並行下載腳本
缺點
- 加載代價昂貴，即使是空的頁面
- 阻塞頁面load事件觸發
- 缺乏語義
(10) 避免404錯誤
HTTP請求很昂貴，返回無效的響應完全沒必要，降低用戶體驗毫無用處。尤其糟糕的是外部腳本返回404，不僅阻塞其他資源下載，瀏覽器還把404頁面當做JS解析，消耗更多資源
服務器
1 使用CDN
2 添加Expires或者Cache-Control響應頭
3 啓動Gzip
前端工程師可以想辦法解決網絡傳輸HTTP請求和響應時間，但是終端用戶的寬帶速度，網絡服務商我們是無法控制的，壓縮可以通過減少HTTP響應的大小來縮短響應時間
Gzip壓縮通常可以減少70%的大小
從HTTP/1.1 開始 Web客戶端就有了支持壓縮的Accept-Encoding HTTP請求頭
4 配置Etag
5 Ajax請求使用GET
6 避免圖片src爲空
雖然scr屬性爲空，但是瀏覽器仍然會向服務器發送一個HTTP請求
Cookie
減少Cookie 的大小
Cookie通過HTTP頭，在服務器和瀏覽器間來回傳送，減少Cookie:
- 去除不必要的Cookie
- 儘量壓縮Cookie
- 設置合適的過期時間
- 設置Cookie的domain級別
靜態資源使用無Cookie域名
靜態資源一般無需使用Cookie，可以吧他們放在使使用二級域名或者專門域名的無Cookie服務器上，降低Cookie傳送的造成的流量浪費，提高響應速度
CSS
把樣式表放到中
讓頁面漸進渲染，儘早呈現視覺反饋，給用戶加載速度很快的感覺
不要使用CSS表達式
使用link 替代@important
JavaScript
把腳本放在頁面底部
瀏覽器下載腳本，會阻塞其他資源並行下載，及時是來自不同的域名的資源。
- defer
- async
使用外部的JavaScript和CSS
外部的JavaScript和CSS可以被瀏覽器緩存，在不同頁面間重用，也能降低頁面大小
壓縮JavaScript和CSS
移出重複的腳本
重複的腳本會產生不要的HTTP請求，而且重複解析執行浪費時間和計算資源
減少DOM操作
使用高效的事件處理
減少事件監聽的結點，可以通多事件委託
儘早處理事件，不用等到load以後，在DOMContentLoaded即可進行
圖片
優化圖片
gif格式是比較老的圖片格式，它的色彩效果最低（就是不清楚！！！），如果想要使用gif保存鮮豔圖片會讓你的網站看上去非常可怕。 但是gif有着不可忽視的優點：體積小、有着極好的壓縮效果，支持動畫，並且支持透明效果，雖然這個透明沒有PNG格式圖片支持的強大。。。 動畫選擇gif沒有錯，如果你的圖片只有單調的色彩, 沒有漸變色，例如只有紅藍兩色，那麼選擇gif就再好不過了。
另外，PNG圖片可以說是最適合網絡的圖片了，優點就是 無損壓縮，壓縮比率很高， 可漸變透明， 幾乎具備所有GIF的優點， 缺點是不如JPG格式的顏色色彩豐富， 同樣的圖片體積也比JPG略大，但是PNG圖片應該是網站設計上最爲推廣的，比如Google就是一個很好的例子，它的所有站點中幾乎都是使用的PNG格式， 而且8位的PNG完全可以替代掉GIF
WebP也可以