42-解决方案

选择背景色：黄橙洋红淡粉水蓝草绿白色选择字体：宋体黑体微软雅黑楷体选择字体大小：小中大特恢复默认

5.10.2　解决方案

首先，确定你使用的是最新版本的jQuery（1.3.2或者更高），新版本能在浏览器中得到更高的选择器性能，尤其是对类选择器来说。

如果能够控制HTML页面内容，就可以修改页面，使用 id 属性和 '#xyz' 选择器代替 class 属性和 ".xyz" 选择器：

<div class="foo"></div>
<div id="bar"></div>
$('.foo') // 更慢
$('#bar') // 更快

如果必须使用类名选择器，先看看能不能用更快的ID选择器找到双亲元素，然后向下寻找子元素。例如，使用前一个秘诀中的HTML：

<table id="log">
　　 <tr><td>Client X:</td><td class="clientX"></td></tr>
　　 ...
</table>

可以使用如下代码：

$('.clientX')    　　　// 较慢
$('td.clientX')   　　 // 可能快一些
$('#log .clientX')  　 // 可能快得多
$('#log td.clientX')   // 在某些浏览器中可能较快

注意

一定要注意无法反映你所使用的真实页面内容的选择器速度测试页面。在非常简单的页面中，简单的 $('.clientX') 的测试结果可能远远超过花哨的选择器（如 $('#log td.clientX') ），甚至在你认为类选择器应该运行得较慢的浏览器和jQuery版本中也是如此。这只是因为更复杂的选择器的建立时间更长，在简单页面中的建立时间可能对性能起主要的作用。这个秘诀所用的测试页面有意地包含了非常多的元素，以便引发在大页面中才会出现的选择器性能问题。当然，不管怎么测试都无法准确地说明在你的页面中选择器的性能。确定哪一个选择器在特定页面中最快的唯一方法是在页面中测试所有选择器。

Previous 上一篇本节目录 Next 下一篇

42-解决方案

5.10.2 解决方案

5.10.2　解决方案