正在使用$(this)重复有效,还是将它保存到变量中更好?我已经看到它在很多jQuery代码中重复使用,但由于它是对构造函数的调用,我认为它应该不必要地慢,我错了吗?
4
A
回答
1
只是为了好玩 - 一种测量。要查看差异,您需要拨打$(this)
数万次(取决于CPU)。
的电话不同的是大致100
与70
毫秒$(this)
是较慢的一个。
var testCount = 100000;
$('div').each(function(){
var self = $(this);
// Measurement using $(this) selector
var t1 = new Date();
for (var i = 1; i <= testCount; i++){
\t var nil = $(this).attr('id');
}
console.log('T1', (new Date()) - t1);
// Measurement using saved declaration
var t2 = new Date();
for (var i = 1; i <= testCount; i++){
\t var nil = self.attr('id');
}
console.log('T2', (new Date()) - t2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
</div>
就个人而言,我还是用保存声明var self = $(this)
,因为它始终是一个好习惯,写更优化的代码,因为由于不同的上下文(在其他的答案中描述了一些可能的混乱也)。
2
$(this)
会将this
引用的DOM元素带入jQuery object。所以如果经常使用,它会一遍又一遍地完成。当然,使用varibale,一旦声明进程中的效果就不那么有效了。
由于$()
是jQuery的构造函数调用,每次使用$(this)
时,都会生成一个新实例并重新执行该任务。让我们来看看jQuery的来源:
jQuery = function(selector, context) {
return new jQuery.fn.init(selector, context);
};
还有你看,一个新的实例将与new
创建。幸运的是,jQuery并没有这么做,因为this
已经是一个DOM元素,几乎可以使用了。
重复使用字符串选择器时,情况会变得更糟,例如$('.my-element')
。在那里你应该明确地使用一个变量,因为jQuery必须在每个构造上做很多事情。我不是说$(this)
是非常缓慢的。对于一个/两个动作,你不需要一个变量。但它永远不会像一次那样快!
1
只有当你使用$(this)
让我们说10倍的情况下的回调,它可以合理地做一些像
$('.my-elem').on('click', function() {
var $this = $(this);
$this.doSomething();
});
不用说:介意范围!这会给你种种问题:
var $this = $(this);
$('.my-elem').on('click', function() {
$this.doSomething();
});
$('.other-elem').on('click', function() {
$this.doSomething();
});
但是不要太担心它。你永远不会注意到速度的差异,也许如果你在一个循环运行数千次的时候使用它......但是,尽管优化代码总是很好的。
相关问题
- 1. 提高重复检查效率 - Python
- 2. 重复数据以提高效率
- 3. 如何在重复使用connect()时提高效率?
- 4. mysql_num_rows()php - 效率高吗?
- 5. 使用Java编写效率更高效
- 6. 使用jQuery进行高效复制
- 7. Array重复效率谜语
- 8. 生成渲染组件效率高吗?
- 9. 这可以提高效率吗?
- 10. 发出QByteArray效率不高吗?
- 11. 委派方法时效率更高吗?
- 12. 门面控制器,效率高吗?
- 13. 使片段效率更高
- 14. 在jQuery中为child选择器使用find()而不是>效率更高吗?
- 15. SQL - 这可以重新考虑以提高效率吗?
- 16. 使用addEventListener或onclick进行性能效率更高吗?
- 17. 使用大量闭包效率不高吗?
- 18. jQuery风格重新应用效率
- 19. 如何避免重复的代码,以提高效率
- 20. 提高核心数据重复验证的效率
- 21. 高效(重复)循环
- 22. 使用jQuery动画高CPU使用率
- 23. 重复jQuery效果
- 24. 使用实体框架提高效率
- 25. Webpack:重复模块加载效率低下吗?
- 26. Silverlight在Mac上CPU使用率高吗?
- 27. WebGL的CPU使用率高吗?
- 28. 只重写一个方法并只调用超级方法效率不高吗?
- 29. jQuery的效率
- 30. 效率:重复使用期限Lucene的6
这取决于数量。但基本上最好先声明一个变量。 – eisbehr
这会更好地声明变量 –
这让我想起了两个经常被忽略的jQuery特性:1)方法调用可以链接2)您可以使用所有语言功能,因为它只是JavaScript –