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

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. git团队开发常用命令

    Git >>>>>>>>>>>> git clone <项目地址,http(s)> 把云端的项目克隆到本地 git ...

  2. pip安装报错解决

    使用pip安装docker-compose时报 unsupported operand type(s) for -=: 'Retry' and 'int' 错误,经过一番google后,发现使用升级s ...

  3. BNUOJ 52516 Just A String

    $KMP$. 枚举每一个后缀,去原串中进行匹配,每次匹配到原串到$i$位置的后缀与这次枚举的后缀的前缀,更新答案. #include<bits/stdc++.h> using namesp ...

  4. Vijos1448 校门外的树 [树状数组]

    题目传送门 校门外的树 描述 校门外有很多树,有苹果树,香蕉树,有会扔石头的,有可以吃掉补充体力的……如今学校决定在某个时刻在某一段种上一种树,保证任一时刻不会出现两段相同种类的树,现有两个操作:K= ...

  5. 【BZOJ 1853】 1853: [Scoi2010]幸运数字 (容斥原理)

    1853: [Scoi2010]幸运数字 Time Limit: 2 Sec  Memory Limit: 64 MBSubmit: 2472  Solved: 911 Description 在中国 ...

  6. JZYZOJ1261 字典序最小的lis

    http://172.20.6.3/Problem_Show.asp?id=1261   求字典序方法: f[i]表示i位数字的最长上升子序列长度,len为最长上升子序列长度,ans[t]为第t位答案 ...

  7. MySQL启动项提权

    关于MySQL的启动项提权,听其名知其意.就是将一段 VBS脚本导入到  C:\Documents and Settings\All Users\「开始」菜单\程序\启动 下,如果管理员重启了服务器, ...

  8. 扩展gcd codevs 1200 同余方程

    codevs 1200 同余方程 2012年NOIP全国联赛提高组  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题目描述 Description 求关 ...

  9. 安装myeclipse的常见问题

    1.破解myeclipse网站:  https://jingyan.baidu.com/article/acf728fd49519ff8e410a361.html 

  10. Codeforces Round #301 (Div. 2) A. Combination Lock 暴力

    A. Combination Lock Time Limit: 1 Sec  Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/540/p ...