JavaScript |表现

Javascript 中的性能

JavaScript 是几乎所有 Web 应用程序和基于 Web 的软件的重要组成部分。 JavaScript 的客户端脚本功能可以使应用程序更具动态性和交互性，但也增加了代码效率低下的可能性。因此，编写不佳的 JavaScript 可能难以确保为所有用户提供一致和健康的体验。

下面的指南将启发您了解 JavaScript 性能问题的原因，并提供一些优化 JavaScript 代码的最佳实践。

通过 document.getElementById() 使用快速 DOM 遍历。
鉴于 jQuery 的可用性，基于标签名称、类和 CSS3 的组合生成高度特定的选择器要容易得多。您需要注意，这种方法涉及多次迭代，而 jQuery 循环遍历每个 DOM 元素并尝试找到匹配项。您可以通过按 ID 选择特定元素来提高 DOM 遍历速度。

例子：

// jQuery will need to iterate until it finds the right element
let button = jQuery('body div.dialog > div.close-button:nth-child(4)')[0];

上面的代码使用 JQuery 来操作 DOM，这不是最好的选择，因为我们可以使用文档对象提供给我们的 getElementById 方法，而不是这样做。

// A far more optimized way is to use document.getElementById.
let button = document.getElementById('dialog-close-button');

延迟 JavaScript 加载
我们加载样式表和 JavaScript 文件的位置可能会影响页面的感知速度，如果用户甚至在 JavaScript 接收之前就可以看到一些内容，那么当浏览器遇到脚本标签时，它会停止它正在做的事情，这是一种更好的体验如果我们将脚本放在页面顶部，则完全下载并运行脚本，这意味着它首先下载我们的 JavaScript 文件，然后再解析我们的 HTML 正文，这意味着当我们的脚本正在下载时，用户没有内容现在看看我们是否将脚本放在页面底部，而不是等到我们的脚本开始加载时，页面上至少有一些内容使页面看起来加载得更快。

另一种方法是在 script 标签中使用 defer。 defer 属性指定脚本应该在页面完成解析后执行，但它只适用于外部脚本。

例子：

// placing script at the end:

    
        My Page
    
    
        Welcome back, user
        
    

  
// using defer:

使用“switch”而不是冗长的“if-then-else”语句。
当您的代码库变得更大时，switch 语句通常比一组嵌套 if 更有效。这是因为在编译期间可以更轻松地优化“switch”语句。

摆脱不必要的循环和循环内的调用。
数组 push() pop() 和 shift() 指令具有最小的处理开销，因为它们是与其低级汇编语言对应物密切相关的语言结构。

例子：

// push() method
    let Animals = ["Tiger", "Giraffe", "Horse", "Deer"];
    Animals.push("Zebra");
    console.log(Animals);

// pop() method
    let Animals = ["Tiger", "Giraffe", "Horse", "Deer"];
    Animals.pop();
    console.log(Animals);

// shift() method
    let Animals = ["Tiger", "Giraffe", "Horse", "Deer"];
    Animals.shift();
    console.log(Animals);

尽可能减少你的代码
将应用程序的组件捆绑到 *.js 文件中并通过 JavaScript 缩小工具传递它们将使您的代码更简洁。有大量免费的代码压缩工具。

使用本地范围（'this'）
这对于使用回调编写异步代码特别有用，但是，它也提高了性能，因为您不依赖于在作用域链中更进一步的全局变量或闭包变量。您可以通过使用每个函数中内置的特殊 call() 和 apply() 方法重新连接范围变量 (this)，从而最大限度地利用它。请参见下面的示例：

例子：

let Organization = Object.create({
  init: function(name) {
     this.name = name;
  },
  do: function(callback) {
     callback.apply(this);
  }
});
let geeksforgeeks = new Organization('geeksforgeeks');
geeksforgeeks.do(function() {
    alert(this.name); // 'geeksforgeeks' gets alerted because we rewired 'this'.
});