jquery - jQuery 性能：多个选择器与带上下文的选择器

Question

想知道以下哪一项被认为是正确的做事方式。如果我有以下html：

<div id="container">
    <div id="form">
        <div class="field">TEXT</div>
    </div>
</div>

而且我想使用 jQuery 检索字段中的文本，这更好（以及为什么）。多个选择器：

$("#container #form .field").text();

或使用上下文：

$((".field", $("#form")), $("#container")).text();

这是一个包含两者的小提琴：http: //jsfiddle.net/f8LKc/

Answer 1

您应该只使用$('#field')它，因为它是一个 ID 选择器，因此只有一个<div id="field">.

Answer 2

没有什么比运行基准测试来测试这两种方法的性能更好的了。我在 jsperf.com 创建了一个测试用例，测试了您的两种方法，以及按类选择$(".field")：

Testing in Chrome 21.0.1180.89 32-bit on Windows Server 2008 R2 / 7 64-bit Test 

+-----------------------+---------------------------+
| Test                  | Ops/sec                   |
+-----------------------+---------------------------+
| Multiple Selector     |  43,265  67% slower       |
+-----------------------+---------------------------+
| Selector w/ Context   | 130,051  fastest          |
+-----------------------+---------------------------+
| Selector w/ Class     | 126,064  2% slower        |
+-----------------------+---------------------------+

测试用例。