• jquery 功能优化


    1.总是从ID选择器开始继承。
    在jQuery中最快的选择器是ID选择器,因为它直接来自于javascript的getelementById()方法。
    例如:
    <div id="warp">
    <div id="content">

    <ul>

    <li>1</li> 

    <li>2</li> 

    <li>3</li>
    </ul>
    <input type="button" class="input_btn" id="submit" value="submit" />

    </div>
    </div>
    如果使用 $("#content .input_btn")则会很大的影响jQuery的性能,最快的效率是使用$("#submit")。如果涉及到DOM遍历循环时,未来提供性能,建议使用最近的ID选择器。如$(#content li)。

    2.在class前使用tag(标签名)
    在jQuery中第二快的选择器是标签名。和ID选择器一样它来自于javascript的getElementsByTagName_r()方法。
    使用方法如:$("div");
    使用标签名选择器需要注意几点:
    1).标签名或不不用跟随ID,如$("div #content")。
    2).不用在ID后面使用ID,如$("#demo #line")。

    3.将jQuery对象缓存起来
    就是要告诉我们,要将jQuery对象使用变量缓存起来。如下代码:
    $("#content .btn p").css(.........
    $("#content .btn p").css(.........
    $("#content .btn p").show().........
    这样是不好的编写,正确编写如下:
    var $demo=$("#content .btn p");
    $demo.css(......
    $demo.css(......
    $demo.show().....
    永远不要让相同的选择器出现在同一段代码中

    4.直接对DOM操作进行限制
    这里的基本思想是在内存中建立你所需要的东西,然后更新DOM。
    如循环添加DOM节点:
    for(var i=0;i<100;i++){
        $("#showli").appent("<li>"+i+"</li>");
    }
    这是不好的编写方法,正确的编写方法如下:
    var html="";
    for(var i=0;i<100;i++){
      html+="<li>"+i+"</li>";
    }
    $("#showli").appent(html);

    5.冒泡
    如果在编写代码中你需要为很过个标签添加同一个事件是,那么你只需要对它的父标签添加一次事件。
    如为表格里的td标签添加点击事件:
    $("#mytable td").onclick(function(){
        //代码段,对td进行操作
        ......
    });
    则可以改写为:
    $("mytable").onclick(function(e){
        var $tag=$(e.target);
        //代码段,对$tag进行操作
    });

    6.推迟到$(windwo).load
    我们通常把任何东西挂到$(function(){});里面,它可以再也没渲染时就执行。往往里面的函数体会影响到也没一直在加载状态。这时你可以使用$(window).load(function(){});方法这减少也没再加载时暂用的CUP。一些特效、动画、拖放等等都适合使用。

    7.压缩javascript
    使用脚本压缩工具压缩和最小化你的javascript文件。在压缩之前要确保代码的正确性。否则页面会出现js报错。

    8.给选择器一个上下文
    jquery中可以指定上下文:
    jquery(expression,context),它可以缩小选择器的搜索范围,减少时间,提高效率。
    如:$(".a_hover",$("#mycontent"));

    9.慎用.live()方法
    如果可以,尽量不要使用该方法。它可以为在代码执行时新增的元素动态绑定事件,但是比较占用资源,所以尽量不要使用。

    10.子选择器和后代选择器
    后代选择器如:$("#mycontent p");它选择ID为mycontent里面的所有元素。
    子选择器如:$("#mycontent > p");它只选择ID为mycontent的子元素。
    在实际应用中如果只要求获取子元素,那么就不应该使用后代选择器。

  • 相关阅读:
    如何实现Canvas图像的拖拽、点击等操作
    HTML5新增核心工具——canvas
    Java API 之 Object
    浅显回顾 Java 面向对象的最后方面的知识
    草叶集 | 在看惠特曼的大路之歌时的一些想法
    关于 static 和 final 的一些理解
    面向对象中的一些概念的理解
    关于前面知识的一些试题
    关于方法的一些浅见和对象的一些理解
    数组的一些应用场景
  • 原文地址:https://www.cnblogs.com/gxlinhai/p/4263222.html
Copyright © 2020-2023  润新知