JavaScript中重型计算的最佳实践 [英] Best Practices For Heavy Computations in Javascript?

问题描述

我正在处理客户端脚本，需要进行大量的计算，例如在数组中推送大量的对象，导致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）; 
} 
  

解决方案

有几件事你可以优化：

  var s = chartObj.masterChart.series，//＃1 
 sLength = s.length，//＃2 
 chartMin = chartObj.RangeSelectedMinValue，
 chartMax = chartObj.RangeSelectedMaxValue; 
（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. 你越来越对象内部的图表多次 - >将其分配给临时变量;


2. 不要计算循环的每次迭代的长度。与＃1相同的原则


3. 将 s [series] .data 分配给temp var。这提供了一个直接指向数据的指针，而不必每次循环访问 s [series] .data 。 ＃1相同的原则


4. jQuery很慢。对于一个简单的循环，使用JavaScript代替，特别是，如果你循环一个庞大的对象。

我不是说这个编辑会发挥奇迹，但它应该减轻负载。

I am working on client side scripts and need to do heavy computations like pushing huge number of objects in an array, it causes JavaScript to stop response and browser hangs giving an alert:

Is there any best practices or design patterns for handling these computation, I search and find many different ways to handle these situation but solutions are difficult to implement so I need best practices and easy to understand?

(I am writing code just for example But I need a general solution that is cross-browser i.e, multi-threading etc)

Example Code (series contains thousands of objects):

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

解决方案

Okay, looking at your code, there's a few things you can optimize:

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. You're getting the same "deeper" object inside chartObj multiple times --> Assign it to a temporary variable;
2. Don't calculate the length for every iteration of the loop. Same principle as #1
3. Assign s[series].data to a temp var. This provides a direct pointer to the data instead of having to access s[series].data each iteration of the loop. Same principle as #1
4. jQuery is slow. For a simple loop, use JavaScript instead, especially if you're looping through a massive object.

I'm not saying this edit will work miracles, but it should reduce the load a bit.

这篇关于JavaScript中重型计算的最佳实践的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！