• 本教程将帮助您加快脚本的性能。

• 一般来说，具有实际处理的变量和循环的结构良好的代码总是运行得足够快。

从循环中删除不必要的代码

编程中的循环非常常见。

循环中的每个语句（包括 for 语句）都会针对循环的每次迭代执行。这就是为什么只有需要循环的代码才应该在循环的代码块中。让我们看看在这种情况下如何执行 JS 优化。

错误代码

例

for (i = 0; i < myArray.length; i++) {  // Your code}

更好的代码

例

length = myArray.length;for (i = 0; i < length; i++) {  // Your code}

在第一种情况下，每次迭代都会访问该属性，尽管它不需要每次都循环遍历，并且可以放置在循环本身之外。length

因此，第二个版本将其移出循环代码块，允许循环更快地迭代。

减少 DOM 访问

访问 DOM 相当慢，但是，在 JavaScript 中您经常需要它。

如果您确实打算重复使用 DOM，最好只访问一次，以局部变量的形式使用它。

例

elem = document.getElementById("myElement");
elem.innerHTML = "I'm in.";

减小 DOM 大小

您应该尽量避免使用太多元素并保持 HTML DOM 较小。

通过不使用太多元素，您将改善网站的加载时间和渲染，这在小型设备上尤其明显。也可以看作是JS优化。

每次需要在 DOM 中搜索一个元素时，少量的元素将使您受益。

避免不必要的变量

如果您不打算保存值，请不要为其创建变量。

例如，这里我们有一段代码，其中不需要创建变量：

例

var name = firstName + " " + lastName;  
document.getElementById("myElement").innerHTML = name;

我们可以将其更改为此以提高性能：

例

document.getElementById("myElement").innerHTML = firstName + " " + lastName

延迟 JavaScript 加载

如果您将脚本放在页面底部，它将允许在应用代码之前加载页面。

当您的脚本（通常在另一个文件中找到）正在加载时，浏览器无法启动任何其他下载和渲染过程。解析也可能被阻止。

或者，您可以使用脚本标签内的 。此属性将指定在页面完成解析后不执行脚本;但是，它仅适用于外部脚本。defer="true"

此外，您可以在页面加载后使用类似于以下示例中的代码将脚本添加到页面。

例

window.onload = scriptsDown();function scriptsDown() {  var elem = document.createElement("script");
  elem.src = "javaScript.js";  document.body.appendChild(elem);
}

注意：根据 HTTP 规范，不应同时下载两个组件。

避免与

您应该避免使用关键字。它使 JavaScript 范围变得混乱，并会减慢页面速度。with

with关键字在模式下不允许。strict

JavaScript 性能：总结

• 有多种方法可以执行 JavaScript 优化。

• 重要的是要注意如何编写循环。

• 如果不需要，请不要声明变量。

• 尝试避免使用关键字。with