【JQuery】性能优化方法
尽管JavaScript比JAVA C++慢很多,JQuery比原生Js还慢很多,但是我们通过良好的编程习惯还是能提高代码执行的效率。
一.选择器的使用
选择同一个元素,各种方法之间的性能是不一样的,有时候差异会特别大。通常比较常用的选择器有以下几个:
ID选择器 $("#id")
标签选择器 $("td")
类选择器 $(".target")
属性选择器 $("td[target='target']")
伪类选择器 $("td:hidden")
这5种选择器的性能是依次下降的:
性能顺序:ID选择器 > 标签选择器 > 类选择器 > 属性选择器 > 伪类选择器
二.避免执行全局查找
//错误的
$("div.bizHelp"); //正确的
$("bizHelp");
$("#container").find(".bizHelp");
保证查询的路径最短,性能最优
三.缓存对象
//错误的
$(window).bind('click',function(){
//do someing...
}); $(window).css('width','1000px'); $(window).bind('load',function(){
//do someing...
});
//优化的
var $win = $(window); $win.bind('click',function(){
//do someing...
}); $win.css('width','1000px'); $win.bind('load',function(){
//do someing...
});
四.采用样式表 避免多次DOM style样式
var obj=$("#obj"); //A:
obj.css("width",200);
obj.css("height",200);
obj.css("background":"#eee"); //B:
obj.attr("style","width:200px;height:200px;background:#eee;"); //C:
//加个css .operation{width:200px;height:200px;background:#eee;}
obj.addClass("operation")
性能排序:C>B>A
五.减少对DOM元素的操作次数
//不好的
$.each(arr,function(i){
$(window).append('<li>'+arr[i]+'</li>')
}); //优化的
var _html=[];
$.each(arr,function(i){
_html.push('<li>'+arr[i]+'</li>')
});
$(window).append(_html.join(''));
六.优化事件冒泡
//不好的
$('a').click(function(){
//do someing...
}); //推荐的
$(document.body).click(function(event){
if(event.target.tagName=='A'){
//do someing...
}
}); //JQuery的方法
$(document.body).delegate("a","click",function(){
//do someing...
});
七.更高效的遍历方式
var list=ul.find("li"),
e; //A:
var i=list.length;
while(i--){
e=$(list[i])
} //B:
list.each(function(){
e=$(this);
}); //C:
$.each(list,function(){
e=$(this);
});
JQuery提供了$.fn.each()和$.each()两个方法来实现对集合的遍历,除此之外,还可以采用JS原生的for循环、while等来实现迭代,应该了解一下他们之间的性能差异:
测试说明:1w次执行耗时,单位毫秒/ms,统计三次运行的平均值
方案 | IE6 | IE7 | IE8 | IE9 | chrome | firefox | opera | safari |
A | 172 | 219 | 157 | 30 | 3 | 5 | 4 | 6 |
B | 219 | 234 | 203 | 41 | 4 | 6 | 5 | 8 |
C | 219 | 234 | 187 | 52 | 3 | 4 | 5 | 7 |
结论
总体上来说A>C>B
方案A有大约25%的性能提升,但是不稳定。追求极致性能,用方案A;
循环数量少的话,建议使用方案C,比较稳定;
八.优先使用原生属性
$.each(list,function(){
//A
var id=$(this).attr("id"); //B
var id=this.id;
})
很多常用的属性,比如id、name等都被浏览器原生实现,在JQuery中我们有时会用$(this).attr("id")的方式来获取id,这种方法的效率相比原生属性的获取效率而言,非常慢。
使用原生的API,可以极大的提高性能
测试说明:10w次执行耗时,单位毫秒/ms,统计三次运行的平均值
方案 | IE6 | IE7 | IE8 | IE9 | chrome | firefox | opera | safari |
A | 6880 | 7030 | 4220 | 1188 | 157 | 244 | 133 | 135 |
B | 310 | 310 | 150 | 27 | 4 | 5 | 17 | 3 |
九.可能的话,使用最新版本的JQuery
新版本总会对性能进行改进,还会提供一些新的方法。
如果可以的话,应该尽量选用最新的版本;
【JQuery】性能优化方法的更多相关文章
- jquery性能优化的十种方法
jquery性能优化的十种方法 有时候我们在书写jquery的时候,为了书写代码方便,往往忽略了程序执行过程中,给客户端带来的压力.随之而来的就是在某些低端浏览器或者低端电脑上运行速度缓慢,甚至无法运 ...
- jQuery性能优化指南(转载)
现在jquery应用的越来越多, 有些同学在享受爽快淋漓coding时就将性能问题忽略了, 比如我. jquery虽在诸多的js类库中性能表现还算优秀, 但毕竟不是在用原生的javascript开发, ...
- jQuery性能优化的28个建议
我一直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些.找了很多文章后,我决定将最好最常用的一些优化性能的建议列出来.我也做了一个jQuery性能优化的简明样式表,你可 ...
- jQuery:jQuery性能优化28条建议
http://www.xue5.com/WebDev/jQuery/671700.html 直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些.找了很多文章后,我决定将 ...
- jQuery 性能优化技巧
原文地址:jQuery 性能优化技巧 博客地址:http://www.extlight.com 一.使用最新版本 jQuery 类库 二.合理使用选择器 # 推荐使用 $("#id" ...
- jQuery性能优化和技巧
jQuery性能优化 ①使用最新版本的jQuery类库 ②使用合适的选择器 ③缓存对象 ④循环时的DOM操作 ⑤数组方式使用jQuery对象 ⑥事件代理 ⑦将你的代码转化成jQuery插件 ⑧使用jo ...
- 28个jQuery性能优化的建议
我一直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些.找了很多文章后,我决定将最好最常用的一些优化性能的建议列出来.我也做了一个jQuery性能优化的简明样式表,你可 ...
- 针对jquery的优化方法,你知道几条
(转)我一直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些.找了很多文章后,我决定将最好最常用的一些优化性能的建议列出来 ====================== ...
- DevExpress ChartControl大数据加载时有哪些性能优化方法
DevExpress ChartControl加载大数据量数据时的性能优化方法有哪些? 关于图表优化,可从以下几个方面解决: 1.关闭不需要的可视化的元素(如LineMarkers, Labels等) ...
- Linux 下网络性能优化方法简析
概述 对于网络的行为,可以简单划分为 3 条路径:1) 发送路径,2) 转发路径,3) 接收路径,而网络性能的优化则可基于这 3 条路径来考虑.由于数据包的转发一般是具备路由功能的设备所关注,在本文中 ...
随机推荐
- Tensorflow细节-P42张量的概念及使用
1.运行以下代码 import tensorflow as tf a = tf.constant([1.0, 2.0], name="a") b = tf.constant([2. ...
- git submodule 使用小结
git submodule 使用小结 原文链接 http://blog.gezhiqiang.com/2017/03/08/git-submodule/###### Git Submodule 允许一 ...
- PHPstorm不停Indexing最新解决办法
PHPstorm不停Indexing最新解决办法 1.网络上千篇一律的解决办法 File -> Invalidate Caches / Restart... -> Invalidate ...
- greenplum 表在各个节点数据的分布情况
select gp_segment_id,count(*) from table_name group by gp_segment_id;
- learning java 访问文件和目录
import java.io.File; import java.io.IOException; public class FileTest { public static void main(Str ...
- learning java BigDecimal类
使用BiDecimal类是了为防止运算时精度丢失: var f1 = new BigDecimal("0.05"); var f2 = BigDecimal.valueOf(0.0 ...
- salt state.sls windows 传输文件
salt 安装 - 传输文件 一.master -- minion linux 下 master 拷贝到 minion 上 1.cp.get_file 拷贝文件 # salt '172.16.3. ...
- tensorflow serving 模型部署
拉去tensorflow srving 镜像 docker pull tensorflow/serving:1.12.0 代码里新增tensorflow 配置代码 # 要指出输入,输出张量 #指定保存 ...
- AtCoder Grand Contest 008题解
传送门 \(A\) 分类讨论就行了 然而我竟然有一种讨论不动的感觉 int x,y; inline int min(R int x,R int y){return x<y?x:y;} inlin ...
- [golang]写了一个可以用 go 来写脚本的工具:gosl
转自:https://golangtc.com/t/53cca103320b52060a000030 写了一个可以用 go 来写脚本的工具:gosl 代码和使用说明可以看这里: http://gith ...