網頁性能優化的一些方法

來自專欄 web前端心得1 人贊了文章

優化網頁性能，也就是多使用內存和緩存，減少CPU的計算次數，減少網路請求次數。

• 載入資源優化

1. 對靜態資源進行壓縮合併
2. 對靜態資源進行緩存
3. 使用CDN讓資源載入更快
4. css精靈
5. 使用SSR(server side render)後端渲染，數據直接輸出到html中

• 渲染優化

1. css放在html前面，js放後面
2. 懶載入
3. 緩存dom查詢 （減少dom查詢，對dom查詢做緩存）
4. 合併dom操作 （減少dom操作，多個操作盡量合併在一起執行）
5. 函數去抖，函數節流（防止用戶短時間內頻繁操作dom，減少CPU計算）
6. 儘早執行操作（DOMContentLoaded）

window.addEventListener(load,function(){//頁面的全部資源（包括圖片和視頻）載入完成後才會執行})document.addEventListener(DOMContentLoaded,function(){//DOM渲染完即可執行，此時圖片、視頻還可能沒有載入完})

函數節流 throttle 和 去抖 debounce：

var div1=document.getElementById(div1);var timer; div1.addEventListener(keyup,function(){ if(timer){clearTimeout(timer);} timer=setTimeout(function(){ 滿足條件執行函數 },100) })----------------------------------------------------------var lastTime=null; div1.addEventListener(keyup,function(){ var nowtime=new Date(); if(nowtime-lastTime > 自定義時間間隔){ 滿足條件執行函數 lastTime=nowTime; }})

函數節流 throttle 的應用場景？哪些時候我們需要間隔一定時間觸發回調來控制函數調用頻率？（延遲多久觸發，必須超過delay安全期才觸發。類似於坐電梯的過程，只要有人按就延遲上樓，電梯等待的事件相當於delay安全期）

• 元素的拖拽功能（mousemove）
• 射擊遊戲的 mousedown/keydown 事件（單位時間只能發射一顆子彈）
• 計算滑鼠移動的距離（mousemove）
• Canvas 模擬畫板功能（mousemove）
• 搜索聯想（keyup）
• 監聽滾動事件---判斷是否到頁面底部時，自動載入更多資源：給 scroll 加了 debounce 後，只有用戶停止滾動後，才會判斷是否到了頁面底部；如果是 throttle 的話，只要頁面滾動就會間隔一段時間判斷一次

函數去抖 debounce 的應用場景？哪些時候對於連續的事件響應我們只需要執行一次回調？（多久觸發一次）

• 每次 resize/scroll 觸發統計事件
• 文本輸入的驗證（連續輸入文字後發送 AJAX 請求進行驗證，驗證一次就好）

函數節流和函數去抖的核心其實就是限制某一個方法被頻繁觸發，而一個方法之所以會被頻繁觸發，大多數情況下是因為 DOM 事件的監聽回調，而這也是函數節流以及去抖多數情況下的應用場景。

參考：JavaScript 函數節流和函數去抖應用場景辨析 · Issue #20 · hanzichi/underscore-analysis