关于jQuery的一些优化方法

1、总是从ID选择器开始继承。在jQuery中最快的选择器是ID选择器,因为它直接来自于Javascript的getElementById()方法。第二快的是tag(标签)选择器,它来自原生的getElementsByTagName()。

  - 选择单个元素,我们可以使用tagName来限制class名,当然也可以结合就近的ID。

  - 选择多个元素,必然会涉及到DOM遍历和循环,为了提高性能,建议从最近的ID开始继承。

2、养成将jQuery对象缓存进变量的习惯。

  记住,永远不要让相同的选择器在你的代码里多次出现。同一个对象的多次操作,可以使用链式操作。

3、当要进行DOM插入时,将所有元素封装成一个元素。

  这里的基本思想是在内存中建立你确实想要的东西,然后更新DOM。直接的DOM操作很慢,尽可能少的去更改HTML结构。

4、使用直接函数,而不是使用与之等同的函数。

  为了获得更好的性能,应该用直接函数。如.ajax(),而不是.get(),.getJSON(),.post(),因为后面几个将会调用$.ajax()。

5、采用jQuery内部函数data()来存储状态。

  存储:$("#home").data("name","value");

  调用:$("#home").data("name");

6、使用jQuery utility函数。

  如:isFunction(),isArray(),$.each()。

7、使用Event Delegation。

  当在一个容器中有许多节点,你想对所有的节点都绑定一个事件,delegation很适合这样的场景。使用delegation,我们仅需要在父级元素绑定事件,然后查看哪个子节点(目标节点)触发了事件。

  $("#menu").delegation("a","click",function(){

    $(this).toggleClass("active");

  })

8、如果给15个以上的元素添加样式时,直接给DOM元素添加style标签。

  要给少数的元素添加样式,最好的方法是使用jQuery的css()函数。然而给15个以上的较多的元素添加样式时,直接给DOM元素添加style标签更有效些。这个方法可以避免在代码中使用硬编码(hard code)。

  $('<style type="text/css">.home{background:#000;}</style>').appendTo('head');

9、

原文地址:https://www.cnblogs.com/meway/p/5832370.html