性能優化總論
1.性能優化的必要性
性能優化一直是我們在討論的一個話題，也是很重要的知識點，當項目功能越來越多，模塊規模一步步擴大，就會發生一系列的性能問題，比如說vue首屏加載會變得非常慢，編譯會延遲，打包也要等半天。
必須明確性能優化的重要性，任何一個項目的生命歷程都會走向性能優化這個階段
2.性能優化的誤區
我們經常會犯錯誤的一個地方是，混淆了性能優化與執行效率的概念。
比如：
1.while 循環快還是 for 循環快？
2.|0 是不是比 Math.floor 性能好？
3.if else 與三元運算符哪個更快？
很多人會認爲以上三個問題就是性能優化的範疇了，會去糾結這些問題。然而實際上，這三個問題與性能優化毫無關係，不過是幾個執行效率的問題罷了，糾結也無益。
3.什麼纔是前端的性能優化
總結來說，就是這三個方面
1.頁面加載性能（加載的時間）
2.動畫與操作性能（是否流暢無卡頓）
3.內存、電量消耗（內存佔用，耗電量）
針對以上方面做性能優化
1.頁面加載性能（加載的時間）
a.減少請求數
(1) js,css,打包到html，併爲一個請求
(2) 精靈圖，多個小圖併爲一個圖片，只請求一次
(3) 小圖片用字體圖標代替，或者使用data-url
(4) js控制圖片懶加載，異步加載，頁面初始化的時候避免一次請求多張圖片
b.減少傳輸體積
(1) js庫存放在靜態cdn上，項目執行的時候，一個鏈接拿過來就行
(2) 壓縮策略，大圖壓縮(tinypng)，代碼壓縮(webpack,Gzip)
(3) 優雅降級，根據用戶網絡狀況以及機型控制圖片清晰度
(4) 清晰度低的圖片，銳化處理，提高用戶體驗
c.緩存策略
(1) 圖片緩存
(2) 數據緩存，常用的就是地址選項，省市區，不用重複請求，緩存至用戶本地即可
2.動畫與操作性能
a.避免操作過多dom元素
可採用數據驅動，操作虛擬dom，通過diff算法，最後比較轉換成真實dom
b.避免去操作元素的top，left等位置的值
如果去改變元素的top與left等值，會導致dom迴流，可以採用dom重繪
dom迴流：當頁面中的html結構發生改變（增加、刪除元素、位置發生改變），瀏覽器都需要重新計算一邊新的DOM結構，重新對當前的頁面進行渲染。迴流非常消耗性能，特別是性能有限的移動端。
dom重繪: 當某個元素的部分樣式發生了改變（如背景顏色、字體顏色、位置(使用transform的情況下)發生了改變），瀏覽器重新渲染當前元素即可。迴流比重繪耗能耗時，所以在優化程序系統的時候，我們儘量要減少瀏覽器的DOM迴流操作。
平時操作元素的top值，left的值可以用transform裏的translate代替
3.內存、電量消耗
a.作用域問題 (內存相關)
(1) 避免定義無意義變量，每去var定一個值或者定一個對象都是佔內存的
(2) 禁止濫用閉包，js垃圾回收機制不會回收閉包裏的變量，它們將會常駐內存。
b.循環 (性能相關)
前端應避免大規模數據的比對與循環，可分開處理或交由後臺先處理好，否則也會導致卡頓
c.電量消耗 (主要是前端做遊戲的時候)
(1) 優化美術資源，比如合理規劃圖集，約定好模型的最大三角形面數，制定合理的粒子效果規範。這個可以說是遊戲優化中最重要的一個，因此，技術美術在遊戲開發中作用巨大。
(2) 簡化或者優化着色器（shader），如在遊戲開始前就對Shader進行編譯和加載。
(3) 使用Batching，儘量減少DrawCall
Batching : 批處理動態或靜態物體(批量處理，優化電量消耗)
DrawCall : CPU調用圖形編程接口,比如DirectX或OpenGL,來命令GPU進行渲染的操作(描繪次數越多，耗電量越大)
以上是本人的總結與經驗，如有不對，敬請指正。
如對你有幫助，可以轉發評論，轉發請註明作者及出處。