這段時間 JavaScript 原生開發(fā)做的一些優(yōu)化點
最近在開發(fā)一個用原生 JavaScript 開發(fā)的項目，說實話，我平時開發(fā)的都是使用 Vue/React 進行開發(fā)，所以這次使用 JavaScript 原生開發(fā)，就需要自己去做一些性能的優(yōu)化
文檔碎片 DocumentFragment
當我們想要批量往頁面上新增 DOM 節(jié)點的時候，如果循環(huán)遍歷 appendChild 的話會比較耗性能，所以這個時候可以使用 DocumentFragment，這樣的話可以一次性批量新增 DOM 節(jié)點
防抖節(jié)流
防抖節(jié)流屬于是老生常談了，我們很多的監(jiān)聽事件都需要做防抖節(jié)流，這樣能減少監(jiān)聽事件觸發(fā)的次數(shù)，從而減少性能的損耗
防抖
防抖是指在連續(xù)的事件觸發(fā)后，只有最后一次事件觸發(fā)之后的延遲時間到達時才執(zhí)行回調(diào)函數(shù)。如果在延遲時間內(nèi)再次觸發(fā)事件，則之前的回調(diào)會被取消
節(jié)流
節(jié)流是指在一定的時間間隔內(nèi)，只允許函數(shù)執(zhí)行一次，哪怕該時間間隔內(nèi)事件觸發(fā)了很多次
Web Worker
Web Worker 是一種在后臺線程中運行 JavaScript 的技術，能夠使網(wǎng)頁在執(zhí)行長時間運行的任務時不阻塞主線程，避免頁面卡頓。通過 Web Worker，我們可以將一些繁重的計算任務交給獨立的線程來處理，從而提高網(wǎng)頁的性能和用戶體驗
瀏覽器緩存
需要后臺給前端返回緩存的響應頭，這樣讀取文件的時候就能讀取緩存
異步加載 JavaScript 腳本
當你頁面需要加載的 JavaScript 腳本過多的時候，可以選擇異步加載 JavaScript 腳本，這涉及到了 script 標簽的 defer/async
特性 | defer | async |
加載方式 | 異步加載，但等待HTML解析完成后執(zhí)行 | 異步加載，加載完成后立即執(zhí)行 |
執(zhí)行順序 | 按照在文檔中的順序執(zhí)行 | 執(zhí)行順序不確定，取決于哪個腳本先加載完成 |
適用場景 | 適用于需要訪問DOM的腳本 | 適用于不依賴DOM的獨立腳本 |
是否阻塞HTML | 不阻塞，HTML繼續(xù)解析 | 不阻塞，HTML繼續(xù)解析 |
圖片
