- 浏览: 7331137 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (1546)
- 企业中间件 (236)
- 企业应用面临的问题 (236)
- 小布Oracle学习笔记汇总 (36)
- Spring 开发应用 (54)
- IBatis开发应用 (16)
- Oracle基础学习 (23)
- struts2.0 (41)
- JVM&ClassLoader&GC (16)
- JQuery的开发应用 (17)
- WebService的开发应用 (21)
- Java&Socket (44)
- 开源组件的应用 (254)
- 常用Javascript的开发应用 (28)
- J2EE开发技术指南 (163)
- EJB3开发应用 (11)
- GIS&Mobile&MAP (36)
- SWT-GEF-RCP (52)
- 算法&数据结构 (6)
- Apache开源组件研究 (62)
- Hibernate 学习应用 (57)
- java并发编程 (59)
- MySQL&Mongodb&MS/SQL (15)
- Oracle数据库实验室 (55)
- 搜索引擎的开发应用 (34)
- 软件工程师笔试经典 (14)
- 其他杂项 (10)
- AndroidPn& MQTT&C2DM&推技术 (29)
- ActiveMQ学习和研究 (38)
- Google技术应用开发和API分析 (11)
- flex的学习总结 (59)
- 项目中一点总结 (20)
- java疑惑 java面向对象编程 (28)
- Android 开发学习 (133)
- linux和UNIX的总结 (37)
- Titanium学习总结 (20)
- JQueryMobile学习总结 (34)
- Phonegap学习总结 (32)
- HTML5学习总结 (41)
- JeeCMS研究和理解分析 (9)
最新评论
-
lgh1992314:
[u][i][b][flash=200,200][url][i ...
看看mybatis 源代码 -
尼古拉斯.fwp:
图片根本就不出来好吧。。。。。。
Android文件图片上传的详细讲解(一)HTTP multipart/form-data 上传报文格式实现手机端上传 -
ln94223:
第一个应该用排它网关吧 怎么是并行网关, 并行网关是所有exe ...
工作流Activiti的学习总结(八)Activiti自动执行的应用 -
ZY199266:
获取不到任何消息信息,请问这是什么原因呢?
ActiveMQ 通过JMX监控Connection,Queue,Topic的信息 -
xiaoyao霄:
DestinationSourceMonitor 报错 应该导 ...
ActiveMQ 通过JMX监控Connection,Queue,Topic的信息
jQuery性能优化指南(全部)
1,总是从ID选择器开始继承
在jQuery中最快的选择器是ID选择器,因为它直接来自于JavaScript的getElementById()方法。
例如有一段HTML代码:
<div id="content">
<form method="post" action="#">
<h2>交通信号灯</h2>
<ul id="traffic_light">
<li><input type="radio" class="on" name="light" value="red" /> 红色</li>
<li><input type="radio" class="off" name="light" value="yellow" /> 黄色</li>
<li><input type="radio" class="off" name="light" value="green" /> 绿色</li>
</ul>
<input class="button" id="traffic_button" type="submit" value="Go" />
</form>
</div>
如果采用下面的选择器,那么效率是低效的。
var traffic_button = $("#content .button");
因为button已经有ID了,我们可以直接使用ID选择器。如下所示:
var traffic_button = $("#traffic_button");
当然 这只是对于单一的元素来讲。如果你需要选择多个元素,这必然会涉及到 DOM遍历和循环,
为了提高性能,建议从最近的ID开始继承。
如下所示:
var traffic_lights = $("#traffic_light input");
2,在class前使用tag(标签名)
在jQuery中第二快的选择器是tag(标签)选择器( 比如:$("head") )。
跟ID选择器累时,因为它来自原生的getElementsByTagName() 方法。
继续看刚才那段HTML代码:
<div id="content">
<form method="post" action="#">
<h2>交通信号灯</h2>
<ul id="traffic_light">
<li><input type="radio" class="on" name="light" value="red" /> 红色</li>
<li><input type="radio" class="off" name="light" value="yellow" /> 黄色</li>
<li><input type="radio" class="off" name="light" value="green" /> 绿色</li>
</ul>
<input class="button" id="traffic_button" type="submit" value="Go" />
</form>
</div>
比如需要选择 红绿 单选框,
那么可以使用一个tag name来限制(修饰)class ,如下所示:
var active_light = $("input.on");
当然也可以结合 就近的ID,如下所示:
var active_light = $("#traffic_light input.on");
在使用tag来修饰class的时候,我们需要注意以下几点:
(1) 不要使用tag来修饰ID,如下所示:
var content = $("div#content");
这样一来,选择器会先遍历所有的div元素,然后匹配#content。
(好像jQuery从1.3.1开始改变了选择器核心后,不存在这个问题了。暂时无法考证。)
(2)不要画蛇添足的使用ID来修饰ID,如下所示:
var traffic_light = $("#content #traffic_light");
注:如果使用属性选择器,也请尽量使用tag来修饰,如下所示:
$('p[row="c3221"]').html();而不是这样:$('[row="c3221"]').html();
特别提示:
tag.class 的方式 在IE下的性能 好于 .class 方式。
但在Firefox下 却低于 直接 .class方式。
Google浏览器下两种都差不多。
我页面上有300个元素,他们的性能差距都在50毫秒以内。
3,将jQuery对象缓存起来
把jQuery对象缓存起来 就是要告诉我们 要养成将jQuery对象缓存进变量的习惯。
下面是一个jQuery新手写的一段代码:
$("#traffic_light input.on").bind("click", function(){ ... });
$("#traffic_light input.on").css("border", "1px dashed yellow");
$("#traffic_light input.on").css("background-color", "orange");
$("#traffic_light input.on").fadeIn("slow");
但切记不要这么做。
我们应该先将对象缓存进一个变量然后再操作,如下所示:
var $active_light = $("#traffic_light input.on");
$active_light.bind("click", function(){ ... });
$active_light.css("border", "1px dashed yellow");
$active_light.css("background-color", "orange");
$active_light.fadeIn("slow");
记住,永远不要让相同的选择器在你的代码里出现多次.
注:(1)为了区分普通的JavaScript对象和jQuery对象,可以在变量首字母前加上 $ 符号。
(2)上面代码可以使用jQuery的链式操作加以改善。如下所示:
var $active_light = $("#traffic_light input.on");
$active_light.bind("click", function(){ ... })
.css("border", "1px dashed yellow")
.css("background-color", "orange")
.fadeIn("slow");
如果你打算在其他函数中使用jQuery对象,那么你必须把它们缓存到全局环境中。
如下代码所示:
// 在全局范围定义一个对象 (例如: window对象)
window.$my = {
head : $("head"),
traffic_light : $("#traffic_light"),
traffic_button : $("#traffic_button")
};
function do_something(){
// 现在你可以引用存储的结果并操作它们
var script = document.createElement("script");
$my.head.append(script);
// 当你在函数内部操作是, 可以继续将查询存入全局对象中去.
$my.cool_results = $("#some_ul li");
$my.other_results = $("#some_table td");
// 将全局函数作为一个普通的jquery对象去使用.
$my.other_results.css("border-color", "red");
$my.traffic_light.css("border-color", "green");
}
//你也可以在其他函数中 使用它
4,对直接的DOM操作进行限制
这里的基本思想是在内存中建立你确实想要的东西,然后更新DOM 。
这并不是一个jQuery最佳实践,但必须进行有效的JavaScript操作 。直接的DOM操作速度很慢。
例如,你想动态的创建一组列表元素,千万不要这样做,如下所示:
var top_100_list = [...], // 假设这里是100个独一无二的字符串
$mylist = $("#mylist"); // jQuery 选择到 <ul> 元素
for (var i=0, l=top_100_list.length; i<l; i++){
$mylist.append("<li>" + top_100_list[i] + "</li>");
}
我们应该将整套元素字符串在插入进dom中之前先全部创建好,如下所示:
var top_100_list = [...],$mylist = $("#mylist"), top_100_li = ""; // 这个变量将用来存储我们的列表元素
for (var i=0, l=top_100_list.length; i<l; i++){
top_100_li += "<li>" + top_100_list[i] + "</li>";
}
$mylist.html(top_100_li);
注:记得以前还看过一朋友写过这样的代码:
for (i = 0; i < 1000; i++) {
var $myList = $('#myList');
$myList.append('This is list item ' + i);
}
呵呵,你应该已经看出问题所在了。既然把#mylist循环获取了1000次!!!
5,冒泡
除非在特殊情况下, 否则每一个js事件(例如:click, mouseover等.)都会冒泡到父级节点。
当我们需要给多个元素调用同个函数时这点会很有用。
代替这种效率很差的多元素事件监听的方法就是, 你只需向它们的父节点绑定一次。
比如, 我们要为一个拥有很多输入框的表单绑定这样的行为: 当输入框被选中时为它添加一个class
传统的做法是,直接选中input,然后绑定focus等,
如下所示:
$("#entryform input").bind("focus", function(){
$(this).addClass("selected");
}).bind("blur", function(){
$(this).removeClass("selected");
});
当然上面代码能帮我们完成相应的任务,但如果你要寻求更高效的方法,请使用如下代码:
$("#entryform").bind("focus", function(e){
var $cell = $(e.target); // e.target 捕捉到触发的目标元素
$cell.addClass("selected");
}).bind("blur", function(e){
var $cell = $(e.target);
$cell.removeClass("selected");
});
通过在父级监听获取焦点和失去焦点的事件,对目标元素进行操作。
在上面代码中,父级元素扮演了一个调度员的角色, 它可以基于目标元素绑定事件。
如果你发现你给很多元素绑定了同一个事件监听, 那么现在的你肯定知道哪里做错了。
同理,在Table操作时,我们也可以使用这种方式加以改进代码:
普通的方式:
$('#myTable td').click(function(){
$(this).css('background', 'red');
});
改进方式:
$('#myTable').click(function(e) {
var $clicked = $(e.target);
$clicked.css('background', 'red');
});
假设有100个td,在使用普通的方式的时候,你绑定了100个事件。
在改进方式中,你只为一个元素绑定了1个事件,
至于是100个事件的效率高,还是1个事件的效率高,相信你也能自行分辨了。
6,推迟到 $(window).load
jQuery对于开发者来说有一个很诱人的东西, 可以把任何东西挂到$(document).ready下。
尽管$(document).ready 确实很有用, 它可以在页面渲染时,其它元素还没下载完成就执行。
如果你发现你的页面一直是载入中的状态,很有可能就是$(document).ready函数引起的。
你可以通过将jQuery函数绑定到$(window).load 事件的方法来减少页面载入时的cpu使用率。
它会在所有的html(包括<iframe>)被下载完成后执行。
$(window).load(function(){
// 页面完全载入后才初始化的jQuery函数.
});
一些特效的功能,例如拖放, 视觉特效和动画, 预载入隐藏图像等等,都是适合这种技术的场合。
7,压缩JavaScript
压缩和最小化你的JavaScript文件。
在线压缩地址: http://dean.edwards.name/packer/
压缩之前,请保证你的代码的规范性,否则可能失败,导致Js错误。
8,尽量使用ID代替Class。
前面性能优化已经说过,ID选择器的速度是最快的。所以在HTML代码中,能使用ID的尽量使用ID来代替class。
看下面的一个例子:
// 创建一个list
var $myList = $('#myList');
var myListItems = '<ul>';
for (i = 0; i < 1000; i++) {
myListItems += '<li class="listItem' + i + '">This is a list item</li>'; //这里使用的是class
}
myListItems += '</ul>';
$myList.html(myListItems);
// 选择每一个 li
for (i = 0; i < 1000; i++) {
var selectedItem = $('.listItem' + i);
}
在代码最后,选择每个li的过程中,总共用了5066毫秒,超过5秒了。
接着我们做一个对比,用ID代替class:
// 创建一个list
var $myList = $('#myList');
var myListItems = '<ul>';
for (i = 0; i < 1000; i++) {
myListItems += '<li id="listItem' + i + '">This is a list item</li>'; //这里使用的是id
}
myListItems += '</ul>';
$myList.html(myListItems);
// 选择每一个 li
for (i = 0; i < 1000; i++) {
var selectedItem = $('#listItem' + i);
}
在上段代码中,选择每个li总共只用了61毫秒,相比class的方式,将近快了100倍。
9,给选择器一个上下文
jQuery选择器中有一个这样的选择器,它能指定上下文。
jQuery( expression, context );
通过它,能缩小选择器在DOM中搜索的范围,达到节省时间,提高效率。
普通方式:
$('.myDiv')
改进方式:
$('.myDiv' , $("#listItem") )
10,慎用 .live()方法(应该说尽量不要使用)
这是jQuery1.3.1版本之后增加的方法,这个方法的功能就是为 新增的DOM元素 动态绑定事件。
但对于效率来说,这个方法比较占用资源。所以请尽量不要使用它。
例如有这么一段代码:
<script type="text/javascript" >
$(function(){
$("p").click(function(){
alert( $(this).text() );
});
$("button").click(function(){
$("<p>this is second p</p>").appendTo("body");
});
}) </script>
<body>
<p>this is first p</p> <button>add</button>
</body>
运行后,你会发现 新增 的 p元素,并没用被绑定click事件。
你可以改成.live("click")方式解决此问题,代码如下:
$(function(){
$("p").live("click",function(){ //改成live方式
alert( $(this).text() );
});
$("button").click(function(){ $("<p>this is second p</p>").appendTo("body"); });})
但我并不建议大家这么做,我想用另一种方式去解决这个问题,代码如下:
$(function(){
$("p").click(function(){
alert( $(this).text() );
});
$("button").click(function(){
$("<p>this is second p</p>").click(function(){ //为新增的元素重新绑定一次
alert( $(this).text() );
}).appendTo("body");
});
})
虽然我把绑定事件重新写了一次,代码多了点,但这种方式的效率明显高于live()方式,
特别是在频繁的DOM操作中,这点非常明显。
11,子选择器和后代选择器
后代选择器经常用到,比如:$("#list p");
后代选择器获取的是元素内部所有元素。
而有时候实际只要获取 子元素,那么就不应该使用后代选择器。
应该使用子选择器,代码如下:
$("#list > p");
12,使用data()方法存储临时变量
下面是一段非常简单的代码,
$(function(){
var flag = false;
$("button").click(function(){
if(flag){
$("p").text("true");
flag=false;
}else{
$("p").text("false");
flag=true;
}
});
})
改用data()方式后,代码如下:
$(function(){
$("button").click(function(){
if( $("p").data("flag") ){
$("p").text("true");
$("p").data("flag",false);
}else{
$("p").text("false");
$("p").data("flag",true);
}
});
})
13,尽量使用原生的JavaScript方法
看下面一段代码,它用来判断多选框是否被选中:
$(document).ready(function(){
var $cr = $("#cr"); //jQuery对象
$cr.click(function(){
if($cr.is(":checked")){ //jQuery方式判断
alert("感谢你的支持!你可以继续操作!");
}
})
});
上面代码中,判断是否选中是用了 jquery的方法,但这里可以直接使用原生的JavaScript方法,看下面代码:
$(document).ready(function(){
var $cr = $("#cr"); //jQuery对象
var cr = $cr.get(0); //DOM对象,获取 $cr[0]
$cr.click(function(){
if(cr.checked){ //原生的JavaScript方式判断
alert("感谢你的支持!你可以继续操作!");
}
})
});
毋庸置疑,第二种方式效率高于第一种方式,因为他不需要拐弯抹角的去调用许多函数。
更多:
$(this).css("color","red"); ......
改成:
this.style.color ="red" ......
$("<p></p>")
改成:
$( document.createElement("p") )
有时候你也许根本不需要jQuery。( 如果不涉及兼容性问题和自己的水平问题。)
14,使用for代替each()方法
这个跟13有点类似,但我特意提取出来,让大家注意下。
var array = new Array ();
for (var i=0; i<10000; i++) {
array[i] = 0;
}
$.each (array, function (i) {
array[i] = i;
});
15,使用join()来拼接字符串。
也许你之前一直使用 " + " 来 拼接长字符串。现在你可以改改了。虽然它可能会有点奇怪,但它确实有助于优化性能,尤其是长字符串处理的时候。
首先创建一个数组,然后循环,最后使用join()把数组转化为字符串。
var array = [];
for (var i=0; i<=10000; i++) {
array[i] = '<li>'+i+'</li>';
}
$('#list').html (array.join (''));
16,Ajax中文乱码。
Ajax传递中文时会乱码,传统方式大家都是利用escape去编码,然后去后台解码。
$.ajax({
type: "POST",
url: "AjaxTest.jsp",
data: "txt="+$('#txt').val(),
success: function(msg){
$("#AjaxResponse").text(msg);
}
});
现在你可以换一换了,你可以非常简单的解决这个问题,只需要添加一参数即可:
$.ajax({
type: "POST",
url: "AjaxTest.jsp",
data: "txt="+$('#tbox1').val(),
success: function(msg){
$("#AjaxResponse").text(msg);
},
contentType:"application/x-www-form-urlencoded;charset=utf-8"
});
发表评论
-
Titanium+JQuery整合
2012-04-18 14:54 2712Titanium和JQuery整合的结构如下: 登 ... -
jquery validate.addMethod 正则表达式 (自定义验证方法)
2010-01-12 17:38 31232项目中使用的jQuery添加的校验的方法 $(do ... -
jQuery中ajax的使用和缓存问题解决
2009-12-09 15:42 163371:GET访问 浏览器 认为 是等幂的就是 一个相同的URL ... -
防止jQuery Load使用缓存的方法
2009-12-09 15:29 5745一、用法 jquery的load函数是请求另一个文件并 ... -
Struts2.0和jQuery的局部更新技术的应用
2009-12-05 19:08 3127在项目中Struts2.0和JQuery结合使用jQuer ... -
jQuery工具函数
2009-11-27 12:49 2010工具函数是指在jQuery对象(即变量"" ... -
jQuery技巧实用大全
2009-06-14 08:41 2817随着WEB2.0及 ajax思想在互联网上 ... -
jQuery使用ajax的post与get发送数据
2009-06-14 08:29 32184针对上一篇JQuery学习中 ... -
自动完成插件 autocomplete
2009-06-09 15:34 6152自动完成插件 autocompleteautocomplete ... -
JQuery 插件Validate框架的学习总结(三)
2009-06-09 15:22 6906在提交表单前常要对用户输入进行校验.ASP.NET的验证控件就 ... -
JQuery 插件Validate框架的学习总结(二)
2009-06-09 14:44 4327在页面导入相应的jquery和Validation的插件并导入 ... -
JQuery 插件Validate框架的学习总结
2009-06-09 14:10 2736插件文档学习网站: http://www.codesky.n ... -
JQuery 插件SortTable的学习总结
2009-06-09 13:59 3598下载jquery中sorttable的js插件使用,用于美化截 ... -
关于Jquery实现datepicker实现国际化的应用
2009-06-09 11:52 7150使用这个插件要下载两 ... -
关于Jquery实现tab的局部更新
2009-06-09 11:23 4836实现此种局部更新的使用技术为JQuery和ProtoType ... -
JQuery学习应用开发和JQuery中文学习指南
2009-05-09 08:25 2182JQuery插件所在网站学习 http://ww ...
相关推荐
6. **性能优化**:书中会讲解如何避免JQuery中的性能陷阱,如减少DOM操作,正确使用事件委托,以及使用最新的JQuery版本以获取更好的性能。 7. **实战项目**:通过实际的网页开发案例,读者可以将所学知识应用于...
第10章 jQuery性能优化与最佳实践/312 10.1 优化选择器执行的速度/313 10.1.1 优先使用ID与标记选择器/313 10.1.2 使用jQuery对象缓存/314 10.1.3 给选择器一个上下文/315 10.2 处理选择器中的不规范元素标志/...
- 性能优化策略。 #### 三、jQuery的核心优势 - **简洁性**:jQuery通过简洁的语法使得原本复杂的JavaScript代码变得更加简单易懂。 - **跨浏览器兼容性**:解决了不同浏览器之间的兼容问题,使得开发者可以专注于...
- **优化技巧**:分享提高jQuery应用性能的方法,比如减少DOM操作次数、缓存选择结果等。 - **案例分析**:通过具体的项目案例,展示jQuery在实际开发中的应用技巧和最佳实践。 #### 实战篇 - **响应式设计**:...
10. **性能优化**:移动设备的资源有限,因此优化代码和资源加载对保持应用流畅运行至关重要。书中会分享一些最佳实践和技巧,如减少HTTP请求、压缩文件和缓存策略。 11. **插件和扩展**:jQuery Mobile社区提供了...
7. **性能优化**:书中会讨论如何优化jQuery代码以提升网页性能,包括延迟加载、事件代理、避免内存泄漏等策略。 8. **兼容性和最佳实践**:jQuery致力于跨浏览器兼容性,书中会讲解如何利用jQuery解决不同浏览器间...
- 性能优化:合理设置Ajax缓存策略,减少不必要的请求。 - API设计:保持RESTful风格,清晰定义请求URL、方法和返回数据结构。 6. **学习资源**: - 博文链接给出的“https://liuzidong.iteye.com/blog/1069343...
总的来说,《jQuery - 学习 jQuery - 第四版》是一本全面的指南,不仅讲解了jQuery的基本用法,还涵盖了进阶技术和实战经验,对于希望提升JavaScript技能的开发者来说是一份宝贵的资源。通过学习这本书,你可以更好...
- **《jQuery权威指南》:** 本书深入介绍了jQuery的核心概念、语法和最佳实践。 - **《锋利的jQuery》:** 本书通过大量实例教授jQuery的使用技巧。 - **《从零开始学习jQuery》:** 非常适合初学者的一本入门...
8. **性能优化**:理解如何有效使用`$(document).on()`代替`$(selector).click()`来处理动态添加的元素,以及如何利用`.delegate()`和`.live()`方法提高事件处理性能,都是jQuery高级应用的一部分。 9. **综合案例*...
9. **性能优化**:提供关于如何优化jQuery代码的建议,包括减少DOM操作、合并请求和使用最新的jQuery版本。 10. **响应式设计与移动开发**:讨论在移动设备上使用jQuery的最佳实践,包括触摸事件和优化移动端性能。...
9. **性能优化**:理解如何有效地使用jQuery以提高网页加载速度和运行效率,避免不必要的DOM操作。 10. **实战项目**:通过实际案例,将所学知识应用于网页开发,提升实际操作能力。 通过这份资料,你不仅可以掌握...
- **最佳实践**:为了帮助开发者编写高质量的代码,《jQuery in Action》详细讲解了编码规范、性能优化策略以及常见的陷阱和解决方案,是每一个前端工程师的必备参考。 ### 社区评价 从多位专家和用户的评论来看,...
此外,性能优化也是重点,作者可能会分享如何减少HTTP请求、优化DOM操作和减少JavaScript执行时间等策略,以提升网页加载速度和用户体验。 总之,《精通JavaScript+JQuery》是一本全方位的指南,旨在帮助读者不仅...
此外,书中还涉及了一些高级主题,如插件开发、性能优化、最佳实践等,对于想要深入学习jQuery的开发者来说,是非常宝贵的资源。通过阅读本书,读者将能够掌握jQuery的核心概念,学会如何利用jQuery构建高质量的Web...
- **进阶篇**:涵盖jQuery的高级功能,如动画、Ajax、性能优化等。 - **实战篇**:通过实际案例展示jQuery在网页开发中的应用,如动态加载内容、响应式布局等。 - **插件篇**:讲解如何使用和开发jQuery插件,提升...
- **性能优化**:分享了一些提高网站加载速度和运行效率的技巧,比如压缩代码、异步加载等。 - **响应式设计**:探讨了如何利用jQuery实现响应式布局,使网站在不同设备上都能良好显示。 - **安全性考虑**:提醒...