• jQuery优化方案


    1.请从ID选择器开始
        如果你要找的dom对象已经有ID了,你直接使用ID选择器找到它吧,因为你可以想象的到,jQuery使用的是JavaScript的getElementById()方法,原生态的方法总是最快的。如果你要找的dom对象没有ID或者你要选择多个dom对象,请从最近的有ID的对象开始继承吧。如$(“#nearid input”)。这样做可以减少DOM遍历和循环的次数。

    2.在class前使用标签名
        jQuery中第二快的选择器是标签选择器,因为它来自原生的getElementsByTagName()方法。你要查找一个class名为“myclass”的div,请使用$(“div.myclass”);当然为了缩小dom查找范围你也可在选择器前加上一个div附近的id,如:$(“#nearid div.myclass”);但请注意不要使用标签来修饰ID,会先遍历标签,然后再匹配到对应的id。使用ID来修饰ID,也是画蛇添足。

    3.给选择器指定前后文
        这个其实跟前面两条优化的思想是一样的,就为了缩小遍历的范围:$(“.myclass”,”#nearid”);

    4.请缓存jQuery对象吧
        如果你要多次使用同一个jQuery对象,不要让同一个选择器在代码中多次出现。你可以这样:
    var $sel = $(“nearid div.myclass”);$sel.css(“border”,”1px”);$sel.bind(“click”,function(){ … });$sel.fadeOut();
    当然你也可以使用链式操作:$sel.css(“border”,”1px”).bind(“click”,function(){ … }).fadeOut();

    5.请不要直接对DOM操作
        如:
    var $sel = $(“ul”);for(var i=0;i<10000;i++){
     $sel.append(“<li>”+i+”</li>”);
    }
    使用prepend(),append(),after()其实还是很慢的,你可以这样做:
    var $sel = $(“ul”);
    var temstr = “”;
    for(var i=0;i<10000;i++)
    {
     temstr = “<li>”+i+”</li>”;
    }
    $sel.html(temstr);

    6.充分利用Javascript的冒泡特性
        每个js事件都会冒泡到父节点,当我们在给多个元素处理,我们可以给其父对象绑定事件就可以了,如我们要动态改变table中tr的背景色:
    $(“table”).mouseover(function( e ){
        var $clicked = $(e.target); $clicked.css(“backgroud”,”#ccc”);
    });
    这种方式的优点终于它只需要为table绑定一个事件,而不是为每一个tr绑定一个事件。

    7.适量使用$(document).ready
        $(document).ready可是是我们最初学习jQuery的时候最先接触的一个函数了,他可以在页面还处于渲染的时候就执行。但是如果你把什么都放在这里面,可能会导致页面加载的时候CPU占用过高,特别是在IE6下,效果很明显。那怎么办呢?可以使用$(window).load 事件的访问来替代它。Load事件是在页面下载完成之后才触发的。
    $(window).load(function(){ 
        // 页面完全载入后才初始化的jQuery函数. 
    });

    8.尽量减少live的使用
        这个方法确实好用,但是却很耗资源。因为它可能是类似定时器一样每隔一定时间就去DOM对象里查找绑定对象。替代方案就是你在动态改变了DOM后,请重新绑定要操作新增元素的方法。

    9.使用data()存储临时变量

        在函数内我们通常会定义一个临时变量,jQuery提供了data(),它是基于key/val,使用data方法可以避免在DOM中存储数据,我们何不去使用它呢?

    10.减少each的使用

        在要使用each的时候,何不该有for来替代它呢?因为原生函数总是比辅助组件更快。

    11. 返回false值
        
        在你的函数结束时加上一句“return false;”使很有必要的,因为你会发现在很长的页面中,如果你没有加上这句,它会跳到页面的顶部,这样用户体验是很不爽的。

  • 相关阅读:
    Android -- 自定义View小Demo,动态画圆(一)
    Android -- 自定义View小Demo,绘制四位数随机码(一)
    Android设计模式---观察者模式小demo(一)
    Android -- 自定义View小Demo,绘制钟表时间(一)
    Android -- 自定义View小Demo,关于Rect绘制Android机器人(一)
    Android -- 自定义View小Demo,关于Path类的使用(一)
    Android -- 自定义View小Demo(一)
    Android -- 自定义View(一)
    自定义Scrollview--实现仿淘宝Toolbar透明度渐变效果
    究竟什么是技术——非科班程序员两年的内心挣扎
  • 原文地址:https://www.cnblogs.com/codebean/p/2059905.html
Copyright © 2020-2023  润新知