提高jQuery代码性能的方法[选择器角度]

The way to improve jQuery code performance [Selector point of view]

本文关键字：选择器 方法 jQuery 代码 性能 提高      更新时间：2023-09-26

我想了解提高jQuery代码性能的最佳方法。

实际上，我知道如何缓存jQuery选择器不触及DOM多次如下:

最糟糕的方式

$('.selector').text('Text');
$('.selector').text('New Text');

更好的方法

var elem = document.querySelectorAll('.selector');
$(elem).text('Text');
$(elem).text('New Text');

最好的方法

var $elem = $('.selector');
$elem.text('Text');
$elem.text('New Text');

第一个问题:为什么第三个方法比第二个方法快，$(elem)在这里实际做了什么?

第二个问题:当我在jQuery中使用.data()时，我访问内部缓存，而不触及DOM，那么JavaScript中的内部缓存是什么?

  • 第三是更快，因为你把jQuery元素到一个变量(RAM)，所以你可以直接访问它，jQuery不需要解析DOM每次你想要访问它。把它想象成你想编辑一个文件，你不想每次触摸它时都使用搜索引擎，你只需要让它打开。在您的示例中，elem是一个HTML元素，并且jQuery发现您与$(elem)引用的是哪个元素。

  • .data()方法，不要触摸HTML元素，因为它不需要。它只是将一些数据放入RAM，因为它比每次将数据写入/读取到HTML元素中更快。

相关文章：