jQuery性能优化和最佳实践

（一）优先使用ID与标记选择器

ID>TAG>class

错误：

   1.避免ID修饰ID$

• ("#divTip #divShow")

   2.避免使用tag或class修改ID号

• $(".MyCladd #divShow")先执行遍历，后进行匹配

   3通过元素属性，尽力使用tag修饰，可以加快访问速度

• div[title='temp']

(二)使用jQuery对象缓存

1. 先使用变量保存对象名，再通过变量操作

• 定义的变量再其它函数中也能使用，可以定义为全局的变量window.变量名={“”：“”}

     

 

•   避免变量名冲突使用“$”命名
• 同一个DOM对象尽量采用链式操作

（三）给选择器一个上下文

$(expression,[context])

 

 

 (四)target优化冒泡现象

如果多个元素触发同一个事件，可以借助target()方法获取触发事件的元素，并将事件绑定到父级元素上，通过冒泡现象扩展到子元素

 （五）使用data()方法缓存数据

• 使用全局或局部变量可以保存数据，但不能进行数据的缓存而且不依附于某元素自身
• data()方法可以针对元素定义数据，在元素中获取数据，从而避免数据被循环引用
• 格式

1. data([name])
2. data(name,value)
3. removeData(name)

          4.data()可以存储以“名称/值”格式展示JSON数据

       

        5.data()存储的数据会随操作变化越来越大，要及时处理

（六）解决jquery和其他库冲突

• jQuery.noConflict()将$的使用权过渡到其他JS库
• 使用权变更后只能通过jQuery访问jQuery对象

（七）jQuery在其他库前导入

• jQuery优先于其它库导入，无需使用jQuery.noConflict()函数，就可以将"$"的使用权转让给其他库，jQuery处理事物时全部使用jQuery即可

（八）jQuery在其他库后导入

• 需引入jQuery.noConflict()实现"$"变更
• 在jQuery中还想使用"$"，可通过

1. 自定义含其他符号的快捷键

 

          2.在jQuery函数内部继续使用"$"

 

 （九）使用子查询优化选择器性能

•   直接使用find()查找，操作性能比较低
• 方法：先查询最外层元素，保存，再根据最外层查找近一层的数据.......

• （十）减少对DOM元素直接操作

           （十 一）DOM对象和jQuery对象

•        不能使用DOM对象调用jQuery对象
• 转换：jQuery-->DOM  调用jQuery提供的[index]和get(index)方法
•             DOM-->jQuery  $()包装