前端效能優化的那點事
前端效能優化可以分為：伺服器優化、網頁內容優化、cookie優化、CSS優化、JavaScript優化、圖片優化這六個方面
1. 伺服器優化措施
使用CDN內容分發網路-----就近獲取資源
新增expires或者cache-control報文頭（快取角度，參考：https://blog.csdn.net/Qian_mos/article/details/84795426）
配置Etags（快取角度，參考：https://blog.csdn.net/Qian_mos/article/details/84795426）
利用gzip壓縮傳輸檔案----減少檔案大小，縮小傳輸請求時間
使用get完成ajax請求----post請求會向伺服器傳送兩次，一次是請求報頭，一次是正文資料。get只一次，請求效率高。
避免空的圖片src----屬性為空時瀏覽器仍然會載入空內容直至載入失敗，這樣還是會阻塞其他資源的下載程序，會做無效功。需要避免。
2. cookie優化
減少cookie大小----http請求預設會帶上cookie一起傳送至伺服器，減少cookie有利於請求效率提高。
3. 網頁內容優化措施
減少http請求次數----http請求每次需要建立TCP三次握手鍊接，這會比較耗時。
減少DNS查詢次數，使用DNS快取----DNS查詢比較耗時，大約會需要20ms，在這個過程中瀏覽器啥都不會做，若是查詢很多網頁效能就會大打折扣。
快取ajax----減少資源請求時間，可從快取中讀取
延遲載入（懶載入）-----減少http請求次數，緩解前端伺服器的壓力，符合條件時再載入圖片，如當頁面滾動到圖片位置時再載入圖片。
提前載入-----提前載入圖片，網站使用者體驗較好，但若載入資源過多會比較耗費前端伺服器的效能，需要根據實際決策
減少DOM元素數量----構建解析DOM數比較耗時
減少iframe數量-----iframe內的資源載入速度比較慢有可能阻塞父頁面的資源下載和DOM解析
避免404
3. 圖片優化措施
優化影象（比較大的圖片在不同的終端應該使用不同的解析度，不應該進行縮放）
使用CSSspirite----減少請求資源次數
不要在HTML中縮放圖片—減少重繪重排
4. CSS優化措施
將樣式表置於body前----瀏覽器請求到資源後，會構建DOM數，然後利用CSS檔案，構建render渲染數將頁面呈現出來。樣式表置頂有利於渲染數構建
避免使用CSS表示式------CSS表示式使得頁面渲染速度變慢
用代替@[email protected]屬於CSS語法，需要做相容，import使得資源之間有依賴，在資源載入時會以佇列形式進行載入，使得載入速度變慢。
5. JavaScript優化措施
將指令碼置於body底部----避免載入JS檔案時延遲了DOM數的重構和CSS渲染
使用外部JS檔案和CSS
去除重複指令碼
減少JS對DOM的操作-----會引起重排重繪，參考：https://blog.csdn.net/Qian_mos/article/details/85687981
6. JavaScript程式碼優化
慎用with
避免使用eval和Function建構函式-----1>指令碼引擎需要將字串表示 的原始碼轉化為可執行程式碼比較耗時;2>eval函式執行效率低，對於eval中的原始碼編譯器無法優化上下文，只能在執行時編譯解釋程式碼；3>都不利於JS壓縮工具進行壓縮
減少作用域鏈的查詢-----區域性作用域變數查詢較全域性作用域變數速度快
參考資料：http://m.sohu.com/a/239395020_465223?strategyid=00014
https://www.jianshu.com/p/ead7dab72cd6?mType=Group