JQuery优化之 -- 正确使用选择器

一、访问DOM元素最快速度排序：

1. 通过ID
2. 通过元素标签（tag）
3. 通过类别（Class）

二、从性能方面选择器可以分为三类

　　1）ID和元素标签选择器，如下面代码所示：

$('#id').htm();
$(input').css('background': 'red');

　　在执行这类选择器的过程中，JQuery内部将自动调用浏览器的原声方法，且浏览器都支持这些方法，因此该类选择器在执行时，速度最快；

　　2) 元素类型选择器

$('.class').html("");

　　在执行该类选择器的过程中，由于各类浏览器对该类选择器的原生方法不尽相同，如IE系列浏览器中，就无法调用类别的原生方法，速度较慢，而FireFox、Chrome、Safari、Opera浏览器都可以直接调用getElementByClassName()原生方法，因此速度要快很多

　　3） 伪类型和属性选择器，如以下代码所示：

$(":input").length; //获取所有input类型的元素总数
$("div[title='A']").html();

　　在执行该类选择器的过程中，由于浏览器没有对应的原生方法，因此速度最慢；建议尽量减少使用伪类型及属性选择器去定位页面元素，少量在遍历时使用选择器，从而提升页面执行速度，不断优化代码的性能；

注意事项：

1. 虽然ID号访问页面中的元素最快，但是避免重复修饰，即使用ID号修饰ID号，错误代码如下： 

   var eleName = $('#divTip #divShow');

2. 避免使用tag或class来修饰ID号，这样代码先执行遍历，后进行匹配，其错误代码如下

   var eleName = $(".myClass #divShow");

   或者

   var eleName = $("div #divShow")；

3. 如果是通过元素的属性访问，尽量使用tag来修饰进行访问，优点：加快访问速度，正确代码如下：

   var eleName = $("div[title='tmp']");