在構建高性能網站時，JavaScript 可能是你的好朋友，也可能是你的噩夢。一些精心選擇的優化技術可以顯著加快你的網站速度，從而帶來更流暢的用戶體驗。

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

1. 盡量減少 DOM 操作

修改 DOM 就像每次需要一雙襪子時重新整理整個衣柜一樣，非常耗時！每次 DOM 操作都會觸發重新渲染，這會降低你的應用速度，尤其是當你一次進行多項更改時。

相反，請嘗試批量更新 DOM。

如果你必須操作 DOM，請盡量以盡量減少重排和重繪的方式進行，例如，使用 DocumentFragment 或在將其插入 DOM 之前構建 UI 結構。你的用戶會感謝你多花幾秒鐘的注意力。

示例：

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

2. 防抖和節流用戶事件

你是否曾看到過網站在您嘗試滾動時變得非常慢？這可能是因為每次您移動時，網站都會觸發大量事件偵聽器。

防抖和節流通過限制函數調用的頻率來防止這種過載。節流允許操作以指定的間隔發生，而防抖則確保函數僅在上次事件發生后經過一定時間后觸發。

節流示例：

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 event
window.addEventListener('scroll', throttle(handleScroll, 200));

3. 延遲加載資源

Web 性能的一個關鍵方面是確保用戶僅在需要時加載他們需要的內容。

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

例如，對屏幕外圖像實施延遲加載不僅可以加快頁面加載時間，還可以改善移動數據使用情況。

大多數瀏覽器現在都支持使用 loading="lazy" 實現圖像的原生延遲加載，但您也可以使用 JavaScript 來實現此目的，以獲得更多控制。

示例：

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

4. 使用 Web Workers 進行繁重計算

JavaScript 通常在主線程上運行，如果與繁重計算有關，則可能意味著用戶的性能會很差。

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

使用 Web Workers 的示例：

const worker = new Worker('worker.js');
worker.postMessage('start');


worker.onmessage = (e) => {
    console.log(`Worker said: ${e.data}`);
};

5. 選擇原生 JavaScript 而非庫

雖然像 jQuery 這樣的庫讓 JavaScript 更容易訪問，但它們也有自己的負擔。如今的原生 JavaScript 擁有庫曾經添加的大部分功能。

這意味著您可以跳過加載整個庫的過程，只需進行基本的 DOM 操作即可。

代碼越少，加載時間越快 — — 這對用戶來說是一種勝利。

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

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

如果處理不當，JavaScript 文件可能會阻止網頁的呈現。async 和 defer 屬性可以通過加載 JavaScript 而不占用整個頁面來防止這種情況。

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

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

7. 使用動態導入實現代碼拆分

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

動態導入使此操作更加容易，允許您僅在需要時有條件地導入模塊。

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

8. 減少對全局變量的依賴

全局變量就像一個不斷插話的家庭成員——它們可能會通過相互沖突和霸占主范圍而導致意外問題。

使用局部變量或將功能封裝在函數內以限制全局范圍內的混亂，從而減少出錯的機會并使您的代碼更快。

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

9. 優化循環和迭代

如果不進行優化，循環很快就會成為性能瓶頸。例如，如果您反復訪問大型數組或對象的長度或其他屬性，則循環速度會很慢。

通過緩存長度并避免在循環內進行過多的 DOM 查找，您可以節省寶貴的處理時間。

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

10. 利用緩存的力量

Web 瀏覽器帶有一個稱為緩存的便捷功能。通過設置 HTTP 標頭以鼓勵緩存，您可以允許用戶在本地存儲您網站的部分內容。

這意味著后續訪問的加載時間更快，對服務器的請求更少。這就像為用戶提供您網站的 VIP 通行證，讓他們無需排隊。

Cache-Control: public, max-age=31536000

總結

以上就是今天這篇文章跟您分享的全部內容，希望對你有所幫助。