代码优化是一个很重要的开发态度,一点点的优化对于程序来讲可能是微乎其微的,但是把所有的一点都加起来就能够达到水滴石穿的效果,所以要在平时的开发过程中养成优化代码的好习惯。

1. 检测元素是否存在

避免对当前页面上不存在的元素执行操作

1 var ele = $("#somethingThatisNotHere");  
2 if ( ele[0] ) {  
3    ele.text("Some text").slideUp(300).addClass("editing");  
4 }

2. 使用id取代class

使用高效的选择器,jQuery是使用JavaScript自身的getElementById方法来按照id查找元素。而当使用class选择器来查找元素时,jQuery是使用自身的方法来获取元素(至少在部分老的浏览器中是如此)。

我们将使用不同的选择器来寻找第二个li元素。然后我们对每种选择器进行测试,看看他们在性能上的差异。第一种办法,也是最简单的,我们直接使用selected class来指向元素,然后我们看看Firebug profiler返回的结果。

1 console.profile() ;  
2 $(".selected");  
3 console.profileEnd();

返回的结果是0.30毫秒。接下来我们添加一个标签名,来缩小范围。这次我们通过使用document.getElementsByTagName来指定selected的DOM元素,以此缩小查找范围。

1 console.profile() ;  
2 $("li.selected");  
3  console.profileEnd();

成绩是 0.291毫秒,减少了0.02毫秒。因为我们是在Firefox中测试的,这里的提高有点微不足道,但是它在老的浏览器中所带来的性能提供却是显著的,像IE6浏览器。

接下来,我们从他的父元素的ID开始查找:

1 console.profile() ;  
2 $("#someList .selected");  
3 console.profileEnd();

成绩是:0.283毫秒。现在让我们声明更具详细点,我们在祖先元素ID后面指定元素类型。

1 console.profile() ;  
2 $("#someList li.selected");  
3 console.profileEnd();

成绩是:0.275毫秒。又减少了一点时间。最后让我们直接通过ID来指向元素:

1 console.profile() ;  
2 $("#mainItem");  
3 console.profileEnd();

成绩是:0.165毫秒。提高惊人!这个测试向你展示了使用JS自带方法的执行速度有多快。注意虽然许多新型的浏览器可以享受getElementsByClassName带来的好处,但是老的浏览器不行——这回会导致代码效率急剧下降。所以在写代码的时候,牢记这点。

3、避免查询浪费

1 $("#mainItem").hide().val("Hello").html("Oh, hey there!").show();

jQuery代码性能优化的更多相关文章

  1. Python 代码性能优化技巧(转)

    原文:Python 代码性能优化技巧 Python 代码优化常见技巧 代码优化能够让程序运行更快,它是在不改变程序运行结果的情况下使得程序的运行效率更高,根据 80/20 原则,实现程序的重构.优化. ...

  2. JavaScript代码性能优化总结

    JavaScript 代码性能优化总结 尽量使用源生方法 javaScript是解释性语言,相比编译性语言执行速度要慢.浏览器已经实现的方法,就不要再去实现一遍了.另外,浏览器已经实现的方法在算法方面 ...

  3. 针对于Java的35 个代码性能优化总结

    针对于Java的35 个代码性能优化总结前言代码优化,一个很重要的课题.可能有些人觉得没用,一些细小的地方有什么好修改的,改与不改对于代码的运行效率有什么影响呢?这个问题我是这么考虑的,就像大海里面的 ...

  4. jQuery代码性能小细节

    选择器Selector的使用 $("#id")使用id来定位DOM元素无疑是最佳提高性能方式,因为jQuery底层将直接调用本地方法document.getElementbyId( ...

  5. <转载> Jquery的性能优化-实用!

    我一直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些.找了很多文章后,我决定将最好最常用的一些优化性能的建议列出来 ========================= ...

  6. Java开发代码性能优化总结

    代码优化,可能说起来一些人觉得没用.可是我觉得应该平时开发过程中,就尽量要求自己,养成良好习惯,一个个小的优化点,积攒起来绝对是有大幅度效率提升的.好了,将平时看到用到总结的分享给大家. 代码优化的目 ...

  7. [转] Python 代码性能优化技巧

    选择了脚本语言就要忍受其速度,这句话在某种程度上说明了 python 作为脚本的一个不足之处,那就是执行效率和性能不够理想,特别是在 performance 较差的机器上,因此有必要进行一定的代码优化 ...

  8. Python代码性能优化技巧

    摘要:代码优化能够让程序运行更快,可以提高程序的执行效率等,对于一名软件开发人员来说,如何优化代码,从哪里入手进行优化?这些都是他们十分关心的问题.本文着重讲了如何优化Python代码,看完一定会让你 ...

  9. Java开发中程序和代码性能优化

    现在计算机的处理性能越来越好,加上JDK升级对一些代码的优化,在代码层针对一些细节进行调整可能看不到性能的明显提升, 但是我觉得在开发中注意这些,更多的是可以保持一种性能优先的意识,对一些敲代码时间比 ...

随机推荐

  1. bzoj 2326 矩阵快速幂

    思路:矩阵快速幂搞一搞. #include<bits/stdc++.h> #define LL long long #define fi first #define se second # ...

  2. 使用自己的域名解析 cnblogs 博客

    使用自己的域名解析 cnblogs 博客(博客园) 1.实现原理 用户访问 -> 阿里云解析 -> github page 跳转 -> 真实的博客地址 2.创建 github pag ...

  3. win7下docker环境centos容器中安装mysql5.7

    docker环境基于镜像skiychan/nginx-php7,进行安装 ps:skiychan/nginx-php7此镜像已封装nginx1.15.3+php7.2.9 1.环境配置 配置共享文件夹 ...

  4. 长安大学第四届ACM-ICPC“迎新杯”程序设计竞赛-重现赛 G - 彩虹岛套娃

    题目描述 俄罗斯套娃是俄罗斯特产的木制玩具,一般由多个一样图案的空心木娃娃一个套一个组成,最多可达十多个,通常为圆柱形,底部平坦可以直立.颜色有红色,蓝色,绿色,紫色等.最普通的图案是一个穿着俄罗斯民 ...

  5. PHP获取客户端请求头信息

    获取HTTP请求头信息 Apache 如果web服务器用的是apache,可以直接用php的库函数getallheaders() Nginx 如果web服务器用的是nginx,则无法直接使用getal ...

  6. Java 接口和抽象类--缺省模式

    一个软件设计的好坏,我想很大程度上取决于它的整体架构,而这个整体架构其实就是你对整个宏观商业业务的抽象框架,当代表业务逻辑的高层抽象层结构 合理时,你底层的具体实现需要考虑的就仅仅是一些算法和一些具体 ...

  7. python语言特性总结

    一直想学习python,虽然编程写了不少,但有时仍不得要领.这篇blog主要是记录python的一些主要特性. 前言 python学习总结,包括python的一些基本语法,高级特性,函数式编程,面向对 ...

  8. Knockout.js(四):自定义绑定

    除了内嵌的绑定,还可以创建一些自定义绑定,封装复杂的逻辑或行为. 注册绑定 添加子属性到ko.bindingHandlers来注册绑定: ko.bindingHandlers.yourBindingN ...

  9. Python中__new__()方法的使用和实例化

    new()是在新式类中新出现的方法,它作用在构造方法init()建造实例之前,可以这么理解,在Python 中存在于类里面的构造方法init()负责将类的实例化,而在init()调用之前,new()决 ...

  10. 【LYOI 212】「雅礼集训 2017 Day8」价(二分匹配+最大权闭合子图)

    「雅礼集训 2017 Day8」价 内存限制: 512 MiB时间限制: 1000 ms 输入文件: z.in输出文件: z.out   [分析] 蛤?一开始看错题了,但是也没有改,因为不会做. 一开 ...