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);
}
});
})
jQuery性能优化指南(3)到此结束。
分享到：
相关推荐
### jQuery性能优化指南 #### 一、从ID选择器开始 **重要性**: 在使用jQuery进行DOM操作时，选择器的性能对整个应用的响应速度至关重要。选择器的速度直接影响到页面加载时间以及用户交互体验。 **ID选择器**: 最...
以下是一些关于jQuery性能优化的关键知识点，这些内容可能在"jQuery性能优化指南1.htm、jQuery性能优化指南2.htm、jQuery性能优化指南3.htm"中有所涉及。 1. **选择器优化**：jQuery的选择器是强大的，但过度使用...
在JavaScript的世界里，jQuery是一个广泛使用的库，它简化了DOM...通过阅读《jQuery性能优化指南（1）.htm》和《jQuery性能优化指南（2）.htm》，可以深入了解每个技巧的详细实践方法，进一步提升您的jQuery项目性能。
### jQuery性能优化指南 在网页开发中，使用jQuery可以极大地简化HTML文档遍历、事件处理、动画等操作，但随着项目复杂度的增加，如何优化jQuery的使用，以提升页面性能变得至关重要。以下是对给定文件《jQuery性能...
6. **性能优化**：书中会讲解如何避免JQuery中的性能陷阱，如减少DOM操作，正确使用事件委托，以及使用最新的JQuery版本以获取更好的性能。 7. **实战项目**：通过实际的网页开发案例，读者可以将所学知识应用于...
在进行jQuery性能优化时，有几个关键点可以帮助提升代码运行效率，从而提高网页的加载速度和用户体验。以下是对这些优化策略的详细解释： 1. **总是从 ID 选择器开始继承**： ID选择器是最高效的，因为它直接对应...
**jQuery UI** 是一个强大的JavaScript库，用于构建用户界面，它基于流行的jQuery库。这个压缩包包含两个关键文件：`jquery-ui-...同时，随着技术的发展，推荐关注jQuery UI的更新版本，以获取最新的特性和性能优化。
《jQuery性能优化指南》系列文章主要探讨如何提升jQuery代码的执行效率，以达到更好的用户体验。在Web开发中，性能优化是关键，特别是对于用户交互频繁的网页应用，jQuery的高效运用能显著改善页面加载速度和响应...
第10章 jQuery性能优化与最佳实践/312 10.1 优化选择器执行的速度/313 10.1.1 优先使用ID与标记选择器/313 10.1.2 使用jQuery对象缓存/314 10.1.3 给选择器一个上下文/315 10.2 处理选择器中的不规范元素标志/...
这个压缩包“jquery-easyui-1.5.5.6”包含了该框架的1.5.5.5版本，这是一份重要的更新，可能包含了一些性能优化和新功能。 在该压缩包中，有几个关键文件和目录： 1. `jquery.easyui.min.js`：这是jQuery EasyUI的...
3. 图片预加载功能：在代码示例中提到了实现图片预加载的功能，这是前端性能优化的一个重要方面。通过在图片使用之前预先加载，可以提高页面的响应速度和用户体验。在jQuery中，可以通过AJAX请求、动态创建img元素等...
在“Gruntfile.js”中，开发者可以找到关于如何构建、打包和测试jQuery-validation的配置，这对于理解项目的构建流程和优化代码效率至关重要。 “src”目录包含了插件的主要源代码，这是整个项目的核心部分。其中，...
再接着对jQuery UI和jQuery实用工具函数等扩展知识，以及jQuery的开发技巧与性能优化等方面的重要知识做了详尽的阐述；最后以两个具有代表性的综合案例结束全书，希望能帮助读者将前面所学的理论知识真正贯穿于实践...
在版本1.13.0中，该插件包含了丰富的功能和优化，使得开发人员可以快速、有效地进行表单验证。 **1. 使用方法** jQuery Validation Plugin 的使用非常直观。首先，你需要在HTML页面中引入jQuery库和Validation插件...
同时，jQuery也提供了许多性能优化策略，如使用`.delegate()`或`.on()`进行事件委托，以及使用`.data()`存储数据而非DOM元素属性。 学习jQuery，首先应理解其基础API，然后通过实际项目进行实践，逐渐掌握其精髓。...