zoukankan      html  css  js  c++  java
  • [转]整理jquery使用好习惯

    1.选择器Selector的使用
    1)使用id定位性能最好

     
    1.$("#id")

    2)使用标签名定位,性能其次

     
    1.$("p"),$("div"),$("input")

    3)使用.class方法对于IE8或者更早版本来说性能很差

     
    1.$(".class")

    4)属性定位性能极差

     
    1.$("[attribute=value]")
    2.$(":hidden")

    因此组合使用提高性能,减少对dom遍历

     
    1.$("#gbdiv").find(":hidden")

    2.链式调用
    1)坏习惯

     
    1.$("#gbdiv").hide();
    2.$("#gbdiv").css("color", "#202020");
    3.$("#gbdiv").show();

    2)好习惯

     
    1.$("#gbdiv").hide()
    2.  .css("color", "#202020")
    3.  .show()

    好处在于你不用多次调用$("#gbdiv"),当然,如果你非要这样写,建议你考虑使用缓存方式

    3.缓存

     
    1.var gbin1=$("#gbdiv");
    2.gbin1.hide();
    3.gbin1.css("color", "#202020");
    4.gbin1.show();

    4.循环语句
    1)坏习惯

     
    1.var data = ["Saab","Volvo","BMW"];
    2.$.each(data, function(i, item){
    3.  var newitem='<div>' + item + '</div>';
    4.  $("#gbcontainer").append(newitem);  
    5.});

    以上代码中,我们将每一个新添加的tag都作为一个节点添加到容器ID中,实际上jQuery操作节点的成本也不低,更好的方式是尽可能的减少DOM操作

    2)好习惯

     
    1.var data = ["Saab","Volvo","BMW"];
    2.var tmp = ''
    3.$.each(data, function(i, item){
    4.    tmp +='<div>' + item + '</div>';
    5.});
    6.$("#gbcontainer").append(tmp);  

    3)对于字符串特长的,字符串相加在IE6会有性能问题,那就如下

     
    1.var data = ["Saab","Volvo","BMW"];
    2.var tmp = []; 
    3.$.each(data, function(i, item){
    4.    tmp.push('<div>' + item + '</div>')
    5.});
    6.$("#gbcontainer").append(tmp.join(' '));  

    5.事件代理
    假如gbin1里有1000个div,添加click事件
    1)坏习惯

     
    1.$('#gbin1').find('div').click(function() {
    2.    ......
    3.});

    你将绑定1000个事件

    2)好习惯

     
    1.$('#gbin1').on('click','div',function() {
    2.    ......
    3.});

    使用.on方法,帮助你有效的优化性能:

  • 相关阅读:
    httprunner运行报错问题:base url missed
    Locust性能模块浅谈
    如何对HTMLTestRunner 进行输出print 进行修改
    网易UI自动化测试工具Airtest中导入air文件中的方法
    如何在 idea 2019.3.4 中导入Github的项目并使用Git同步项目?
    Win10 Microsoft Store 微软商店 Error 0x00000193 解决方法
    读书笔记 |《计算机组成结构化方法》-01
    [MR] MapReduce 总结、回顾与吐槽
    [Git] 极简Git——关于Git的简要回顾
    [FlyWay] FlyWay工作原理
  • 原文地址:https://www.cnblogs.com/duelsol/p/3375493.html
Copyright © 2011-2022 走看看