jQuery代码性能优化
代码优化是一个很重要的开发态度,一点点的优化对于程序来讲可能是微乎其微的,但是把所有的一点都加起来就能够达到水滴石穿的效果,所以要在平时的开发过程中养成优化代码的好习惯。
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代码性能优化的更多相关文章
- Python 代码性能优化技巧(转)
原文:Python 代码性能优化技巧 Python 代码优化常见技巧 代码优化能够让程序运行更快,它是在不改变程序运行结果的情况下使得程序的运行效率更高,根据 80/20 原则,实现程序的重构.优化. ...
- JavaScript代码性能优化总结
JavaScript 代码性能优化总结 尽量使用源生方法 javaScript是解释性语言,相比编译性语言执行速度要慢.浏览器已经实现的方法,就不要再去实现一遍了.另外,浏览器已经实现的方法在算法方面 ...
- 针对于Java的35 个代码性能优化总结
针对于Java的35 个代码性能优化总结前言代码优化,一个很重要的课题.可能有些人觉得没用,一些细小的地方有什么好修改的,改与不改对于代码的运行效率有什么影响呢?这个问题我是这么考虑的,就像大海里面的 ...
- jQuery代码性能小细节
选择器Selector的使用 $("#id")使用id来定位DOM元素无疑是最佳提高性能方式,因为jQuery底层将直接调用本地方法document.getElementbyId( ...
- <转载> Jquery的性能优化-实用!
我一直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些.找了很多文章后,我决定将最好最常用的一些优化性能的建议列出来 ========================= ...
- Java开发代码性能优化总结
代码优化,可能说起来一些人觉得没用.可是我觉得应该平时开发过程中,就尽量要求自己,养成良好习惯,一个个小的优化点,积攒起来绝对是有大幅度效率提升的.好了,将平时看到用到总结的分享给大家. 代码优化的目 ...
- [转] Python 代码性能优化技巧
选择了脚本语言就要忍受其速度,这句话在某种程度上说明了 python 作为脚本的一个不足之处,那就是执行效率和性能不够理想,特别是在 performance 较差的机器上,因此有必要进行一定的代码优化 ...
- Python代码性能优化技巧
摘要:代码优化能够让程序运行更快,可以提高程序的执行效率等,对于一名软件开发人员来说,如何优化代码,从哪里入手进行优化?这些都是他们十分关心的问题.本文着重讲了如何优化Python代码,看完一定会让你 ...
- Java开发中程序和代码性能优化
现在计算机的处理性能越来越好,加上JDK升级对一些代码的优化,在代码层针对一些细节进行调整可能看不到性能的明显提升, 但是我觉得在开发中注意这些,更多的是可以保持一种性能优先的意识,对一些敲代码时间比 ...
随机推荐
- git团队开发常用命令
Git >>>>>>>>>>>> git clone <项目地址,http(s)> 把云端的项目克隆到本地 git ...
- pip安装报错解决
使用pip安装docker-compose时报 unsupported operand type(s) for -=: 'Retry' and 'int' 错误,经过一番google后,发现使用升级s ...
- BNUOJ 52516 Just A String
$KMP$. 枚举每一个后缀,去原串中进行匹配,每次匹配到原串到$i$位置的后缀与这次枚举的后缀的前缀,更新答案. #include<bits/stdc++.h> using namesp ...
- Vijos1448 校门外的树 [树状数组]
题目传送门 校门外的树 描述 校门外有很多树,有苹果树,香蕉树,有会扔石头的,有可以吃掉补充体力的……如今学校决定在某个时刻在某一段种上一种树,保证任一时刻不会出现两段相同种类的树,现有两个操作:K= ...
- 【BZOJ 1853】 1853: [Scoi2010]幸运数字 (容斥原理)
1853: [Scoi2010]幸运数字 Time Limit: 2 Sec Memory Limit: 64 MBSubmit: 2472 Solved: 911 Description 在中国 ...
- JZYZOJ1261 字典序最小的lis
http://172.20.6.3/Problem_Show.asp?id=1261 求字典序方法: f[i]表示i位数字的最长上升子序列长度,len为最长上升子序列长度,ans[t]为第t位答案 ...
- MySQL启动项提权
关于MySQL的启动项提权,听其名知其意.就是将一段 VBS脚本导入到 C:\Documents and Settings\All Users\「开始」菜单\程序\启动 下,如果管理员重启了服务器, ...
- 扩展gcd codevs 1200 同余方程
codevs 1200 同余方程 2012年NOIP全国联赛提高组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题目描述 Description 求关 ...
- 安装myeclipse的常见问题
1.破解myeclipse网站: https://jingyan.baidu.com/article/acf728fd49519ff8e410a361.html
- 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 ...