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

【问题标题】：JS 1-2k variables make page load slowJS 1-2k 变量使页面加载缓慢
【发布时间】：2009-07-01 14:27:40
【问题描述】：

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

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

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

这是他们的内部表示：

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

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

编辑：

感谢您的快速回复！感谢您的帮助，我对 JS 不是很好！这里有更多信息：

'selectChangeEvent' 被添加到下拉列表的 Change 和 Click 事件中。

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++;
}
}

【问题讨论】：

请向我们展示整个 onload 函数，尤其是循环，即有问题的代码

标签： javascript memory variables performance

【解决方案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 对象来找出瓶颈所在。

【讨论】：

谢谢。我会尝试一下，看看它有多大的不同。

【解决方案2】：

您可能需要考虑更改设计以支持负载。某种分页结果集或类似的，以减少被修改的并发记录的数量。

尽管我们非常希望它们能够做到，但浏览器在脚本执行速度方面还不够完善，无法让我们在客户端上完成某些类型的繁重工作。

【讨论】：

谢谢。我同意这似乎是一个很好的解决方案，但是将这个页面分成更多页面需要相当长的时间，我希望这只是我存储/创建对象的方式。

【解决方案3】：

虽然我还没有测试过这个想法，但我想我会把它扔掉 - 从服务器端返回 JSON 字符串会更快吗？在服务器端完全计算你的数组？

从那时起，我敢打赌 eval()'ing 它（尽管这可能是邪恶的）可能足够快，以至于您可以将内容写入页面，并且您的数组设置已经被采用照顾。

再一次，我认为浏览器构建 2k 个新对象并将它们注入 DOM 所花费的工作量最终不一定有助于提高速度。归根结底，可能需要更改设计，但有时我们会被现有的东西困住，是吗？

【讨论】：