jQuery 选择器的优化(从官方文档翻译过来的)

今天在官网看到一篇jQuery 选择器的优化的文章,所以翻译过来,方便记住和查阅。


官方地址:
http://learn.jquery.com/performance/optimize-selectors/

选择器的优化在今天没有比过去更重要了,因为很多浏览器实现了document.querySelectorAll()这个方法,选择器的负担也从jQuery转向了浏览器。然而,有些要点依然需要记住。


基于ID的选择器
使用ID选择器总是最快的。
// Fast:
$( "#container div.robotarm" );


// Super-fast:
$( "#container" ).find( "div.robotarm" );

find()方法更快是因为其前面的选择器没有使用Sizzle选择器引擎进行处理。只有1个ID的选择器使用的是document.getElementById()进行处理,它非常快是因为这是浏览器固有的方法。


具体性
使你的右边选择器的具体性高于左边选择器,请看下面例子:
// Unoptimized:
$( "div.data .gonzalez" );

// Optimized:
$( ".data td.gonzalez" );

使用“标签.类”在右边选择器,使用“.类”在左边选择器。(因为浏览器处理选择器是从右到左)


避免过度具体
选择器中如果包含了类似通配符的东西将会很慢。请看下面例子:
$( ".buttons > *" ); // Extremely expensive.
$( ".buttons" ).children(); // Much better.

$( ".category :radio" ); // Implied universal selection.
$( ".category *:radio" ); // Same thing, explicit now.
$( ".category input:radio" ); // Much better.


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值