避免编写缓慢的 JavaScript 代码

目录

• 介绍
• 未使用的变量
• 循环活动
• Javascript 加载中
• 减少 Dom 访问
• 结论

介绍

本文将探讨一些有助于提升JavaScript代码性能和速度的主题。我们将回顾一些常见错误，帮助我们理解如何让代码运行更流畅、更高效。稍后我们会讨论算法和数据结构，但这部分内容比较深入。所以，首先让我们来了解一下导致代码质量低下的常见错误。

首先，让我们问问自己：究竟如何才能编写出更快的代码？是否存在某种秘诀？特殊的函数或方法？或者需要借助高级框架？实际上并非如此。并没有什么特殊的函数或方法能够让代码运行得更快。其实，方法比这简单得多。我们可以从未使用的变量入手，逐步深入。

未使用的变量

我非常肯定，我们在使用JS时都曾在控制台中看到过最常见的错误。

variable is defined but never used

这是一个非常常见的错误，很多初学者往往会忽略它，因为变量有时可能没有任何值。所以通常我们会认为，只要它没有导致代码出错，就不会对代码产生任何影响。但未使用的变量会造成性能问题，因为它会占用浏览器的空间。简单来说，如果你完全不打算使用某个变量，就不要创建它。

如果你要举办一个披萨派对，邀请了 4 位朋友，每位朋友正好吃 2 片披萨，而每份披萨有 8 片。你会只订购所需的数量，还是即使知道朋友只会吃 2 片也会多订一些？我们肯定都不想浪费食物或金钱，那么从编程的角度来看，为什么要创建一个变量却不用呢？这纯粹是浪费资源和占用空间。

循环活动

在代码中使用循环时，循环会不断迭代，直到返回 true 或 false。这会给 CPU 带来很大的负担，尤其是在遍历包含大量对象的大型数据结构时。为了提高循环效率，我们可以将赋值语句或条件语句放在循环之外，这样就无需每次都遍历属性，因为我们只需要访问它们一次。

例如，在我们的循环中，arr.length每次循环迭代时我们都会访问该对象，这会导致代码随着时间的推移而运行缓慢，尤其是在处理大型数据库并需要查找特定数据时。

var i;
for (i = 0; i < arr.length; i++) {}

为了帮助我们更好地实现循环，for loop我们可以将变量放在函数外部for loop，这样就能提前获取数组长度，而无需每次都通过循环访问。例如，我们可以在循环外部赋值i，arr.length并将赋值后的值传递给函数，从而加快循环速度。

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

在循环外部访问长度有时可以让开发人员更容易阅读代码，但这样一来，你就实现了一个更快的循环迭代器。

Javascript 加载中

很多新手开发者一开始并不清楚应该把脚本标签放在 HTML 文件的哪个位置。强烈建议将javascript脚本标签放在 HTML 页面的底部，这样浏览器就能在加载功能之前先完成页面加载。这样做确实能显著提升浏览器的加载速度。如果脚本标签放在HTML文件的开头，浏览器会先下载脚本代码，然后再加载其他内容，甚至可能导致页面渲染被阻塞。你也可以在页面加载完成后再添加脚本。

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

减少 DOM 访问

选择元素（或者说访问HTML DOM）的速度非常慢。我们希望尽量减少要选择的元素数量，这有助于提高加载速度，也有利于小尺寸设备。如果需要多次访问同一个 DOM 元素，我们可以将其存储在一个局部变量中，然后只访问一次。

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

这看起来可能不算什么，但说实话，在处理代码量巨大的复杂应用程序时，这些小错误可能会造成很大的影响。

结论

我希望读完本文后，您能够学会如何编写代码，并理解每一行代码的运行机制。理解代码的完整工作原理至关重要，这不仅能帮助您成为更优秀的开发者，还能帮助您更高效地使用各种工具。

这些文章主要是为了个人提升编程和写作能力而写的，旨在提高我的编程技能。如果您有任何反馈或建议，欢迎随时提出，这对我和其他读者都很有帮助。感谢您耐心读到这里！

• 叽叽喳喳
• LinkedIn
• Github