如何加快JavaScript代码的执行速度

吴欣
1,033 阅读5分钟

在开发一个应用程序或网站时，需要考虑的最关键因素之一是应用程序或网站的性能。作为一个用户，我不希望任何应用程序需要很长的时间来加载，或者每当我点击一些东西，我不得不等待一些行动。通常情况下，如果网页需要5-6秒的时间来加载，包括我在内的大多数用户都会离开这个网页。

对于网络开发者来说，JavaScript是一个神奇的工具。每个网络开发者都会在他们生命中的某个时刻学习JavaScript。然而，糟糕的JavaScript代码会导致网站变慢。

考虑到这一点，一个开发者总是在寻找改善他的网页的方法。你很幸运，因为今天我们要谈的是如何加快JavaScript代码的执行速度。

循环中的活动减少

一个程序员经常使用循环来缩短他的代码。然而，应该记住的是，有一些使用循环的坏方法会使你的程序变慢。

让我们举一个 "for "循环的例子。

例子

for(let i=0; i < myArray.length; i++){
   //Hello
}

这个循环在程序上是正确的，但其性能会很差。我们可以把myArray.length语句放在循环之外，这样它就不必一次又一次地计算长度，直到循环结束。

解决方案

let len=myArray.length;
for(let i=0; i < len; i++){
   //Hello
}

在这个循环中，我们可以看到长度是固定的，循环不必在每次迭代时计算数组的长度。因此，速度提高了，性能也提高了。

减少多姆访问

如果我们将JavaScript语句与访问HTML Dom进行比较，我们会发现访问HTML Dom的速度非常慢。如果我们没有访问或执行许多Dom操作，这不是一个问题。但是，当你执行许多Dom操作时，确实会影响网页的速度。

解决这个问题的办法是将Dom元素存储在一个局部变量中，然后我们可以多次访问该变量。

例如

const myObj=document.getElementById("speed"),innerHTML="not achieved";
const myObj=document.getElementById("speed").hidden="false";
//slow and hinders speed

这使得我们的程序执行效率很低。

我们来看看另一个解决这个问题的例子。

const myObj=document.getElementById("speed");
myObj.innerHTML="achieved";
myObj.hidden="false";

现在我们已经了解了Dom访问量的减少，让我们来看看Dom大小的减少，以提高我们在JavaScript中的网页速度。

缩减Dom的大小

在讨论缩小dom大小之前，让我们先看看过大的dom大小，如果dom大小过大，意味着你的页面有太多的dom结点/HTML组件。这也可能意味着你的页面dom元素被深度嵌套。这将导致消耗更多的电力，从而降低页面性能或速度。

解决的办法是，HTML Dom中的元素数量应该最小化。这样做的好处是，它将提高页面的加载速度，并加快渲染过程，也就是页面的显示。特别是在手机等小型设备上，这是非常方便的。

消除不必要的变量

这是最简单的提高网页性能的技巧。为什么要在不需要的时候制造变量呢？另外，为什么要在你知道你只是用它来显示某个地方的情况下制造变量？当我们避免制造不必要的变量时，我们的网页性能就会提高。

例如，不好的代码

let firstName="Jhon";
let lastName="Cena";
let fullName=firstName+" "+lastName;
alert(fullName);

在这个例子中，我们可以看到，我们在fullName中存储了名字和姓氏，只是为了在警报中显示它。直接提醒firstName和lastName不是更好吗？这就是消除不必要的变量的意义所在。

解决方案（好的代码）

let firstName="Jhon";
let lastName="Cena";
alert(firstName+" "+lastName);

延迟加载JavaScript

为了提高你的网页的JavaScript性能，通常的做法是在HTML页面的末尾放一个脚本标签或在脚本标签内放JavaScript代码。其主要目的是让浏览器先加载HTML，然后再加载JavaScript代码。用技术术语来说，当一个脚本正在下载时，浏览器不会启动任何其他的下载，所有的解析和渲染都会被阻止。

我们也可以在我们的脚本标签中使用 "defer="true"。defer属性的作用是，它规定只有在页面解析完成后才可以执行脚本。换句话说，它要等到整个DOM加载完毕。然而，应该注意的是，它只与外部脚本兼容。

例子

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

避免使用关键词 "with"

With关键字用于引用一个对象的属性或方法，因为它是一种速记法。使用关键词 "with "会减慢速度。不使用with关键字的另一个原因是，它使JavaScript的作用域变得很杂乱。

最小化JavaScript代码

最小化或最小化JavaScript代码是另一种加快我们JavaScript代码执行速度的方法。最小化JavaScript代码只是意味着在不改变程序功能的情况下，删除或改变JavaScript源代码中所有不需要的和不必要的字符。它包括多种内容，如删除注释、分号以及空白。除此之外，它还包括使用短的函数和变量名称。让我们来看看代码最小化前后的例子。

最小化之前

//the function
//which console log

//the first message from person

function firstMessage(name){
  console.log("First Message is from: ",name);
}
//now call the function

firstMessage("John");

最小化后

function fMsg(n){console.log("First Message is from: ",n)}firstMessage("John");

总结

开发者总是保持代码的可靠性和优化之间的平衡。正是由于这个原因，我们在这篇文章中讨论了如何加快JavaScript代码的执行速度。上面提到的所有技巧和窍门，如果一起使用，会对JavaScript代码的速度有很大的提高。 然而，人们应该记住，尽管性能是必要的，但并不高于检测错误或增加功能。

avatar
文章
阅读
粉丝