JavaScript 性能

如何加速 JavaScript 代码。

减少循环中的活动

循环在编程中经常使用。

循环中的每个语句（包括 for 语句）都会在循环的每次迭代中执行。

可以放在循环外部的语句或赋值将使循环运行得更快。

for (let i = 0; i < arr.length; i++) {

let l = arr.length;
for (let i = 0; i < l; i++) {

每次迭代循环时，错误代码都会访问数组的 length 属性。

更好的代码访问循环外部的 length 属性并使循环运行得更快。

与其他 JavaScript 语句相比，访问 HTML DOM 非常慢。

如果您希望多次访问 DOM 元素，请访问一次，并将其用作局部变量：

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

保持 HTML DOM 中的元素数量较少。

这将始终改善页面加载并加快渲染（页面显示），特别是在较小的设备上。

每次搜索 DOM 的尝试（如 getElementsByTagName）都将从较小的 DOM 中受益。

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

通常您可以像这样替换代码：

let fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;

有了这个：

document.getElementById("demo").innerHTML = firstName + " " + lastName;

将脚本放在页面主体的底部可以让浏览器首先加载页面。

下载脚本时，浏览器不会启动任何其他下载。此外，所有解析和渲染活动都可能被阻止。

HTTP 规范定义浏览器不应并行下载两个以上的组件。

另一种方法是使用defer="true"在脚本标签中。 defer 属性指定应该在页面解析完成后执行脚本，但它仅适用于外部脚本。

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

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

这个with关键字是不允许在严格模式下。