jQuery 代码性能改进

jQuery code performance improvement

本文关键字：性能 代码 jQuery      更新时间：2023-09-26

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

例如

12345
54321
34567

我用来将值添加到隐藏字段的方式可以在以下代码中看到：

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

在上面的代码中，"输出"是用户粘贴的内容中的一行(数字(，收件人是隐藏字段。

这一行的调用次数与我的内容行一样多。但是当我检查性能时，这条线会占用大量 CPU 负载(当行数太多时(并在完成工作时造成滞后(浏览器挂起(。

那么这行代码可以用更有效的方式重写吗？

谢谢

下面介绍如何在变量中缓存选择器的结果：

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不会影响性能，它只是使代码更易于理解。

相关文章：