javascript - JS 1-2k 变量使页面加载缓慢

Question

在我网站的一个页面上，用户可以通过在下拉列表中选择多个字符串表示形式来选择和删除最多 2000 个项目。

页面加载时，对象会从前一个 session 加载到页面上，分为 7 个不同的下拉列表。在 window.onload 事件中，循环遍历下拉列表中的项目的函数通过将对象添加到全局数组来创建对象的内部集合 - 这使得页面加载速度非常慢，所以，我相当确定可能做错了!

我还应该如何存储这些变量？

这是他们的内部表示:

function Permission(PName, DCID, ID) {
   this.PName = PName;
   this.DCID = DCID;
   this.ID = ID;
}

其中:PName 是字符串。 DCID 是整数。 ID 为整数。

编辑:

感谢您的快速回复!感谢您的帮助，我不太擅长 JS!以下是更多信息:

“selectChangeEvent”被添加到下拉列表的“更改”和“单击”事件中。

function selectChangeEvent(e) {
//... 
addListItem(id);
//...
}

'addListItem(id)' 设置对象的视觉表示，然后调用:

function addListObject(x, idOfCaller) {
var arIDOfCaller = idOfCaller.toString().split('-');
if (arIDOfCaller[0] == "selLocs") {
    var loc = new AccessLocation(x, arIDOfCaller[1]);
    arrayLocations[GlobalIndexLocations] = loc;
    GlobalIndexLocations++;
    totalLocations++;
}
else {
    var perm = new Permission(x, arIDOfCaller[1], arIDOfCaller[2]);
    arrayPermissions[GlobalIndexPermissions] = perm;
    GlobalIndexPermissions++;
    totalPermissions++;
}
}

Answer 1

仍然不够继续，但我可以看到一些小的改进。

而不是这种模式:

var loc = new AccessLocation(x, arIDOfCaller[1]);
arrayLocations[GlobalIndexLocations] = loc;
GlobalIndexLocations++;
totalLocations++;

这似乎涉及冗余计数器并且有多余的赋值操作，尝试:

arrayLocations[arrayLocations.length] = new AccessLocation(x, arIDOfCaller[1]);

并且只需使用 arrayLocations.length 来引用 GlobalIndexLocations 或totalLocations(从上面的代码来看，这似乎总是相同的值)。

这应该会给你带来一点的提升，但这不是你的主要问题。我建议您添加一些调试 Date 对象来找出瓶颈所在。