提高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

• Third 更快，因为您将 jQuery 元素放入变量 (RAM) 中，这样您就可以直接访问它，并且 jQuery 不必在每次访问时解析 DOM。把它想象成你想编辑一个文件，你不想每次触摸它时都使用搜索引擎，你只是让它打开。在您的示例中，elem 是一个 HTML 元素，jQuery 找出您使用 $(elem) 引用的元素。

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