我应该在什么级别缓存jQuery DOM查询的结果？

Question

有很多问题要求缓存jQuery对象,但是我找不到一个问一个jQuery对象可以和应该缓存的地方.我有一个网页,其中包含一个包含一系列功能的JavaScript文件,如下所示.

$(document).ready(function () {

    // do some setup
});

/* function queries the DOM with the same selector multiple times without caching */
function myFunctionOne() {

    $('#name_input').css("border","1px solid #ccc");
    $('#name_input').val(someValue);        
}

/* function uses cached object from a single query */
function myFunctionTwo() {

    var nameInput = $('#name_input')
    nameInput.css("border","1px solid #ccc");
    nameInput.val(someValue);
    // do some other stuff with cached selector        
}

在myFunctionOne我低效地查询DOM两次,而在myFunctionTwo我查询DOM一次,将结果缓存在局部变量中,然后使用该变量.我知道这种方法myFunctionTwo更有效但我不确定我应该在哪里实际缓存这些对象.在那一刻我在方法级别缓存对象,但我想知道我是否可以实际缓存它在更高级别,然后在多个函数中使用它.这样我只会查询一次DOM,然后在该文件的所有函数中重用结果.我建议的一个例子如下所示.

$(document).ready(function () {

    // do some setup
    var nameInput = $('#name_input')
});

/* function uses cached query result from .ready function above */
function myFunctionOne() {

    nameInput .css("border","1px solid #ccc");
    nameInput .val(someValue);        
}

/* function uses cached query result from .ready function above */
function myFunctionTwo() {

    nameInput.val(someValue);
    // do some other stuff with cached selector        
}

这种方法是否合理还是有更好的方法吗？也许使用.ready函数是一个不好的地方进行这种设置,因为它会减慢页面加载？是否有另一种方法可以在对象级别缓存jQuery对象,还是只应在功能级别缓存它们？

Answer 1

一如既往地在这些问题中,不要过早优化.在这种情况下,它意味着在您发现性能问题之前不要使用任何缓存.如果您的目标客户使用的是低规格的计算机或移动设备,这意味着您需要自己在低规格硬件上进行测试,以便识别出这些问题.我强烈建议您在尝试通过添加缓存来提高速度之前先明确一下.

还有一些要点:

• 如果您使用的是使用ID的选择器,它应该很快,因为它将getElementById在幕后使用,因此不需要缓存.
• 使用方法链而不是缓存,只使用选择器一次
• 如果确实实现了缓存,请先在本地执行.方法之间的缓存在代码复杂性方面比本地缓存花费更多.
• 使用.ready很好.它在DOM加载后运行,是完成设置任务的正确位置.