JavaScript 表现
如何加快你的 JavaScript 代码.
减少循环中的活动
循环在编程中经常使用。
循环中的每个语句(包括 for 语句)都会在循环的每次迭代中执行。
可以放在循环外面的语句或赋值将使循环运行得更快。
坏的:
对于(让 i = 0; i < arr.length; i++){
更好的代码:
让 l = arr.length;
对于(设 i = 0; i < l; i++){
每次循环迭代时,错误代码都会访问数组的长度属性。
更好的代码在循环外访问长度属性,使循环运行得更快。
减少 DOM 访问
与其他 JavaScript 语句相比,访问 HTML DOM 非常慢。
如果您希望多次访问 DOM 元素,请访问一次,并将其用作局部变量:
减少 DOM 大小
保持 HTML DOM 中的元素数量较少。
这将始终改善页面加载并加快渲染(页面显示),尤其是在较小的设备上。
每次尝试搜索 DOM(比如 getElementsByTagName)都会受益于较小的 DOM。
避免不必要的变量
如果您不打算保存值,请不要创建新变量。
通常你可以像这样替换代码:
让 fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = 全名;
有了这个:
document.getElementById("demo").innerHTML = 名字 + " " + 姓氏;
延迟 JavaScript 加载
将脚本放在页面主体的底部可让浏览器首先加载页面。
在脚本下载期间,浏览器不会启动任何其他下载。此外,所有解析和渲染活动都可能被阻止。
HTTP 规范定义浏览器不应并行下载两个以上的组件。
另一种方法是使用 defer="true"
在 script 标签中。defer 属性指定脚本应在页面解析完成后执行,但它仅适用于外部脚本。
如果可能的话,您可以在页面加载后通过代码将脚本添加到页面中:
例子
<script>
窗口.onload = 函数(){
const 元素 = document.createElement("脚本");
元素.src = “myScript.js”;
文档.body.appendChild(元素);
};
</script>
避免使用
避免使用 with
关键字。它对速度有负面影响。它还会扰乱 JavaScript 作用域。
这 with
关键字是不允许 在严格模式下。