jQuery代码性能改进

时间:2013-10-10 23:18:48

标签: javascript jquery

我有一个字段,当我在其中粘贴一些内容时,内容会得到验证并逐行添加到另一个隐藏字段。我的内容可以是由新行分隔的多个移动号码,当您将它们粘贴到可见字段时,每行都会被验证并添加到另一个隐藏字段,该字段用于将值传递给后端。

e.g。

12345
54321
34567

我用它来将值添加到隐藏字段的方法可以在下面的代码中看到:

$('#recipients').val($('#recipients').val().length <= 0 ? output.join("\n") : $('#recipients').val() + "\n" + output.join("\n"));

在上面的代码'output'中是用户粘贴的内容中的一行(一个数字),收件人是隐藏的字段。

此行被调用与我的内容行一样多。但是当我检查性能时,这行会占用大量的CPU负载(当行数太高时)并且在执行工作时会产生延迟(浏览器挂起)。

那么这行代码能否以更有效的方式重写?

谢谢,

1 个答案:

答案 0 :(得分:2)

以下是如何在变量中缓存选择器的结果:

var $recip = $("#recipients");
var $recipval = $recip.val();
var new_out = output.join("\n");
$recip.val($recipval.length == 0 ? new_out : $recipval + "\n" + new_out);

你也可以绕过jQuery,以获得更多的提升:

var recip = $("#recipients")[0];
var recipval = recip.value;
var new_out = output.join("\n");
recip.value = recipval.length == 0 ? new_out : recipval + "\n" + new_out;

new_out不会影响性能,只会让代码更容易理解。