JavaScript 效能
如何加快您的 JavaScript 程式碼。
減少迴圈中的活動
迴圈在程式設計中經常使用。
迴圈中的每個語句，包括 for 語句，都會在每次迴圈迭代時執行。
可以放在迴圈外的語句或賦值將使迴圈執行得更快。
壞
for (let i = 0; i < arr.length; i++) {
更好的程式碼
let l = arr.length;
for (let i = 0; i < l; i++) {
糟糕的程式碼在每次迴圈迭代時都會訪問陣列的 length 屬性。
更好的程式碼在迴圈外訪問 length 屬性，並使迴圈執行得更快。
減少 DOM 訪問
與 JavaScript 的其他語句相比，訪問 HTML DOM 非常慢。
如果您期望多次訪問 DOM 元素，請訪問一次，並將其用作區域性變數
減小 DOM 尺寸
保持 HTML DOM 中的元素數量較少。
這將始終改善頁面載入，並加快渲染（頁面顯示）速度，尤其是在小型裝置上。
每一次搜尋 DOM 的嘗試（例如 getElementsByTagName）都會受益於更小的 DOM。
避免不必要的變數
如果您不打算儲存值，請不要建立新變數。
通常，您可以將以下程式碼替換為
let fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;
替換為
document.getElementById("demo").innerHTML = firstName + " " + lastName;
延遲 JavaScript 載入
將指令碼放在頁面主體的底部，可以讓瀏覽器先載入頁面。
在下載指令碼時，瀏覽器不會開始任何其他下載。此外，所有解析和渲染活動都可能被阻止。
HTTP 規範定義瀏覽器不應並行下載超過兩個元件。
另一種方法是在 script 標籤中使用 defer="true"。defer 屬性指定指令碼應在頁面完成解析後執行，但它僅適用於外部指令碼。
如果可能，您可以在頁面載入後透過程式碼將指令碼新增到頁面
示例
<script>
window.onload = function() {
const element = document.createElement("script");
element.src = "myScript.js";
document.body.appendChild(element);
};
</script>
避免使用 with
避免使用 with 關鍵字。它對速度有負面影響。它還會使 JavaScript 作用域混亂。
在嚴格模式下不允許使用 with 關鍵字。
