减少DOM操作虽然javascript性能上有了很大的提升，但是DOM操作还是很耗费资源的，需要减少对DOM操作。当在一个页面中插入大量的元素的时候，尤其重要。例如：<div id="elem" ></div>// 不好的方式//var elem = $("#elem");//for(var i = 0; i < 100; i++){// elem.append("<li>element "+i+"</li>");//}// 好的方式var elem = $("#elem" ),arr = [];for(var i = 0; i < 100; i++){arr. push("<li>element " +i+"</li>" );}elem. append(arr. join("" ));将所有的元素缓存起来一次插入性能上会有所提升，因为只触发页面一次重绘。对于CSS样式属性也是同样的道理。更多阅读： 前端页面卡顿？可能是DOM操作惹的祸，你需要优化代码适当使用原生JS创建jQuery对象会带来一些开销。所以，如果比较注重性能的话，尽可能使用原生的javascript。在某些方面可能会更容易理解和写更少的代码。例如：// 打印list中的li的id$("#colors li" ). each(function(){//将$(this).attr("id")方法替换为直接通过ID属性访问console. log(this. id);})选择器优化如果你需要更好的性能，但是仍然要用到jQuery，你可以在jQuery选择器优化做一些尝试。以下是一个测试程序，通过浏览器的控制台console.time 和console.timeEnd 方法来记录不同选择器执行时间。HTML:<div id="peanutButter" ><div id="jelly" class=".jellyTime" ></div></div>JS://测试程序var iterations = 10000,i;//--------------------------------------------//Case 1: 很慢console.time("Fancy");for (i = 0; i < iterations; i++) {$("#peanutButter div:first");}console.timeEnd("Fancy");//--------------------------------------------//Case 2: 比较好，但仍然很慢console.time("Parent-child");for (i = 0; i < iterations; i++) {$("#peanutButter div");}console.timeEnd("Parent-child");//--------------------------------------------//Case 3: 一些浏览器会比较快console.time("Parent-child by class");for (i = 0; i < iterations; i++) {// 通过后代Class选择器$("#peanutButter .jellyTime");}console.timeEnd("Parent-child by class");//--------------------------------------------//Case 4: 更好的方式 console.time("By class name");21for (i = 0; i < iterations; i++) {// 直接通过Class选择器$(".jellyTime");}console.timeEnd("By class name");//--------------------------------------------//Case 5: 推荐的方式 ID选择器console.time("By id");for (i = 0; i < iterations; i++) {$("#jelly");}console.timeEnd("By id");
更多相关内容：
