我的程序员同胞们,我快疯了。我读过很多关于 JS 性能的书籍,它们都说,最好缓存 DOM 对象以供将来引用和管理,而不是创建新的 Jquery 对象。听起来很有道理。 但现在我的信念正在动摇。我正在尝试在我的公司中开发代码约定,并且我打算从性能的 Angular 来解决这个问题。 我有一段代码如下:
$("#registratorType").attr("readonly", "readonly");
$("#registratorType").attr("size", "25");
$("#id").attr("readonly", "readonly");
$("#id").attr("size", "25");
$("#serial").attr("readonly", "readonly");
$("#serial").attr("size", "25");
$("#duration").attr("size", "25");
$("#stoppingDuration").attr("size", "25");
$("#speeddata").removeAttr("disabled");
这不是全部,但我认为你已经明白了。我打算获取所有这些表单并将其包装在缓存的引用中。
var $form = $('#vehicleProfile');
$form.find("#registratorType").attr("readonly", "readonly");
$form.find("#registratorType").attr("size", "25");
$form.find("#id").attr("readonly", "readonly");
$form.find("#id").attr("size", "25");
$form.find("#serial").attr("readonly", "readonly");
$form.find("#serial").attr("size", "25");
$form.find("#duration").attr("size", "25");
$form.find("#stoppingDuration").attr("size", "25");
$form.find("#speeddata").removeAttr("disabled");
我在最新的 chrome 中测试了性能,结果感到震惊!我的方法3-4次就失败了。我的意思是我的函数运行时间为 42 毫秒,而旧函数的运行时间为 12-14 毫秒。 我的方法真的有任何值(value)吗?我的方法是反模式吗?请帮助我!
最佳答案
由于所有选择器都是 id 选择器,因此它们的速度相当快(document.getElementById
是一个 O(1)
表查找)。然而,使用 find()
将它们限制为某个父元素使得 DOM 树搜索成为必要,这会明显减慢速度。
“缓存 DOM 对象以供将来引用”意味着您永远不会两次应用相同的选择器。执行一次,并将其存储在一个变量中(就像您对 $form
所做的那样)。所以而不是
$("#id").attr("readonly", "readonly");
$("#id").attr("size", "25");
应该是
var $id = $("#id");
$id.attr("readonly", "readonly");
$id.attr("size", "25");
自 jQuery allows chaining ,上式也可以写成
$("#id").attr("readonly", "readonly").attr("size", "25");
顺便说一句,你实际上似乎想使用 prop()
instead of attr()
,并且这些函数接受 value maps还有:
$("#id").prop({readonly: true, size: 25});
关于javascript - 原生 Jquery 选择器 VS 缓存 object.find(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14726343/