在页面中对DOM操作是比较消耗的（比如在页面插入或删除一段文字），把这个改动降至最小是保持性能的最佳实践！比如：

<ul id="test"> </ul> <script type="text/javascript"> var $list = $("#test"); for (i = 1; i < 101; i++) { $list.append("<li>Item" + i + "</li>"); } //very bad,change dom 100 times var listItem = ""; for (j = 1; j < 101; j++) { listItem += "<li>Item" + j + "</li>"; } $list.html(listItem); //good practice,only modify dom once </script>
可以看出，第一个例子对DOM修改100次，而第二个只对DOM修改1次，这上面的性能差距是显而易见的。
 
可以屏蔽JQuery的动画效果

在某些情况下，如果，可以关闭JQuery动画，能对性能进行一定提升，屏蔽的方法是：

<script type="text/javascript"> jQuery.fx.off = true; </script>
 
如果参数可以是JS对象，尽量使用对象

很对JQuery插件，或者JQuery的css和attr方法都接受键/值 或 js键/值对象 对作为参数，传递键值对象可以减少JQuery对象的创建，比如:

<div></div> <script type="text/javascript"> $("div").css("display", "block"); $("div").css("background-color", "blue") //slow,because it create more Jquery object $("div").css({ "display": "block", "background-color": "blue" }); //fast,only create one object </script>

当然也可以使用连缀的方式:

<div></div> <script type="text/javascript"> $("div").css("display", "block").css("background-color", "blue"); </script
但是这种方式的性能不如上面那种.需要使用两个方法，并且需要多生成临时对象. 相关文章