我应该在什么级别上缓存jQuery DOM查询的结果? [英] At what level should I cache results of jQuery DOM queries?

问题描述

关于缓存jQuery对象，有很多问题要问，但是我找不到一个问题，可以确切地将jQuery对象缓存在何处.我有一个网页，其中包含一个JavaScript文件，该文件具有许多功能，如下所示.

There are quite a few questions that ask about caching jQuery objects but I can't find one that asks where exactly jQuery objects can and should be cached. I have a web page that has a single JavaScript file with a bunch of functions as shown below.

$(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，然后在该文件的所有函数中重用结果.我的建议的示例如下所示.

In myFunctionOne I inefficiently query the DOM twice whereas in myFunctionTwo I query the DOM once, cache the result in a local variable, then work with that variable. I understand that the approach in myFunctionTwo is more efficient but I am unsure as to where I should actually be caching those objects. At the minute I am caching the object at the method level but I am wondering if I can actually cache it at a higher level and then use it across multiple functions. This way I would only query the DOM once and then reuse the result in all functions in this file. An example of what I am suggesting is shown below.

$(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对象，还是应该仅在功能级别缓存它们?

Is this approach sensible or is there a better way of doing it? Perhaps using the .ready function is a bad place to do this kind of setup as it will slow down page load? Is there an alternative way to cache jQuery objects at an object level or should they only be cached at a function level?

推荐答案

像在这类问题中一样，不要过早地进行优化.在这种情况下，这意味着除非您发现性能问题，否则不要使用任何缓存.如果您的目标客户使用低规格的计算机或移动设备，则意味着您需要自己在低规格的硬件上进行测试，以便找出此类问题.我强烈建议您在尝试通过添加缓存来提高速度之前先弄清楚点.

As always in these kinds of questions, don't optimize prematurely. In this case, it means don't use any caching until you notice performance problems. If your target customers use low-spec computers or mobile devices, this means you would want to test on low-spec hardware yourself so you can identify such issues. I would strongly recommend you go for clarity before trying to improve speed by adding caching.

其他一些要点:

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

• If you are using a selector that uses an ID, it should be fast as it will use getElementById behind the scenes, so that shouldn't need caching.
• Use method chaining instead of caching, which will only use the selector once
• If you do implement caching, do it locally first. Caching between methods will cost more in code complexity than local caching.
• Using .ready is fine. It runs after the DOM has been loaded, and is the exactly right place to do setup tasks.

这篇关于我应该在什么级别上缓存jQuery DOM查询的结果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！