1、尽可能使用id选择器而不是类选择器
例如：
//html
<p id="chooseId">测试文本</p>
//jQuery
console.time("timer");
;i<;i++) {
$("#chooseId").css("color","red");
}
console.timeEnd("timer");
//输出：timer: 59.244ms
//html
<p class="chooseClass">测试文本</p>
//jQuery
console.time("timer");
;i<;i++) {
$(".chooseClass").css("color","red");
}
console.timeEnd("timer");
//输出：timer: 131.523ms
2、缓存jQuery查询
例如：
//jQuery
console.time("timer");
var $chooseId = $("#chooseId");
;i<;i++) {
$chooseId.css("color","red");
}
console.timeEnd("timer");
//输出：timer: 33.429ms
//jQuery
console.time("timer");
var $chooseClass = $(".chooseClass");
;i<;i++) {
$chooseClass.css("color","red");
}
console.timeEnd("timer");
//输出：timer: 33.750ms
3、尽量减少DOM操作的次数
例如：
//html
<div id="content"></div>
//jQuery
console.time("timer");
var $content = $("#content");
;i<;i++) {
$content.append("<p>测试文本</p>");
}
console.timeEnd("timer");
//输出：timer: 381.649ms
//html
<div id="content"></div>
//jQuery
console.time("timer");
var $content = $("#content");
var items = "";
;i<;i++) {
items += "<p>测试文本</p>";
}
$content.append(items);
console.timeEnd("timer");
//输出：timer: 56.195ms
//html
<div id="content"></div>
//jQuery
console.time("timer");
var $content = $("#content");
var items = "<div>";
;i<;i++) {
items += "<p>测试文本</p>";
}
items += "</div>";
$content.append(items);
console.timeEnd("timer");
//输出：timer: 21.505ms
4、如果为同一个父元素下的多个子元素绑定了事件，尽量使用事件代理
例如：
//html
<ul id="list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
//jQuery
$("#list").on("click",function(e) {
var clicked = $(e.target);
clicked.css("color","red");
})