javascript - Javascript 中大量计算的最佳实践？

Question

我正在处理客户端脚本，需要进行繁重的计算，例如将大量对象推送到数组中，这会导致 JavaScript 停止响应并且浏览器挂起并发出警报:

是否有处理这些计算的最佳实践或设计模式，我搜索并找到了许多不同的方法来处理这些情况，但解决方案难以实现，所以我需要最佳实践并且易于理解？

(我正在编写代码只是为了举例，但我需要一个跨浏览器的通用解决方案，即多线程等)

示例代码(系列包含数千个对象):

for (var series = 0; series < chartObj.masterChart.series.length; series++) {
    var detailData = [];
    jQuery.each(chartObj.masterChart.series[series].data, function (i, point) {
        if (point.x >= chartObj.RangeSelectedMinValue && point.x <= chartObj.RangeSelectedMaxValue) {
            detailData.push({
                x: point.x,
                y: point.y
            });
        }
    });
    chartObj.detailChart.series[series].setData(detailData);
}

Answer 1

好的，看看你的代码，有一些你可以优化的地方:

var s = chartObj.masterChart.series, // #1
    sLength = s.length,              // #2
    chartMin = chartObj.RangeSelectedMinValue,
    chartMax = chartObj.RangeSelectedMaxValue;
for (var series = 0; series < sLength; series++) {
    var detailData = [],
        data = s[series].data,       // #3
        length = data.length;        // #2
    for(var i = 0; i < length; i++){ // #4
        var point = data[i];
        if (point.x >= chartMin && point.x <= chartMax) {
            detailData.push({
                x: point.x,
                y: point.y
            });
        }

    }
    chartObj.detailChart.series[series].setData(detailData);
}

1. 您在 chartObj 中多次获得相同的“更深”对象 --> 将其分配给一个临时变量；
2. 不要为循环的每次迭代计算长度。与#1 相同的原则
3. 将 s[series].data 分配给临时变量。这提供了一个直接指向数据的指针，而不必在循环的每次迭代中访问 s[series].data。与#1 相同的原则
4. jQuery 很慢。对于简单的循环，请改用 JavaScript，尤其是如果您要循环遍历一个巨大的对象。

我并不是说这个编辑会创造奇迹，但它应该会减少一些负载。