在使用jQuery的`each()`函数遍历DOM元素时，性能优化主要依赖于减少DOM操作次数、优化选择器、以及合理利用缓存。这里有几个关键点可以帮助你优化使用`each()`函数时的性能：
1. **减少DOM查询次数**：尽量在循环外使用`$(selector)`来选中元素，避免在循环内部重复查询相同的DOM元素。
2. **缓存jQuery对象**：将选中的jQuery对象缓存到变量中，避免在每次迭代中都重新选择DOM元素。
3. **直接操作DOM**：在可能的情况下，减少对jQuery对象的操作，直接操作DOM元素可以提高性能，特别是当处理大量元素时。
4. **使用合适的选择器**：确保你的选择器尽可能具体且高效，避免使用过于宽泛或复杂的选择器。
5. **减少DOM的修改**：如果可能，尽量将DOM的修改（如添加、删除或修改元素）集中到循环外部进行，减少DOM的重绘和重排次数。
6. **利用DocumentFragment**：在处理大量DOM操作时，可以考虑使用`DocumentFragment`作为临时的容器，将所有更改集中在这个容器内，然后再一次性添加到DOM中。
下面是一个简单的示例，展示了如何优化使用`each()`遍历DOM元素的性能：
// 假设我们有一个包含多个元素的列表
var $listItems = $('#myList li'); // 缓存jQuery对象
// 使用each()遍历列表项
$listItems.each(function(index, element) {
// 直接操作DOM元素
var item = element; // 使用原生DOM元素
// 对item进行操作，例如修改文本内容
item.textContent = '新的内容 ' + index; // 示例操作
// 注意：这里避免了在循环内部使用jQuery函数来操作DOM，如$(this).text()
// 如果必须使用jQuery方法，可以这样做：$(element).doSomething(); 但尽量减少使用
});
// 如果需要添加或删除大量元素，考虑使用DocumentFragment
var fragment = document.createDocumentFragment();
$listItems.each(function(index, element) {
// 假设我们创建了一些新的元素
var newElement = document.createElement('li');
newElement.textContent = '新列表项 ' + index;
// 将新元素添加到DocumentFragment中
fragment.appendChild(newElement);
});
// 最后，将DocumentFragment一次性添加到DOM中
$('#myList').append(fragment);
在这个示例中，我们首先缓存了jQuery对象`$listItems`，然后在`each()`循环中直接操作DOM元素（通过`element`参数）。此外，我们还展示了如何使用`DocumentFragment`来优化大量DOM元素的添加。