什麼是效能優化？
就是讓使用者感覺你的網站載入速度很快。。。哈哈哈。
分析
讓我們來分析一下從使用者按下Enter鍵到網站呈現出來經歷了哪些和前端相關的過程。
- 快取 首先看本地是否有快取，如果有符合使用條件的快取則不需要向伺服器傳送請求了。
- DNS查詢
- 建立TCP連結
- 傳送HTTP請求
****** 後臺進行相關處理，前端等待 ****** - 接收快取
- 接受完成，瀏覽器開始解析HTML
- 瀏覽器按行解析HTML，首先解析DOCTYPE，看是HTML還是XML。。。
- 不同的瀏覽器解析完一行，做出的響應不一樣，有的會直接渲染有的則等到完全解析完（包括css）再進行渲染。
- CSS在渲染的時候Chrome會阻塞HTML渲染，IE不會。JS則一定會阻塞HTML的解析。注意有最大同時下載數量。
對策
對DNS ---- 減少DNS查詢次數（儘量少的域名）
對TCP連結
- 連線複用 ---- 在請求頭中設定
xhr.setRequestHeader("Connection", "keep-alive");
大量的連線每次連線關閉都要三次握手四次分手的很顯然會造成效能低下，因此http有一種叫做keepalive connections的機制，它可以在傳輸資料後仍然保持連線，當客戶端需要再次獲取資料時，直接使用剛剛空閒下來的連線而不需要再次握手。
- 因為傳送請求時會帶上cookie，所以可以減小其體積來優化速度，再就是用沒有cook ie的域名（比如CDN）
- 伺服器端設定cache-control，在設定的時間內可以直接不發請求。
- 同時傳送多個請求，請求的數量限制是對於一個域名來說，因此可以適當的增加請求的域名來減少下載的排隊時間。
對接收響應
- 使用Etag，伺服器將接收到的Etag值與伺服器儲存的值做對比，如果相同則返回304，可以儘量少的減少傳輸的體積。
- 在請求頭中設定
Accept-Encoding: gzip, deflate,這樣伺服器傳送給客戶端的就是gzip編碼的response（檔案字尾是.gz）。
其他優化方法
- 將CSS放到
<head>,將js檔案放到<body>的最後面。CSS放前面是因為可以讓頁面一載入出來就可以有樣式，而且有的瀏覽器即使放在最後他也要等到css載入完才顯示頁面。而js放在最後是因為他會阻塞HTMl的渲染。在HTML渲染之前準備好js，我們的js也獲取不到DOM節點，而且沒有js我們的頁面一般也不會有礙觀瞻。 - 懶載入
- 預載入
- 避免空src的圖片
接下來說一下CDN
CDN即Content Delivery Network(內容分發網路)。CDN是構建在網路之上的內容分發網路，依靠部署在各地的邊緣伺服器，通過中心平臺的負載均衡、內容分發、排程等功能模組，使使用者就近獲取所需內容，降低網路擁塞，提高使用者訪問響應速度和命中率。