jquery 缓存选择器最佳实践答案

【问题标题】：jquery cache selectors best practicejquery 缓存选择器最佳实践
【发布时间】：2016-02-23 11:54:17
【问题描述】：

对于以下示例，缓存 jquery 对象的最佳做法是什么。有没有更好的方法？

var content='<div id="content">'+
            '<div id="div1"></div>'+
            '<div id="div2"></div>'+
            '<div id="div3"></div>'+
            '</div>';
$('body').append(content);
var $div1=$('#div1'),
    $div2=$('#div2'),
    $div3=$('#div3');

var div1='<div id="div1"></div>',
    div2='<div id="div2"></div>',
    div3='<div id="div3"></div>',
    content='<div id="content">'+div1+div2+div3+'div>';  
$('body').append(content);
var $div1=$(div1),
    $div2=$(div2),
    $div3=$(div3);

【问题讨论】：

第二个例子不行
第二个在分配给$divN时创建new DIV，它们与您附加到DOM的DIV不同。

标签： javascript jquery performance caching

【解决方案1】：

第一个是正确的方法。

第二种方式无论如何都行不通，即使这样做了，那也只会让您缓存您最初在 JS 中创建的元素，而不是最初在 DOM 中的任何内容

【讨论】：

【解决方案2】：

3) 第三次选择：

var $div1 = $('<div id="div1"></div>'),
    $div2 = $('<div id="div2"></div>'),
    $div3 = $('<div id="div3"></div>'),
    $content = $('<div id="content">').append(div1, div2, div3).appendTo("body");

作为额外提示：您可能不必缓存 div，并且如果您正在做一些可能是专用功能的事情，则可以避免更多内存.. 示例：

$content.on('click', 'div', function(){
    // you clicked on some div even if the listener is on the $content
    // 
})

【讨论】：

【解决方案3】：

在这种情况下，您不会注意到缓存选择器或元素集合有任何性能优势，因为通过 id 选择元素已经非常快了。

当然，第二种情况根本不是缓存，所以它甚至无法与第一种相提并论。

【讨论】：