jQuery性能优化与技巧

矫情吗；* 2022-09-28 15:30 314阅读 0赞

1.使用最新版本的jquery库

jQuery新版本会对旧版本进行优化和Bug修复。但是使用时要测试一下，可能有些代码改了。

2.使用合适的选择器

$(“\#id”)：使用id来定位DOM元素是最佳提高性能的方式。因为jQuery是直接调用document.getElementById()。如果id找不到可以添加find()来缩小范围(

$('#id').find('div').css(xxx=xxxx)

)。所以最好先从id来着元素。

$('p')、$('div')：这是第二选择。因为jQuery直接调用document.getElementByTagName()。

$('.class')：ie9以上是使用document.getElementByClassName().ie8及其以下使用dom搜索方式实现会影响性能。有选择性的使用

$("\[attribute=value\]")：大多数都是使用搜索方式来实现。尽量避免。

$(":hidden")：需要搜索每一个元素来定位选择器。要使用最好先定位父元素

性能从上往下降低。

3.缓存对象

$('#id').find('div').css(xxx);
    $('#id').find('div').hide();
    $('#id').find('div').show();
    改为
    var $a = $('#id').find('div');
    $a.css(xxxx);
    $a.show();
    $a.hide()

因为每一个选择器都会创建jQuery对象。不要让相同的选择器在代码里出现多次。

4.循环时的DOM操作

var a=[...];
    var $b = $('#abc');
    for(int i=0;i<a.length;i++){
          $b.append("<li>hello,a[i]</li>");
    }
    改为
    var a=[...];
    var b = "";
    for(int i=0;i<a.length;i++){
        b+="<li>hello,"+a[i]+"</li>";
    }
    $("#abc").html(b);

5.数组方式使用jQuery对象

在性能方面建议使用for或while来处理，不要使用$.each();

6.事件代理

$("#table td").bind("click",function(){...})//绑定了所有的td
    改为
    $("#table").bind("click",function(event){
         $(event.target).css();//只绑定了触发事件的元素
    })

7.把重用的代码定义为插件

(function($){
        $.fn.pluginName = function(){
              //code
         }
    })(jQuery);

8.使用join()来拼接字符串

创建一个数组，把字符串传进去，然后调用  数组名.join('')来拼接字符串。会比+好一点。

9.合理一用html5的Data属性

<div id="id"  data-url=""  data-option="{'name':'jack'}" data-last-value=""/>
    var $a = $("#id");
    $a.data("url");
    $a.data("option").name;
    $a.data("lastValue");

10尽量使用原生的javaScript方法

$("#abc").is(":checked");
    $("#abc").get(0).checked;
    $(this).css("color":"red");
    this.style.color="red";
    $("<p></p>")
    $(document.createElement("p"))

jQuery技巧

1.禁用页面右键菜单

$(function(){
       $(document).bind("contextmenu",function(e){return false;});
    });

2.输入框文字获取和失去焦点

3.获取选择的下拉框

$("#xxx option:selected")