JavaScript | 性能优化-CSDN博客

本文链接：https://blog.csdn.net/weixin_41596737/article/details/100335902

JavaScript | 性能优化

目前 JavaScript 语言性能越来越好，个人电脑的平均配置也越来越高，但是注重良好的编程规范仍然是优秀编程者的素养。

提高 JS 代码性能的方法

减少循环中的活动

若循环中存在某个对象的属性经常被访问而循环不会对其进行修改，可以将其提取出来。

// 重构前
var i;
for (i = 0; i < arr.length; i++) {
    // ...
}

// 重构后
var i;
var l = arr.length;
for (i = 0; i < l; i++) {
    // ...
}

减少 DOM 访问

访问 HTML DOM 的速度很慢，如果需要多次访问同一个 DOM 元素，可以将其作为本地变量保存下来使用：

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

缩减 DOM 规模

编写 HTML 时，尽量保持 HTML DOM 中较少的元素数量，可以提高页面加载速度。

一个较小的 DOM 使每一次搜索 DOM（比如 getElementsByTagName）都更加快速。

避免新建不必要的变量

// 重构前
var fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName; 

// 重构后
document.getElementById("demo").innerHTML = firstName + " " + lastName

延迟 JavaScript 加载

下载脚本会阻塞其他下载，把脚本放在页面底部可以使浏览器先加载页面。

在 script 标签中使用 defer="true"。
defer 属性规定脚本应在页面完成解析后执行（只适用于外部脚本）。
通过代码向页面添加脚本：

<script>
window.onload = downScripts;

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