【jQuery基础学习】11 jQuery性能简单优化

关于性能优化

• 合适的选择器
  • $("#id")会直接调用底层方法，所以这是最快的。如果这样不能直接找到，也可以用find方法继续查找
  • $("p")标签选择器也是直接调用底层方法，所以是第二选择
  • $(".class")也是直接调用底层方法，不过IE8及更早版本不支持getElementByClassName，它会采用DOM搜索方式，所以会影响性能。
  • $("[attribute=value]")采用DOM搜索的方式，很多现代浏览器支持querySelectorALL方法，但不同浏览器上性能也有所区别。总的来说，用这种方式定位DOM元素，性能不太理想。
  • $(":hidden")这种伪选择器方式，同样没有在本地js方法中实现。同样DOM搜索
  • 以上五种方法性能依次而降，所以尽量用ID选择器，并且给选择器指定上下文。如果你强行要用DOM搜索方式的选择器，建议先用个ID选择器缩小范围，再用find函数进一步搜索。
• 缓存对象
  • 尽量去用链式操作，而不是多次使用相同的选择器，然后再进行不同的操作
  • 如果不能用链式操作，可以考虑将需要用到的jQuery对象放到一个全局对象里。这样不用每次使用都去查找DOM。
• 循环时的DOM操作
  • 不要去循环进行DOM插入的操作，就是$("#id").append及类似的操作，这样会很耗性能。所以可以考虑先把一大串这样的操作，用拼接HTMl字符串的方式，当做字符串先拼好，然后再插入。
• 数组方式使用jQuery对象
  • jQuery选择器返回的是一个jQuery对象，如果你是在用一个实际上是数组意义的结构的话，那么在性能上讲，可以用for和while去代替$("#id").each()的写法。
• 事件代理
  • 尽量去少绑定事件，否则也会带来负面性能影响。当绑定多个事件时，可以考虑是否能够通过它们共同的父级去只绑定一个事件

    //可以想一想下面这种情况，如果是一个大型表格，那么会绑定N次事件。
    $('#myTable td').click(function(){
        $(this).css('background','red');
    });
    //利用事件的冒泡机制去代替上面那种拙劣的写法
    $('#myTable').click(function(e){
        var $click=$(e.target);//e.target捕捉触发的目标元素
        $click.css('background','red');
    });
    //当然我们还可以用on来进行更简单的事件绑定
    $('#myTable').on('click','td',function(){
        $(this).css('background','red');
    });

• 可以考虑用自定义jQuery插件去取代自己的重复代码
• 使用join()去取代+来拼接字符串
• 可以考虑在更需要性能的地方使用原生js代码
• 合理使用HTML5的data属性

  <div id="d1" data-role="page" data-last-value="43" data-options='{"name":"Troy123"}'></div>
  
  $("#d1").data("role");//"page"
  $("#d1").data("lastValue");//43
  $("#d1").data("options").name;//"Troy123"

最后作者还写了一些使用jQuery的技巧，其实也就是一些解决方案。

好吧，更通俗的讲就是可以在网上搜一搜，然后直接复制粘贴的代码。

我觉得这些都很次要，所以只是自己看完就没有贴上来了。毕竟当你遇到这些问题的时候百度一下copy就好了。