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 元素，请访问它一次，然后使用 它作为局部变量：

const obj = document.getElementById("demo");  
obj.innerHTML = "Hello";

尝试一下 »

---

减小 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属性指定脚本应在页面具有 已完成解析，但它仅适用于外部脚本。defer="true"

如果可能，可以在页面加载后通过代码将脚本添加到页面中：

<script>  
window.onload = function() {  
  const element = document.createElement("script");  
  element.src = "myScript.js";  
  document.body.appendChild(element);  
};  
</script>

---

避免与以下一起使用

避免使用with关键字。它对速度有负面影响。它还会扰乱 JavaScript 范围。

在严格模式下不允许使用with关键字。