15個每位開發(fā)者都應(yīng)該知道的JavaScript性能優(yōu)化技巧

作者：dev 2024-09-02 14:30:43

JavaScript是一種強(qiáng)大的語言，幾乎在每個網(wǎng)頁瀏覽器中都運(yùn)行，為動態(tài)和交互性網(wǎng)站提供動力。然而，隨著其強(qiáng)大功能的發(fā)揮，編寫不當(dāng)?shù)腏avaScript代碼可能會拖慢網(wǎng)站速度，令用戶沮喪，甚至影響搜索引擎排名。

1. 最小化DOM訪問

訪問和操作DOM是JavaScript中最耗費(fèi)資源的操作之一。訪問DOM越頻繁，應(yīng)用程序運(yùn)行的速度就越慢。

如何優(yōu)化

緩存DOM元素：將DOM元素的引用存儲在變量中，以避免重復(fù)查詢DOM。

// 不推薦
for (let i = 0; i < document.querySelectorAll('.item').length; i++) {
  document.querySelectorAll('.item')[i].style.color = 'red';
}

// 推薦
const items = document.querySelectorAll('.item');
for (let i = 0; i < items.length; i++) {
  items[i].style.color = 'red';
}

批量更新DOM：將多個DOM更新分組，以減少重排和重繪的次數(shù)。

2. 使用requestAnimationFrame進(jìn)行動畫處理

與其使用setTimeout或setInterval進(jìn)行動畫處理，不如使用requestAnimationFrame。此方法將動畫與瀏覽器的刷新率同步，從而實(shí)現(xiàn)更流暢的動畫效果。

function animate() {
  // 更新動畫狀態(tài)
  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

為什么有效

更流暢的動畫：將動畫與瀏覽器的刷新周期對齊。
更好的性能：減少不必要的重繪和重排。

3. 對事件處理程序進(jìn)行防抖和節(jié)流

像scroll、resize和mousemove這樣的事件每秒可以觸發(fā)多次，導(dǎo)致性能問題。防抖和節(jié)流技術(shù)可以限制函數(shù)的執(zhí)行次數(shù)。

function debounce(func, wait) {
  let timeout;
  return function (...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), wait);
  };
}

function throttle(func, limit) {
  let lastFunc;
  let lastRan;
  return function (...args) {
    if (!lastRan) {
      func.apply(this, args);
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(function () {
        if (Date.now() - lastRan >= limit) {
          func.apply(this, args);
          lastRan = Date.now();
        }
      }, limit - (Date.now() - lastRan));
    }
  };
}

為什么有效

性能提升：減少昂貴的函數(shù)調(diào)用頻率。
增強(qiáng)用戶體驗：防止在頻繁事件發(fā)生時出現(xiàn)UI卡頓。

4. 優(yōu)化循環(huán)

循環(huán)在編程中至關(guān)重要，但如果使用不當(dāng)，也會成為性能瓶頸。優(yōu)化循環(huán)可以顯著提高應(yīng)用程序的速度。

如何優(yōu)化

緩存數(shù)組長度：避免在每次迭代中重新計算數(shù)組的長度。

// 不推薦
for (let i = 0; i < items.length; i++) {
  process(items[i]);
}

// 推薦
for (let i = 0, len = items.length; i < len; i++) {
  process(items[i]);
}

使用for循環(huán)代替forEach：傳統(tǒng)的for循環(huán)通常比forEach循環(huán)更快。

5. 避免內(nèi)存泄漏

內(nèi)存泄漏發(fā)生在應(yīng)用程序保留了不再需要的內(nèi)存時。這會導(dǎo)致性能下降，最終可能導(dǎo)致應(yīng)用程序崩潰。

如何避免

分離事件監(jiān)聽器：在不再需要時總是移除事件監(jiān)聽器。

const element = document.getElementById('myElement');
function handleClick() {
  console.log('Clicked!');
}
element.addEventListener('click', handleClick);

// 稍后，移除事件監(jiān)聽器
element.removeEventListener('click', handleClick);

避免全局變量：全局變量在應(yīng)用程序的生命周期內(nèi)始終存在，若處理不當(dāng)可能導(dǎo)致內(nèi)存泄漏。

6. 壓縮和最小化代碼

最小化你的JavaScript代碼會去除不必要的字符，如空白和注釋，從而減少文件的大小。壓縮則通過更高效的格式編碼進(jìn)一步減少文件大小。

使用工具

最小化：UglifyJS, Terser
壓縮：Gzip, Brotli

為什么有效

更快的加載時間：較小的文件下載速度更快，提升頁面加載速度。
減少帶寬使用：減少帶寬消耗，尤其對移動用戶非常重要。

7. 延遲加載圖片和資源

延遲加載將非關(guān)鍵資源（如圖片）的加載推遲到需要時。此技術(shù)可以顯著改善網(wǎng)頁的初始加載時間。

<img src="placeholder.jpg" data-src="real-image.jpg" class="lazyload">

<script>
document.addEventListener('DOMContentLoaded', function() {
  const lazyImages = [].slice.call(document.querySelectorAll('.lazyload'));
  if ('IntersectionObserver' in window) {
    const lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          const lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.classList.remove('lazyload');
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });
    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  }
});
</script>

為什么有效

改進(jìn)加載時間：減少初始加載的數(shù)據(jù)量，加快首次頁面加載速度。
更好的用戶體驗：僅在需要時加載圖片，提升用戶性能體驗。

8. 使用Web Workers處理密集任務(wù)

Web Workers允許你在后臺線程中運(yùn)行JavaScript，與主執(zhí)行線程分離。這非常適合處理CPU密集型任務(wù)而不阻塞UI。

// main.js
const worker = new Worker('worker.js');
worker.onmessage = function(e) {
  console.log('Worker said: ', e.data);
};
worker.postMessage('Hello, Worker!');

// worker.js
self.onmessage = function(e) {
  console.log('Main thread said: ', e.data);
  self.postMessage('Hello, Main thread!');
};

為什么有效

提高響應(yīng)速度：將重計算任務(wù)卸載到后臺線程，保持UI響應(yīng)速度。
更好的性能：防止阻塞主線程，從而實(shí)現(xiàn)更流暢的交互。

9. 優(yōu)化CSS和JavaScript的加載方式

你加載CSS和JavaScript的方式會影響頁面的性能。異步加載這些資源或推遲加載可以改善頁面加載時間。

<!-- 異步JavaScript -->
<script src="script.js" async></script>

<!-- 推遲JavaScript加載 -->
<script src="script.js" defer></script>

<!-- 異步CSS -->
<link rel="stylesheet" href="styles.css" media="none" onload="if(media!='all')media='all'">

為什么有效

減少阻塞：防止CSS和JavaScript文件阻塞頁面的渲染。
更快的加載時間：允許其他資源并行加載，加快頁面加載速度。

10. 避免使用eval()

eval()函數(shù)是JavaScript中一個強(qiáng)大但危險的功能。它允許你執(zhí)行字符串形式的JavaScript代碼，但也可能引入安全漏洞和性能問題。

替代方法

使用 JSON.parse() 解析JSON數(shù)據(jù)。
使用 new Function() 動態(tài)創(chuàng)建函數(shù)。

為什么有效

提高安全性：降低注入攻擊的風(fēng)險。
更好的性能：避免了將字符串作為代碼執(zhí)行帶來的性能損耗。

11. 使用高效的數(shù)據(jù)結(jié)構(gòu)

選擇合適的數(shù)據(jù)結(jié)構(gòu)可以顯著影響JavaScript代碼的性能。數(shù)組、對象、集合和映射都有不同的優(yōu)劣勢。

示例

數(shù)組：用于有序集合。
對象：用于鍵值對。
集合：用于唯一值。
映射：用于具有復(fù)雜鍵的鍵值對。

為什么有效

提高效率：減少搜索、插入和刪除操作的時間復(fù)雜度。
更好的性能：優(yōu)化內(nèi)存使用，提升數(shù)據(jù)操作速度。

12. 對代碼進(jìn)行性能分析

對JavaScript代碼進(jìn)行性能分析可以幫助你識別性能瓶頸。Chrome DevTools和Firefox Developer Tools等工具提供了詳細(xì)的代碼執(zhí)行洞察。

如何使用

Chrome DevTools：按下F12，轉(zhuǎn)到“Performance”選項卡，點(diǎn)擊“Record”開始性能分析。
Firefox Developer Tools：操作步驟

類似Chrome，提供“Performance”選項卡進(jìn)行性能分析。

為什么有效

識別瓶頸：幫助你找出緩慢的函數(shù)或內(nèi)存泄漏。
優(yōu)化性能：提供可操作的洞察，以改進(jìn)和優(yōu)化代碼。

13. 使用內(nèi)容分發(fā)網(wǎng)絡(luò)（CDN）

內(nèi)容分發(fā)網(wǎng)絡(luò)（CDN）是一組分布在全球各地的服務(wù)器網(wǎng)絡(luò)。通過CDN提供你的JavaScript文件（和其他資源），你可以減少不同地理區(qū)域用戶訪問你網(wǎng)站的延遲。

<script src="https://cdn.example.com/library.min.js"></script>

為什么有效

更快的加載時間：用戶從地理位置更接近的服務(wù)器下載資源。
減少服務(wù)器負(fù)載：將帶寬消耗從你的服務(wù)器轉(zhuǎn)移到CDN。

14. 優(yōu)化圖像和媒體

圖像和媒體文件通常是網(wǎng)頁上最大的資源，如果沒有適當(dāng)優(yōu)化，它們會顯著拖慢頁面加載時間。使用工具壓縮并為不同設(shè)備正確調(diào)整圖像大小。

如何優(yōu)化

使用WebP格式：WebP相比JPEG和PNG提供了更好的壓縮效果，而不會顯著降低質(zhì)量。
響應(yīng)式圖像：根據(jù)用戶的設(shè)備提供不同尺寸的圖像，使用srcset屬性。

<img src="image-small.jpg" srcset="image-medium.jpg 768w, image-large.jpg 1200w" alt="Description">

為什么有效

改進(jìn)加載時間：較小的圖像加載更快，提升整體頁面性能。
更好的用戶體驗：更快加載的媒體內(nèi)容提升了用戶體驗，尤其是在移動設(shè)備上。

15. 為非關(guān)鍵資源實(shí)現(xiàn)延遲加載

延遲加載不僅適用于圖像——它也可以應(yīng)用于腳本、視頻和其他媒體內(nèi)容。通過僅在需要時加載非必要資源，你可以減少初始加載時間，并提升感知性能。

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const lazyScripts = document.querySelectorAll('script[data-lazy]');
    lazyScripts.forEach(function(script) {
      const newScript = document.createElement('script');
      newScript.src = script.dataset.lazy;
      document.body.appendChild(newScript);
    });
  });
</script>

為什么有效

更快的初始加載：推遲加載非必要的腳本和資源，加快頁面的初始加載。
增強(qiáng)的性能：通過優(yōu)先加載關(guān)鍵內(nèi)容，提升用戶體驗。

JavaScript是一門強(qiáng)大的語言，但如果不加以優(yōu)化，它很容易成為瓶頸。通過應(yīng)用這15個性能優(yōu)化技巧，你可以確保你的JavaScript代碼高效運(yùn)行，從而加快加載時間，提升用戶體驗，并提高搜索引擎排名。

在2024年，隨著網(wǎng)絡(luò)應(yīng)用程序變得越來越復(fù)雜，用戶期望更快的加載時間，優(yōu)化你的JavaScript不再只是一個選擇——它是必需的。今天就開始將這些最佳實(shí)踐納入你的工作流程，看看你的應(yīng)用程序?qū)⑷绾伪憩F(xiàn)得更出色。

責(zé)任編輯：華軒來源： JavaScript 每日一練