在構(gòu)建高性能網(wǎng)站時(shí)，JavaScript 可能是你的好朋友，也可能是你的噩夢(mèng)。一些精心選擇的優(yōu)化技術(shù)可以顯著加快你的網(wǎng)站速度，從而帶來(lái)更流暢的用戶體驗(yàn)。

以下 10 條提示深入探討了性能提升實(shí)踐，分解了每條實(shí)踐背后的“原因”和“方式”：

1. 盡量減少 DOM 操作

修改 DOM 就像每次需要一雙襪子時(shí)重新整理整個(gè)衣柜一樣，非常耗時(shí)！每次 DOM 操作都會(huì)觸發(fā)重新渲染，這會(huì)降低你的應(yīng)用速度，尤其是當(dāng)你一次進(jìn)行多項(xiàng)更改時(shí)。

相反，請(qǐng)嘗試批量更新 DOM。

如果你必須操作 DOM，請(qǐng)盡量以盡量減少重排和重繪的方式進(jìn)行，例如，使用 DocumentFragment 或在將其插入 DOM 之前構(gòu)建 UI 結(jié)構(gòu)。你的用戶會(huì)感謝你多花幾秒鐘的注意力。

示例：

const fragment = document.createDocumentFragment();data.forEach(item => {    const element = document.createElement('div');    element.textContent = item.name;    fragment.appendChild(element);});document.body.appendChild(fragment);

2. 防抖和節(jié)流用戶事件

你是否曾看到過(guò)網(wǎng)站在您嘗試滾動(dòng)時(shí)變得非常慢？這可能是因?yàn)槊看文苿?dòng)時(shí)，網(wǎng)站都會(huì)觸發(fā)大量事件偵聽(tīng)器。

防抖和節(jié)流通過(guò)限制函數(shù)調(diào)用的頻率來(lái)防止這種過(guò)載。節(jié)流允許操作以指定的間隔發(fā)生，而防抖則確保函數(shù)僅在上次事件發(fā)生后經(jīng)過(guò)一定時(shí)間后觸發(fā)。

節(jié)流示例：

const throttle = (fn, limit) => {    let lastFunc, lastRan;    return function(...args) {        if (!lastRan) {            fn.apply(this, args);            lastRan = Date.now();        } else {            clearTimeout(lastFunc);            lastFunc = setTimeout(function() {                if ((Date.now() - lastRan) >= limit) {                    fn.apply(this, args);                    lastRan = Date.now();                }            }, limit - (Date.now() - lastRan));        }    };};
// Usage with a scroll eventwindow.addEventListener('scroll', throttle(handleScroll, 200));

3. 延遲加載資源

Web 性能的一個(gè)關(guān)鍵方面是確保用戶僅在需要時(shí)加載他們需要的內(nèi)容。

延遲加載就是針對(duì)圖像、腳本和其他重資源的。

例如，對(duì)屏幕外圖像實(shí)施延遲加載不僅可以加快頁(yè)面加載時(shí)間，還可以改善移動(dòng)數(shù)據(jù)使用情況。

大多數(shù)瀏覽器現(xiàn)在都支持使用 loading="lazy" 實(shí)現(xiàn)圖像的原生延遲加載，但您也可以使用 JavaScript 來(lái)實(shí)現(xiàn)此目的，以獲得更多控制。

示例：

<img src="image.jpg" loading="lazy" alt="Lazy loaded image">

4. 使用 Web Workers 進(jìn)行繁重計(jì)算

JavaScript 通常在主線程上運(yùn)行，如果與繁重計(jì)算有關(guān)，則可能意味著用戶的性能會(huì)很差。

Web Workers 允許您在主線程之外運(yùn)行代碼，讓用戶感覺(jué)繁重的任務(wù)變得輕松很多。

使用 Web Workers 的示例：

const worker = new Worker('worker.js');worker.postMessage('start');
worker.onmessage = (e) => {    console.log(`Worker said: ${e.data}`);};

5. 選擇原生 JavaScript 而非庫(kù)

雖然像 jQuery 這樣的庫(kù)讓 JavaScript 更容易訪問(wèn)，但它們也有自己的負(fù)擔(dān)。如今的原生 JavaScript 擁有庫(kù)曾經(jīng)添加的大部分功能。

這意味著您可以跳過(guò)加載整個(gè)庫(kù)的過(guò)程，只需進(jìn)行基本的 DOM 操作即可。

代碼越少，加載時(shí)間越快 — — 這對(duì)用戶來(lái)說(shuō)是一種勝利。

// Instead of jQuery's $('#myElement').addClass('active')document.getElementById('myElement').classList.add('active');

6. 使用異步和延遲加載腳本

如果處理不當(dāng)，JavaScript 文件可能會(huì)阻止網(wǎng)頁(yè)的呈現(xiàn)。async 和 defer 屬性可以通過(guò)加載 JavaScript 而不占用整個(gè)頁(yè)面來(lái)防止這種情況。

async 在下載腳本后立即執(zhí)行，而 defer 則等到 HTML 文檔完全解析后再執(zhí)行。

<script src="script.js" async></script><script src="script.js" defer></script>

7. 使用動(dòng)態(tài)導(dǎo)入實(shí)現(xiàn)代碼拆分

如果用戶可能根本不需要，為什么要預(yù)先加載所有內(nèi)容？代碼拆分可讓您將代碼拆分為多個(gè)包，僅加載特定頁(yè)面或組件所需的內(nèi)容。

動(dòng)態(tài)導(dǎo)入使此操作更加容易，允許您僅在需要時(shí)有條件地導(dǎo)入模塊。

// Importing a module only when neededif (condition) {    import('./module.js').then(module => {        module.someFunction();    });}

8. 減少對(duì)全局變量的依賴

全局變量就像一個(gè)不斷插話的家庭成員——它們可能會(huì)通過(guò)相互沖突和霸占主范圍而導(dǎo)致意外問(wèn)題。

使用局部變量或?qū)⒐δ芊庋b在函數(shù)內(nèi)以限制全局范圍內(nèi)的混亂，從而減少出錯(cuò)的機(jī)會(huì)并使您的代碼更快。

function scopedFunction() {    let localVariable = 'This stays here';}

9. 優(yōu)化循環(huán)和迭代

如果不進(jìn)行優(yōu)化，循環(huán)很快就會(huì)成為性能瓶頸。例如，如果您反復(fù)訪問(wèn)大型數(shù)組或?qū)ο蟮拈L(zhǎng)度或其他屬性，則循環(huán)速度會(huì)很慢。

通過(guò)緩存長(zhǎng)度并避免在循環(huán)內(nèi)進(jìn)行過(guò)多的 DOM 查找，您可以節(jié)省寶貴的處理時(shí)間。

const array = [1, 2, 3, 4];for (let i = 0, len = array.length; i < len; i++) {    console.log(array[i]);}

10. 利用緩存的力量

Web 瀏覽器帶有一個(gè)稱為緩存的便捷功能。通過(guò)設(shè)置 HTTP 標(biāo)頭以鼓勵(lì)緩存，您可以允許用戶在本地存儲(chǔ)您網(wǎng)站的部分內(nèi)容。

這意味著后續(xù)訪問(wèn)的加載時(shí)間更快，對(duì)服務(wù)器的請(qǐng)求更少。這就像為用戶提供您網(wǎng)站的 VIP 通行證，讓他們無(wú)需排隊(duì)。

Cache-Control: public, max-age=31536000

總結(jié)

以上就是今天這篇文章跟您分享的全部?jī)?nèi)容，希望對(duì)你有所幫助。