提高jQuery代码性能的方法[选择器观点]

Question

我想了解提高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中的内部缓存是什么？

Answer 1

• 第三个更快，因为你将一个jQuery元素放入一个变量（RAM）中，这样你就可以直接访问它，而jQuery不必在每次访问它时解析DOM。可以想象它就像你想要编辑一个文件一样，你不想每次触摸它时都使用搜索引擎，只需让它打开即可。在您的例子中，elem是一个HTML元素，jQuery会发现您使用$(elem)引用的元素。

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