1、尽可能使用id选择器而不是类选择器
例如:
//html<p id="chooseId">测试文本</p>//jQueryconsole.time("timer");;i<;i++) { $("#chooseId").css("color","red");}console.timeEnd("timer");//输出:timer: 59.244ms//html<p class="chooseClass">测试文本</p>//jQueryconsole.time("timer");;i<;i++) { $(".chooseClass").css("color","red");}console.timeEnd("timer");//输出:timer: 131.523ms
2、缓存jQuery查询
例如:
//jQueryconsole.time("timer");var $chooseId = $("#chooseId");;i<;i++) { $chooseId.css("color","red");}console.timeEnd("timer");//输出:timer: 33.429ms//jQueryconsole.time("timer");var $chooseClass = $(".chooseClass");;i<;i++) { $chooseClass.css("color","red");}console.timeEnd("timer");//输出:timer: 33.750ms
3、尽量减少DOM操作的次数
例如:
//html<div id="content"></div>//jQueryconsole.time("timer");var $content = $("#content");;i<;i++) { $content.append("<p>测试文本</p>");}console.timeEnd("timer");//输出:timer: 381.649ms//html<div id="content"></div>//jQueryconsole.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>//jQueryconsole.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");})