JQ 优化处理

Posted 2020-07-22 小~牧

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQ 优化处理相关的知识，希望对你有一定的参考价值。

JQ 优化(一)

选择器优化

　　　　(一) $("#id")直接调用底层 document.getElementById();方法如果这样无法找到你的元素,可以使用$("#id").find("div"),来精确查找到所需要的元素,这种直接根据ID选择器来找寻元素,性能最佳

　　　　(二)如果id选择器无法满足需求,用标签选择器查询也是不错的$("p"),$("div")....性能优化的第二选择;他直接调用document.getElementByTagName()来定位DOM 元素;

　　　　(三)使用类选择器.class这种有些复杂,相比较老版本IE8以前(包括IE8)只能靠DOM 搜索方式,无疑来说有较大影响.所以建议避开$(".class")这种,可能对性能产生很大影响的方式

　　　　(四)使用$("[attribute=value]"),$("input name["datepickter"]"), 虽然现大多浏览器已经支持querySelectorAll()方法,但是用这种方法来定位DOM,性能不是很理想

　　　　(五)使用$(":hidden")伪选择器来收索时,最好先确定一个父元素,先确定一个范围,负责很慢~如$("#content").find(":hidden");

....综上所诉,性能由上到下

　　2 . 使用缓存对象优化JQ

　　　　通常情况下我们查找DOM会写成

　　　　　　$("button[name=‘setIPInf‘]").bind("click", function (e) {...});

　　　　　　$("button[name=‘setIPInf‘]").css("background","red");

　　　　　　$("button[name=‘setIPInf‘]").fadeIn("slow");

　　　　　这种情况,代码写的非常正确,但是JQ在每次执行一行代码的时候都会产生一个DOM,创建多个JQ对象;建议以下写法

　　　　　　var $setIPInf=$("button[name=‘setIPInf‘]")

　　　　　　$setIPInf.bind("click", function (e) {...});

　　　　　　$setIPInf.css("background","red");

　　　　　　$setIPInf.fadeIn("slow");

　　　　　　再优化:

　　　　　　var $setIPInf=$("button[name=‘setIPInf‘]")

　　　　　　$setIPInf.bind("click", function (e) {...})

　　　　　　　　　　.css("background":"red"})

　　　　　　　　　　.fadeIn("slow");

　　　　减少DOM产生,可以大量优化JQ代码;

　　3.循环时的DOM操作;

　　　　　特别在UL TR 这些需要循环的地方,代码不当,对JQ 性能影响很大;

　　　　例子:

　　　　　　var top_100_list=[....]; //假设创建一个100独一无二元素,字符串

　　　　　　$mylist=$("maylist"); //JQ选择到<ul>标签;

　　　　　　for(var i=0;i<top_100_list.length;i++){

　　　　　　　　$mylist.append("<li>"+top_100_list[i]+"</li>")

　　　　　　};

　　　　　　新修改后

　　　　　　　var top_100_list=[....];
        　　　　　　$mylist=$("maylist");
        　　　　　　top_100_li="";
        　　　　for(var i=0;i<top_100_list.length;i++){
           　　　　top_100_li+="<li>"+top_100_list[i]+"</li>"
        　　　　};

　　　　　　$mylist.html(top_100_li);

　　　　　　千万别写成

　　　　　　for(var i=0;i<100;i++){

　　　　　　　　var $mylist=$("maylist");

　　　　　　　　$mylist.append("<li>"+top_100_list[i]+"</li>")

　　　　　　};

　　4.在使用JQ数组的时候;

　　　　很多人在使用JQ数组的时候,都喜欢用$.each();单单从性能上来讲并没有简单的for和while语句来的快

　　　　        $.each(array, function (i) {
            　　　　array[i]=i;
        　　　　})

　　　　优化后:
　　　　　　var array=new Array();
        　　　　　　for(var i=0;i<array.length;i++){
           　　　　　　 array[i]=i;
       　　　　}

　　　　检查id是否为cotent;

　　　　var $content=$("#content");