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
关键字。