本文翻譯自 John Au-Yeung 的 JavaScript Best Practices — Performance ，請參考原文閱讀
像任何其他編程語言一樣，JavaScript 也有自己的最佳實踐列表，以使程序更易於閱讀和維護。JavaScript 有很多棘手的部分，因此應避免某些降低代碼質量的做法。通過遵循最佳實踐，我們可以創建優雅且易於管理的代碼，讓任何人都可以輕鬆使用。
在本文中，我們將探討提高應用程序性能的方法，包括將數據緩存在變量中，使用最快的方法循環遍歷變量，減少 DOM 訪問和頁面上的元素，並推遲腳本加載。
減少對變量和屬性的訪問
我們應該減少訪問應用程序中變量和對象屬性的次數。
這是因為每次執行此操作時，CPU 都必須一次又一次地訪問內存中的項目以計算其結果。
因此，我們應該儘可能少地這樣做。
例如，對於一個循環，不應像下面這樣：
<code>for(let i = 0; i < arr.length; i++) {
}
複製代碼/<code> 而應該寫成：
<code>let length = arr.length;
for (let i = 0; i < length; i++) {
}
複製代碼/<code>
這樣，arr.length 在我們的循環中僅被引用一次，而不是在每次迭代中都對其進行訪問。
循環遍歷變量的最快方法
在 JavaScript 中，有多種方法遍歷可迭代對象。一種是老的 for 循環，其他方法包括 for...of 循環，數組的 forEach 方法。map 和 filter 操作也會遍歷數組。還有 while 循環。
在運行循環的所有方式中，for 循環是最快的方式，無論是否像上面一樣緩存 length，for 循環都是如此。但是，緩存 length 有時會使循環執行得更好。
一些瀏覽器引擎在不緩存 length 屬性的情況下優化了 for 循環。
遞減索引的 whil e循環比 for 循環慢大約 1.5 倍。
使用 forEach 循環的速度比 for 循環慢 10 倍，因此最好避免使用它，尤其是對於大型數組。
我們可以在這裡看到結果。
減少 DOM 訪問
訪問 DOM 是一項昂貴的操作，因為瀏覽器必須從網頁中獲取元素，然後從中創建一個對象並返回它。
為了減少 DOM 訪問，如果我們需要多次操作 DOM Node 對象，則應該將其賦值給變量。
例如，如果我們有以下 HTML，並且希望在幾秒鐘後為其設置一些文本：
<code>
複製代碼/<code>
我們可以編寫以下代碼來做到這一點：
<code>const setText = (element, textContent) => {
return new Promise((resolve) => {
setTimeout(() => {
element.textContent = textContent;
resolve();
}, 3000)
})
}
(async () => {
const foo = document.querySelector('#foo');
await setText(foo, 'foo');
await setText(foo, 'bar');
await setText(foo, 'baz');
})();
複製代碼/<code>在上面的代碼中，我們有一個函數來獲取我們要操作的 HTML 元素以及要設置的文本內容。
setText 函數返回一個 promise，並將在 3 秒後將文本設置為給定元素。
然後我們有一個 async 函數來設置文本 3 次。核心部分是我們在每次調用時都將元素的引用傳遞給它。這樣，我們不必每次從網頁上獲取元素，這是一項昂貴的操作。
減少DOM大小
DOM 樹渲染起來很慢。因此，我們必須減小樹的大小。
這個別無選擇，只能使我們的網頁儘可能簡單。
DOM 較小時，由於查找內容較少，因此可以使用 querySelector，getElementById 或 getElementsByTagName 之類的方法更快地搜索元素。
此外，由於加載的內容更少，因此頁面渲染性能也會提高。對於手機和平板電腦等速度較慢的設備尤其如此。
每次我們聲明變量時，瀏覽器都必須為變量分配存儲空間。因此，為了減少內存使用，我們不應該聲明太多變量。
例如，如果我們有以下 HTML：
<code>
複製代碼/<code>
我們想設置 p 元素的文本內容，我們不應該這樣寫：
<code>const foo = document.querySelector('#foo');
const p = foo.querySelector('p');
p.textContent = 'foo';
複製代碼/<code>因為我們這裡有 2 個變量，這意味著我們的計算機必須額外存儲 2 個 JavaScript 變量的值。
我們可以通過編寫以下代碼來減少變量聲明：
<code>document.querySelector('#foo p').textContent = 'foo';
複製代碼/<code>如我們所見，我們可以使用 querySelector 方法通過 CSS 選擇器選擇任何內容。這意味著我們應該使用此方法和相關的 querySelectorAll 方法來選擇元素，因為它們都可以使用 CSS 選擇器來選擇任何 HTML 元素節點。
延遲腳本的加載 加載 JavaScript 文件是一項昂貴的操作。瀏覽器必須下載文件，解析內容，然後將其轉換為機器代碼並運行。
瀏覽器下載一個文件，同時會阻止其他任何操作。
因此，我們應該儘可能地延遲它。我們可以通過將>
另外，我們可以在頁面加載後通過動態創建>
<code>window.onload = () => {
const element = document.createElement("script");
element.src = "https://code.jquery.com/jquery-1.12.4.min.js";
document.body.appendChild(element);
};
複製代碼/<code>頁面加載後，想加載任何內容都可以使用此腳本的加載方法。
小結
我們可以通過做一些事情來加快頁面速度。首先，我們可以將數據緩存在變量中，因此我們不必重複訪問它們。然後，我們可以使用 for 循環更快地遍歷項目。
另外，我們可以減小 DOM 大小以減少需要加載的項目。我們還可以通過將 DOM 對象分配給變量來在其代碼中緩存它們。
我們也不應聲明不必要的變量，並且應儘可能推遲腳本的加載，以免卡住我們的瀏覽器。
來源：https://www.tuicool.com/articles/BrY7nqq
閱讀更多 木子莫 的文章
