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";

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Performance</h2>

<p>If you expect to access a DOM element several times, access it once, and the use it as a local variable:</p>

<p id="demo"></p>

<script>
const obj = document.getElementById("demo");
obj.innerHTML = " Hello";
</script>

</body>
</html>

减小 DOM 大小

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

这永远都会 改善页面加载，并加快渲染（页面显示），特别是在较小的设备上。

每次搜索 DOM 的尝试（如 getElementsByTagName）都会受益 来自较小的 DOM。

避免不必要的变量

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

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

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

有了这个：

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

延迟 JavaScript 加载

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

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

HTTP 规范定义浏览器下载的内容不应超过 两个组件并联。

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

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

例子

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

避免与以下一起使用

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

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