客戶端性能優化總結
- js腳本後置，css腳本前置
css前置的目的是爲了讓瀏覽器儘快渲染頁面，避免讓用戶長時間盯着白屏等待。
![在這裏插入圖片描述]()
- 減少文件體積
（1）刪除js和css的註釋（生產環境下注釋是沒用的）
（2）壓縮圖片體積（網頁中的圖片能看清就可以，不需要高清，如需要高清使用線上圖片地址） - 壓縮文件（在代碼發佈到生產環境時進行壓縮，或在服務器上進行gzip壓縮，會大大降低網絡傳輸耗時，但不能壓縮圖片）
- 雪碧圖（吧多個小圖片合成一張大圖，減少網絡請求）
- 儘量少用圖片（能用字體圖標icon的就用圖標）
- 合併多個文件（減少網絡請求）
- 避免重繪和重排
當DOM的變化引發了元素幾何屬性的變化，比如改變元素的寬高，元素的位置，導致瀏覽器不得不重新計算元素的幾何屬性，並重新構建渲染樹，這個過程稱爲“重排”。完成重排後，要將重新構建的渲染樹渲染到屏幕上，這個過程就是“重繪”。
（1）img標籤未設置寬高，瀏覽器渲染時不知道圖片的寬高，等圖片下載完之後得到圖片的具體尺寸還要重新再渲染一遍
（2）增加，刪除，顯示，隱藏dom元素 - 避免404請求
爲了讓你的網站能在出現這種錯誤的時候，給用戶相對較好一些的用戶體驗，應該設計自定義的404錯誤頁面。 - 減少dom元素數量
除了頁面加載時去掉不顯示的元素， 能用一個元素實現的，不要用兩個。 - 異步加載組件
異步加載組件就是在定義組件的時候什麼都不做，只有當組件第一次使用的時候才進行加載和渲染。 - 對基礎數據請求緩存
像城市，公司等不常變更的數據，直接緩存在瀏覽器中，就不用每次瀏覽器都向服務器請求了。 - 靜態資源放到CDN
靜態資源使用頻率高，流量佔用大。對於有追求（訪問量稍大）的網站，都會把靜態資源放置到CDN服務器，不佔用業務服務器的網絡帶寬，從而達到更好的用戶體驗。
放在自己web文件夾裏進行加載，如果是你自己在本地訪問的話當然會比cdn更快。
但如果是把頁面發佈到真正的服務器上，通過網站域名訪問就不一定了。除非你的服務器比cdn的服務器更快。 - 避免串行請求（串行請求時間長）
async/await語法糖，由於使用了await導致前一個請求後纔會請求下一個，無形中延長了請求時間，可使用promise.all()讓兩個請求併發執行 - 組件的使用優化
