javascript - 在扩展现代 Javascript 项目时，对象数量与有效负载哪个更重要？

Question

当然，更少的有效负载等于更少的对象数量，但请阅读下面的完整描述。

在现代浏览器上扩展 javascript 项目时，哪个更重要？数据负载的大小或内存中 javascript 对象的数量。我有一个巨大的 JSON 字符串，我正在循环并将这个巨大的字符串切成不同的对象。 JSON 字符串保存了很多旅行者信息，每个 Javascript 对象都有很多属性。当 JSON 中有超过 10,000 个旅行者时，浏览器将难以执行。

如果我可以减少属性的数量，我会带来很多不必要的属性，显然我的有效负载会减少，但对象的数量可能会保持不变。

多个 JS 对象与较小的有效负载，哪个在性能方面更物有所值？

谢谢

Answer 1

我喜欢我读过的一些答案，但我想我会以不同的方式处理瓶颈问题，我希望您也可以通过这种方式避免 future 的瓶颈。

大多数答案都假设对象的数量是瓶颈。我认为情况并非如此。我认为瓶颈在于 JavaScript 事件循环积压过多。

众所周知，JavaScript 只运行一个线程和一个事件循环。

您调用的每个函数实际上都是此类事件的回调。

但是，由于只有一个线程，网页中的任何代码都必须等待每个事件完成，然后才能执行任何其他任务。

这意味着将 JavaScript 函数分段(分解为微事件/回调)比任何单个函数以性能为导向更为重要。

在你的例子中，你既循环了一个长字符串又执行了操作——没有将控制返回到事件循环——这意味着浏览器必须等待这一大块代码在它可以处理任何更多数据/事件之前完成。

数据收集/处理的问题可以争论。获取大量小消息是否更好(可能会给网络/服务器带来更多负载)？接收一个巨大的字符串并按 block 处理它会更好吗？ ...

...我不知道，这真的取决于其他因素，例如服务器的设计、数据库的设计、客户端负载、更新间隔等。

如果您确实更喜欢处理单个大字符串，最好一次处理一点，然后将其转发给回调以供将来处理。

即对于 \n 分隔的 JSON 字符串，您可以尝试:

function consumeString(s) {
    if(s.length == 0)
        return;
    var sep = s.indexOf("\n");
    if(sep < 0)
        sep = s.length;
    try {
        var obj = JSON.parse(s.slice(0, sep));
        console.log("processed:", obj);
    } catch {
        console.log("Failed... not valid JSON?:");
    }
    // schedule the next slice for later processing.
    setTimeout(consumeString, 0, s.slice(sep + 1));
}


var text = '{ "employees" : [' + // JSON1
'{ "firstName":"John 1" , "lastName":"Doe 1" },' +
'{ "firstName":"Anna 1" , "lastName":"Smith 1" },' +
'{ "firstName":"Peter 1" , "lastName":"Jones 1" } ]}' + // END JSON1
"\n" +
'{ "employees" : [' + // JSON2
'{ "firstName":"John 2" , "lastName":"Doe 2" },' +
'{ "firstName":"Anna 2" , "lastName":"Smith 2" },' +
'{ "firstName":"Peter 2" , "lastName":"Jones 2" } ]}';

consumeString(text);

这只是一个大纲，很明显，但尽管它看起来性能不佳(它浪费时间重新安排自己并且不断被中断，增加了 CPU 缓存未命中的机会)......它实际上帮助浏览器保持响应并提高感知性能，从用户的 Angular 来看。