最近在開發(fā)一個(gè)用原生 JavaScript 開發(fā)的項(xiàng)目，說實(shí)話，我平時(shí)開發(fā)的都是使用 Vue/React 進(jìn)行開發(fā)，所以這次使用 JavaScript 原生開發(fā)，就需要自己去做一些性能的優(yōu)化

文檔碎片 DocumentFragment

當(dāng)我們想要批量往頁面上新增 DOM 節(jié)點(diǎn)的時(shí)候，如果循環(huán)遍歷 appendChild 的話會(huì)比較耗性能，所以這個(gè)時(shí)候可以使用 DocumentFragment，這樣的話可以一次性批量新增 DOM 節(jié)點(diǎn)

防抖節(jié)流

防抖節(jié)流屬于是老生常談了，我們很多的監(jiān)聽事件都需要做防抖節(jié)流，這樣能減少監(jiān)聽事件觸發(fā)的次數(shù)，從而減少性能的損耗

防抖

防抖是指在連續(xù)的事件觸發(fā)后，只有最后一次事件觸發(fā)之后的延遲時(shí)間到達(dá)時(shí)才執(zhí)行回調(diào)函數(shù)。如果在延遲時(shí)間內(nèi)再次觸發(fā)事件，則之前的回調(diào)會(huì)被取消

節(jié)流

節(jié)流是指在一定的時(shí)間間隔內(nèi)，只允許函數(shù)執(zhí)行一次，哪怕該時(shí)間間隔內(nèi)事件觸發(fā)了很多次

Web Worker

Web Worker 是一種在后臺(tái)線程中運(yùn)行 JavaScript 的技術(shù)，能夠使網(wǎng)頁在執(zhí)行長時(shí)間運(yùn)行的任務(wù)時(shí)不阻塞主線程，避免頁面卡頓。通過 Web Worker，我們可以將一些繁重的計(jì)算任務(wù)交給獨(dú)立的線程來處理，從而提高網(wǎng)頁的性能和用戶體驗(yàn)

瀏覽器緩存

需要后臺(tái)給前端返回緩存的響應(yīng)頭，這樣讀取文件的時(shí)候就能讀取緩存

異步加載 JavaScript 腳本

當(dāng)你頁面需要加載的 JavaScript 腳本過多的時(shí)候，可以選擇異步加載 JavaScript 腳本，這涉及到了 script 標(biāo)簽的 defer/async

圖片