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

文檔碎片 DocumentFragment

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

防抖節(jié)流

防抖節(jié)流屬于是老生常談了，我們很多的監(jiān)聽(tīng)事件都需要做防抖節(jié)流，這樣能減少監(jiān)聽(tīng)事件觸發(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)線(xiàn)程中運(yùn)行 JavaScript 的技術(shù)，能夠使網(wǎng)頁(yè)在執(zhí)行長(zhǎng)時(shí)間運(yùn)行的任務(wù)時(shí)不阻塞主線(xiàn)程，避免頁(yè)面卡頓。通過(guò) Web Worker，我們可以將一些繁重的計(jì)算任務(wù)交給獨(dú)立的線(xiàn)程來(lái)處理，從而提高網(wǎng)頁(yè)的性能和用戶(hù)體驗(yàn)

瀏覽器緩存

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

異步加載 JavaScript 腳本

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

圖片