优化jQuery选择器
优化jQuery选择器
选择优化比以前更加重要,因为越来越多的浏览器实现了queryselectorall()并承担了将jQuery选择器转移到浏览器的责任。记住这些小技巧可以让你轻松突破学习选择器时的瓶颈。
jQuery 扩展
如果可能的话,避免使用jQuery扩展选择器。这些扩展无法在性能让原生的queryselectorall() DOM提供的方法更有效,所以还是用jQuery提供的常规选择器吧。
1
2
3
4
5
|
// Slower (the zero-based :even selector is a jQuery extension) $( "#my-table tr:even" ); // Better, though not exactly equivalent $( "#my-table tr:nth-child(odd)" ); |
记住,许多jQuery的扩展,包括在上面的例子中的:even,没有在CSS规范准确的对应。在某些情况下,这些扩展的方便性可能会超过其性能成本。
避免过度使用选择器
1
2
3
4
|
$( ".data table.attendees td.gonzalez" ); // Better: Drop the middle if possible. $( ".data td.gonzalez" ); |
减少DOM节点同样可以提高选择器的效率,因为这样可以使寻找元素时减少遍历的层数。
ID选择器
使用以ID选择器开始的选择器确保万无一失。
1
2
3
4
5
|
// Fast: $( "#container div.robotarm" ); // Super-fast: $( "#container" ).find( "div.robotarm" ); |
第一种方法 DOM 使用document.querySelectorAll()
. 第二种方法 jQuery 使用效率更高的document.getElementById()
, 尽管提高的效率会受后续的.find()的影响。
关于老版本的浏览器
使用就浏览器比如ie8或ie8-时有必要考虑一下建议
明确选择器
右边的选择器尽可能明确,左边的不用。
1
2
3
4
5
|
// Unoptimized: $( "div.data .gonzalez" ); // Optimized: $( ".data td.gonzalez" ); |
如果可能的话,在你的右边选择器使用tag.class形式,左边使用tag或.class。
避免使用通用选择器
通用选择器放在任何地方效率都不高。
1
2
3
4
5
6
|
$( ".buttons > *" ); // Extremely expensive. $( ".buttons" ).children(); // Much better. $( ":radio" ); // Implied universal selection. $( "*:radio" ); // Same thing, explicit now. $( "input:radio" ); // Much better. |
优化jQuery选择器的更多相关文章
- jQuery选择器的优化选择
jQuery选择器的优化选择 1.1 属性选择器 var $div=$("[id]"); 选中拥有该属性的元素 var $div=$("[id=div]"); ...
- jquery选择器效率优化问题
jquery选择器效率优化问题 jquery选择器固然强大,但是使用不当回导致效率问题: 1.要养成将jQuery对象缓存进变量的习惯 //不好的写法 $('#btn').bind("c ...
- jQuery 选择器和JavaScript 选择器的技巧与异常原因
jquery的选择器借鉴了css选择器,核心依然依靠JavaScript的getElementById()和getElementsByTagName()方法,但是他封装了2个方法,让jquery选择器 ...
- 【如何使用jQuery】【jQuery弹出框】【jQuery对div进行操作】【jQuery对class,id,type的操作】【jquery选择器】
1.如何使用jQuery jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨 ...
- jquery选择器的实现流程简析及提高性能建议!
当我们洋洋得意的使用jquery强大的选择器功能时有没有在意过jquery的选择性能问题呢,其实要想高效的使用jquery选择器,了解其实现流程是很有必要的,那么这篇文章我就简单的讲讲其实现流程,相信 ...
- 如何优化JQuery each()函数的性能
如果对jQuery这东西只停留在用的层面,而不知其具体实现的话,真的很容易用出问题来.这也是为什么近期我一直不怎么推崇用jQuery,这框架的API设定就有误导人们走上歧途之嫌. 01 $.fn.be ...
- JQuery选择器大全 前端面试送命题:面试题篇 对IOC和DI的通俗理解 c#中关于协变性和逆变性(又叫抗变)帮助理解
JQuery选择器大全 jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素 ...
- jQuery常用API之jQuery选择器
3.jQuery常用API 3.1 jQuery选择器 3.1.1 jQuery基础选择器 原生JS获取元素的方式很多.很杂,而且兼容性情况不一致,因此jQuery给我做了封装,是获取元素统一了标准 ...
- JQuery 选择器
选择器是JQuery的根基,在JQuery中,对事件的处理,遍历DOM和AJAX操作都依赖于选择器.如果能够熟练地使用选择器,不仅能简化代码,而且还可以事半功倍. JQuery选择器的优势 1.简洁的 ...
随机推荐
- Greenplum使用简明手册
GP服务启停 su - gpadmin gpstart #正常启动 gpstop #正常关闭 gpstop -M fast #快速关闭 gpstop –r #重启 gpstop –u #重新加载配置文 ...
- MySQL Infobright 数据仓库快速安装笔记[转]
[文章作者:张宴 本文版本:v1.1 最后修改:2010.05.18 转载请注明原文链接:http://blog.zyan.cc/infobright/] Infobright是一个与MySQL集成的 ...
- iOS8的UIPresentationController
本文转载至 http://kyfxbl.iteye.com/blog/2147888 从iOS8开始,controller之间的跳转特效,需要用新的API UIPresentationControll ...
- 九度OJ 1137:浮点数加法 (大数运算)
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:2725 解决:736 题目描述: 求2个浮点数相加的和 题目中输入输出中出现浮点数都有如下的形式: P1P2...Pi.Q1Q2...Qj ...
- 【操作系统】使用BCD工具安装Ubuntu操作系统
Ubuntu14.04作为目前最新版本的ubuntu系统,相信很多人都想在自己的电脑上安装一下,然而系统的安装方法各式各样,U盘法.grub引导法等等,本文将介绍在win7系统下用easyBCD软件建 ...
- (深入理解计算机系统)AT&T汇编指令
AT&T汇编指令学习(GCC) 寄存器命名原则: 相比inter语法,AT&T语法格式要求所有的寄存器都必须加上取值符"%". 操作码命令格式: 源/目的操作数顺序 ...
- 动态负载均衡(Nginx+Consul+UpSync)
Http动态负载均衡 什么是动态负载均衡 传统的负载均衡,如果Upstream参数发生变化,每次都需要重新加载nginx.conf文件, 因此扩展性不是很高,所以我们可以采用动态负载均衡,实现Upst ...
- <ZZ>linux yum命令详解
http://www.cnblogs.com/chuncn/archive/2010/10/17/1853915.html yum(全称为 Yellow dog Updater, Modified)是 ...
- ACM应该学什么(知乎学长)
网络上流传的答案有很多,估计提问者也曾经去网上搜过.所以根据自己微薄的经验提点看法. 我ACM初期是训练编码能力,以水题为主(就是没有任何算法,自己靠动脑筋能够实现的),这种题目特点是麻烦,但是不难, ...
- 进程优先级、nice值
进程cpu资源分配就是指进程的优先权(priority).优先权高的进程有优先执行权利.配置进程优先权对多任务环境的linux很有用,可以改善系统性能.还可以把进程运行到指定的CPU上,这样一来,把不 ...