JavaScript前端性能優化

JS性能優化的知識很是龐雜，這裏咱們來介紹幾種經常使用的性能優化方式。

---

1、JS中的前端性能優化原則：

• 多使用內存、緩存等方法
• 減小CPU計算、減小網絡請求

---

2、針對上述兩項原則，咱們能夠從兩個方向入手來進行前端的性能優化。

一、加載資源優化

靜態資源的壓縮合並

咱們能夠利用webpack等打包工具進行資源的合併與壓縮操做，能夠大大減少資源的大小，實現頁面更快的加載。

靜態資源緩存
當瀏覽器發送請求時，能夠檢測該資源的最新版本是否存在於本地，若存在，則不進行從新加載。能夠經過連接名稱控制緩存，當緩存改變的時候，連接名稱纔會改變。

使用CDN讓資源加載更快
CDN能夠對不一樣區域的網絡進行優化。例如用BootCDN進行優化的事例：

SSR後端渲染
使用SSR進行後端渲染，將數據直接輸入到HTML中，而不須要先下載HTML頁面，再執行AJAX獲取服務器端的數據。很早之前的jsp、php、asp都屬於後端渲染，如今Vue、React也提出了這樣的概念，經測試代表，頁面的加載時間能夠大大縮短。

二、渲染優化

CSS放到header中，JS放到body最下面
（1）將CSS放在<header></header>部分：在渲染body部分時，能夠渲染已經規定好樣式。若將CSS樣式放到要渲染的DOM節點以後，就會出現最開始按照默認形式渲染，執行到css樣式又從新渲染。形成樣式跳轉：用戶體驗差；性能差：需渲染兩次。
正確使用方式以下：

若將6行放到9後面，就會出現重複加載現象。

（2）JS會阻塞頁面DOM的加載，若將JS放到body最下面，首先不會阻塞頁面渲染，能夠將頁面所有渲染後再執行js。其次能夠拿到全部的標籤，若是放在html上面可能拿不到標籤，由於尚未被渲染到。
錯誤事例：加載執行9行，阻塞第10行的執行。

注意以該方式進行異步加載時不會阻塞頁面的渲染，由於img標籤已經渲染出來，只是請求的異步加載內容在加載。

圖片的懶加載
所謂懶加載，就是當用戶下拉到該頁面時再加載圖片，而不是當用戶打開頁面就將全部圖片所有加載完畢。

在頁面渲染時，將src傳入一個很小的圖片，真正的圖片地址放在自定義屬性data-lealsrc中，當真正執行時，再將所需圖片加載進來。

減小DOM查詢，對DOM查詢作緩存
DOM操做是一種很是耗費性能的操做，在寫程序時要儘可能減小DOM操做。

經過上面的兩種實現方式對比能夠看出：未緩存DOM查詢時，每次循環都要進行DOM查詢；緩存了DOM查詢時，只需進行一次DOM查詢操做，將數值保存在變量中使用便可。

合併DOM操做

向文檔中插入10個li標籤，原始操做是有十次DOM插入操做，可是咱們利用定義一個片斷（frag），向片斷中插入li，不會觸發DOM操做，最後將該片斷插入到DOM中。只許一次DOM操做，大大提升性能。

時間節流

這個代碼實現的功能是：當連續很快輸入時，不須要每次擡起按鍵都執行函數，只有當按鍵擡起超過100ms才執行操做，能夠減小事件操做，由於在連續操做時會執行不少計算，嚴重影響性能。

用DOMContentLoaded替代window.onload
window.onload:在頁面加載完畢纔會執行操做。
DOMContentLoaded：在頁面渲染完執行操做，此時圖片、視頻等可能還未被加載完。

圖片、視頻等靜態資源大小良莠不齊，加載完成時間又會有很大的差異，但html通常很小，加載時間很短，因此利用DOMContentLoaded能夠顯著提升性能和用戶體驗。