数据结构
网络
关系型数据库 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何提升JavaScript性能？
在当今世界，几乎每个网站都使用JavaScript。 Web应用程序变得越来越复杂，用户交互性也越来越强，这导致了性能问题。 它会导致糟糕的用户体验，这对任何Web应用程序来说都是不可取的。 不同的因素会导致性能低下、加载时间长和响应时间长。
在本教程中，我们将讨论所有这些因素以及如何解决此问题并提高JavaScript的性能。
轻量级和紧凑的代码
提高JavaScript性能的第一步是编写轻量级和紧凑的代码。 JavaScript代码可能包含多个模块以及一些未使用的函数或变量，这些可以轻松地从代码中删除。 这将缩短JavaScript的编译时间，从而提高性能。 此外，使用高级算法执行复杂任务将非常有利于提高性能。
使用局部变量
JavaScript访问局部变量的速度比全局变量快，因此使用局部变量可以提高JavaScript的性能。 每当我们访问变量时，JavaScript首先会在局部作用域中搜索该变量，然后查找全局变量。 如果所有变量都在局部作用域中定义，则可以减少访问时间。 此外，局部变量在函数调用完成后会被销毁，但全局变量会将其值保存在内存中。 这也可能导致内存问题。
// Local variables const id = 10 let value = 'Tutorialspoint' // Global variables var key = 'JavaScript'
减少DOM访问
访问DOM并操作DOM是JavaScript最重要的功能之一。 但是不必要地过多访问DOM会导致巨大的性能问题。 每当我们操作DOM中的某个元素时，DOM都会刷新为更新后的状态，如果您每秒钟不断更新DOM元素，那么每秒钟DOM都会刷新。 因此，建议在必要时更新DOM。 如果用户需要多次更新元素，则最好将元素对象存储在变量中并使用该变量来更新DOM。
let element = document.getElementById('element_id')
element.innerHTML = 'Tutorialspoint'
减少循环迭代
循环是执行一些重复任务的简便方法，但它们也会导致性能低下。 长迭代循环需要大量时间才能完成，因此最好尽可能避免使用长循环。 相反，使用小循环并在循环中执行最少的任务。 此外，不要在循环中访问DOM； 这将导致巨大的性能问题，因为您在每次循环迭代中都会操作DOM。
let names = ['abc', 'xyz', 'mno', 'pqr'];
let element = document.getElementById('element_id');
// DON’T DO THIS
for(let index=0; i<names.length; i++){
element.innerHTML += names[index] + ' ';
}
// DO THIS
let str = '';
for(let index=0; i<names.length; i++){
str += names[index];
}
element.innerHTML = str;
使用异步编程
异步编程是提高Web应用程序性能的最佳方法之一。 在异步编程中，代码执行是异步进行的，因此可以轻松地同时执行多个任务。 这会导致数据快速加载和快速响应。 在JavaScript中，异步操作是通过AJAX（异步JavaScript和XML）执行的。
let http = new XMLHttpRequest()
http.open('GET', '...URL')
http.onload = function(){
console.log(this.response); // the response
}
将JavaScript放在页面底部
当JavaScript放在页面的顶部时，它会在页面加载时执行，因此加载整个页面需要额外的时间。 这会导致页面加载缓慢。 为了解决此问题，应将JavaScript放在页面的底部，以便JavaScript在加载整个页面后开始执行。
示例
<html> <body> <div>Your Page Content</div> <div id='element'></div> <script> // JavaScript Code at Page's Bottom document.getElementById('element').innerHTML = 'Welcome to Tutorialspoint' </script> </body> </html>
消除内存泄漏
如果Web应用程序存在内存泄漏，则应用程序将分配越来越多的内存，这会导致巨大的性能和内存问题。 为了解决此问题，请确保应用程序中没有内存泄漏，并检查变量是否占用过多值。 用户可以在Chrome开发者工具中观察内存泄漏。
使用优化的算法
JavaScript中的复杂任务通常需要大量时间，这会导致性能问题，而使用优化的算法； 我们可以减少任务执行所需的时间。 以更优化的方式重写算法以获得最佳结果。 此外，避免使用长循环、递归调用和全局变量。
创建和使用变量
在JavaScript中，只创建将使用并保存值的变量。 使用以下方法并避免不必要的代码行和变量声明：
document.write(num.copyWithin(2,0));
避免使用with
with关键字对JavaScript速度没有好的影响。 避免在代码中使用它。
更快的循环
使用循环时，将赋值放在循环之外。 这将使循环更快：
var i;
// assignment outside the loop
var j = arr.length;
for (i = 0; i < j; i++) {
// code
}
使用其他工具查找问题
您的Web应用程序似乎运行良好，但它可能存在多个性能问题，为了找出这些问题，可以使用一些工具。 Lighthouse是一个有用的Web应用程序性能分析工具。 它有助于检查性能、最佳实践、可访问性和SEO。 不仅此工具，互联网上还有其他工具可以检查Web应用程序的性能，我们可以简单地查看问题并尝试克服这些问题。
306 次浏览
