选择器性能比较

http://www.cnblogs.com/aaronjs/p/3337531.html

ID选择器是速度最快的,这主要是因为它使用JavaScript的内置函数getElementById();

其次是类型选择器,因为它使用JavaScript的内置函数getElementsByTag();

速度最慢的是Class选择器,其需要通过解析 HTML文档树,并且需要在浏览器内核外递归,这种递归遍历是无法被优化的。

getElementById 上下文只能是HTML文档 

浏览器支持情况:IE 6+, Firefox 3+, Safari 3+, Chrome 4+, and Opera 10+;

getElementsByName,上下文只能是HTML文档

浏览器支持情况:IE 6+, Firefox 3+, Safari 3+,Chrome 4+, and Opera 10+;

getElementsByClassName

浏览器支持情况:IE 9+, Firefox 3+, Safari4+, Chrome 4+, and Opera 10+

getElementsByTagName

上下文可以是HTML文档,XML文档及元素节点。

高级API:

浏览器支持情况:IE 8+, Firefox 3.5+, Safari 3+, Chrome 4+, and Opera 10+;

querySelector 将返回匹配到的第一个元素,如果没有匹配的元素则返回 Null
querySelectorAll 返回一个包含匹配到的元素的数组,如果没有匹配的元素则返回的数组为空

浏览器内置的css选择符查询元素方法,比getElementsByTagName和getElementsByClassName效率要高很多

前者接收一个CSS选择器字符串参数并返回一个NodeList类数组对象而不是返回HTML集合,后者只返回符合查询条件的第一个节点。很遗憾IE6、7不支持这两个API。

时间: 2024-10-28 21:01:22

选择器性能比较的相关文章

CSS选择器性能差异

(1)选择器是从右到左进行规则匹配. (2)选择器的执行效率从高到低排序: ID选择器:         class选择器:       标签选择器: 相邻选择器 +:      子选择器 >:          后代选择器: 通配符选择器 *:     属性选择器 []:      伪类选择器 :: (3)选择器性能的提升方法: 1)避免使用通配符选择器: 2)避免使用标签或class选择器限制ID选择器: 3)避免使用标签限制class选择器: 4)避免使用多层标签选择器.用class选择器

CSS选择器 - 性能的探究及提升

[本博客为原创:http://www.cnblogs.com/HeavenBin/]  前言: 在工作中编写CSS样式表时随着选择器层数的增加总会看到选择器又丑又长的情况,利用工作之余研究从其命名再到如何提高其性能.本博客将以"通俗易懂"."简洁""的方式来探究CSS选择器的性能,以及叙述总结如何提升CSS选择器的性能.(2017-8-20) 一. CSS选择器性能是如何消耗的? 工作原理:浏览器利用CSS选择器来匹配文档元素. 工作流程:例如 #hd .

前端性能优化:CSS 选择器性能

CSS选择器效率: CSS选择器具有高效的继承性,引用Steve Souders的话, CSS选择器效率从高到低的排序如下: ID选择器 比如#header 类选择器 比如.promo 元素选择器 比如 div 兄弟选择器 比如 h2 + p 子选择器 比如 li > ul 后代选择器 比如 ul a 7. 通用选择器 比如 * 属性选择器 比如 type = "text" 伪类/伪元素选择器 比如 a:hover 组合选择器 你可以有一个标准的选择器比如 #nav,来选择任何带

jQuery性能优化与最佳实践

10.1 优化选择器的执行速度 10.1.1 优先使用ID与标记选择器 一般的执行速度比较 ID > TAG > CLASS > ATTRIBUTE 10.1.2 使用jQuery对象缓存 所谓对象缓存,就是再使用jQuery对象时,先尽量使用变量保存jQuery对象 10.1.3 给选择器一个上下文 $(expression, [context]) 10.2 处理选择器中不规范元素标志 10.2.1 选择器中含有特殊符号 10.2.2 选择器中含有空格字符 $(".class

Jquery学习--性能优化建议

一.选择器性能优化建议 1. 总是从#id选择器来继承 这是jQuery选择器的一条黄金法则.jQuery选择一个元素最快的方法就是用ID来选择了. 1 $('#content').hide(); 或者从ID选择器继承来选择多个元素: 1 $('#content p').hide(); 2. 在class前面使用tag jQuery中第二快的选择器就是tag选择器(如$(‘head’)),因为它和直接来自于原生的Javascript方法getElementByTagName().所以最好总是用t

编写高效的css选择器

css选择器的匹配规则是从右向左.和常规思维不同. css选择器限制个数最好不超过4层. Google 资深web开发工程师 Steve Souders 对 CSS 选择器的执行效率从高到低做了一个排序: 1.id选择器(#myid) 2.类选择器(.myclassname) 3.标签选择器(div,h1,p) 4.相邻选择器(h1+p) 5.子选择器(ul > li) 6.后代选择器(li a) 7.通配符选择器(*) 8.属性选择器(a[rel="external"]) 9.

jQuery的性能优化,你知道几条

我一直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些.找了很多文章后,我决定将最好最常用的一些优化性能的建议列出来 ================================================================= 一.选择器性能优化建议 ================================================================= 1. 总是从#id选择器来继承 这是jQuery选择器的一条黄

CSS选择器的优化

前面花了几个篇幅着重介绍了CSS的选择器的使用,我将其分成三个部分:CSS3基本选择器.CSS3属性选择器详解以及CSS3伪类选择器详解.那么今天我主要想和大家一起来学习——CSS选择器方面的性能优化.因为对性能这一块一直都是很弱的,所以今天先从选择器开始入手,加强自己.如果你也感兴趣那就跟我一起来吧. 浏览器如何识别你的选择器 首先我们需要清楚,浏览器是如何读取选择器,以识别样式,并将相应的样式附于对应的HTML元素,达到美化页面的效果.Chris Coyier曾在<Efficiently R

jquery 性能优化的28个建议[整理]

一.选择器性能优化建议  1.总是从#id选择器来继承这是jquery选择器的一条黄金法则.jquery选择一个元素最快的方法就是用ID来选择. $('#content').hide(); 或者从ID选择器继承来选择多个元素: $('#content p').hide(); 2. 在class前面使用tag jQuery中第二快的选择器就是tag选择器(如$(‘head’)),因为它和直接来自于原生的Javascript方 法getElementByTagName().所以最好总是用tag来修饰