本文通过代码实例展示了在获取DOM对象时，jQuery与原生JavaScript的getElementById方法之间的性能差异，指出使用getElementById方法进行封装可显著减少耗时。
实例代码:
<!DOCTYPE html>
<!--STATUS OK-->
<html>
<head>
<title>js</title>
</head>
<body>
<div id="div"></div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
<script>
$(function(){
console.time("jquery");
var $div = $("#div");
console.timeEnd("jquery");
var $div2 = $("#div");
console.time("getElementById");
var $div1 = $(document.getElementById("div"));
console.timeEnd("getElementById");
console.log($div[0] == $div1[0]);
console.log($div[0] == $div2[0]);
console.log($div);
console.log($div1);
})
</script>
</html> jquery的ID选择器所消耗的时间比使用原生js的getElementById方法所用时间更长,所以可以使用getElementById方法得到该dom对象之后再用jquery封装成jquery对象.
例:
var $div1 = $(document.getElementById("div"))使用此方法获取对象耗时是使用jquery选择器直接获取对象耗时的五分之一到三分之一(基于以上代码运行于FF/chrome/IE: 其中IE大概只有二分之一).
扫一扫
987
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
