处理数组时可能JavaScript内存泄漏？

2019-12-08 08:37:11 阅读：249 来源： 互联网

标签：google-finance memory-leaks arrays javascript

我正在使用Humble Finance一次绘制一个点的一系列数据,以达到延时效果.我的代码在下面,但是我想先解释一下：

如果您不熟悉HF,则其初始化函数采用三个JavaScript数组(priceData,volumeData和summaryData),然后将其绘制到三个图形上.这些数组每个包含XY对的几个数组.

在我的程序中,我声明了三个空的“图形”数组(priceData,volumeData和summaryData),然后从数据库中获取值,并将它们放入名为priceDataOrig,volumeDataOrig和summaryDataOrig的“主” JavaScript数组中.我不是将这些数组传递给HF并一次绘制所有数据,而是调用一个UpdateGraph()函数,该函数每40毫秒调用一次. UpdateGraph()一次将一个值(实际上是一个包含XY对的数组)从主数组推入其对应的图形数组,然后调用HF初始化函数(将图形数组传递给它),绘制三个图形.在图形数组中有50个点之后,我开始移出最旧的点,然后再推新的点,这样一次绘制每个图形最多可以绘制50个点.

另外,我正在使用jQuery的load()来加载图形,因此,每当用户单击“执行”按钮时,graph.php(处理上述所有问题)就会加载到页面上的div中,并开始逐点绘制图形.这个想法是,用户只要想重新加载图形并再次观看时间流逝,就应该能够单击“转到”.

现在是我的问题了：在我的测试程序中,我总共绘制了约500个值,因此无论如何这都不是一个大数据集.第一次单击“执行”时,所有值均绘制良好.但是,浏览器的内存使用量激增(我在Firefox和Chrome中都尝试过),并且当用户再次单击“执行”时,浏览器在绘图过程中完全崩溃.我完全不知道为什么发生这种情况-我已经尝试在绘制完成后对所有数组进行null运算,等等.

有人有什么想法吗？这是我的graph.php代码,为清楚起见做了一些修改：

<?php
    #Queries the DB and constructs the data strings assigned to JavaScript arrays below,
    #An example might be: $priceData = '[[0,100.34],[1,108.31],[2,109.40],[3,104.87]]';
?>

<script>
//Global variables used in UpdateGraph():

//The "master" arrays -- I'm just using the same data for all of
//them for now (an array containing around 500 arrays of XY pairs)
var priceDataOrig = <?php echo $priceData; ?>;
var volumeDataOrig = <?php echo $priceData; ?>;
var summaryDataOrig = <?php echo $priceData; ?>;

var priceData = [],
    volumeData = [],
    jsonData = [];
    i = 0,
    pointsToShowAtOnce = 50,
    totalPoints = priceDataOrig.length,
    updateRate = 40;    //milliseconds

UpdateGraph();

//Periodically updates the graph to show time lapse, adding one new point at a time
function UpdateGraph() {
    //Only add a new point if all the points haven't already been added
    if (i != totalPoints) {
        //Add a new point to each array
        priceData.push(priceDataOrig[i]);
        volumeData.push(volumeDataOrig[i]);
        summaryData.push(jsonDataOrig[i]);

        if (i >= pointsToShowAtOnce) {
            //We're showing the amount of points we want to show, so remove the oldest point
            priceData.shift();
            volumeData.shift();
            jsonData.shift();

            //Sets the new X values for these points -- not really pertinent to
            //my question, it works the same if this block is commented out.
            var pLen = priceData.length;
            var j, c = 0;
            for (j = 0; j < pLen; j++) {
                priceData[j][0] = c;
                volumeData[j][0] = c;
                c++;
            }
        }

        //Load the graph itself. 'humblefinance' is just a div on the page.
        HumbleFinance.init('humblefinance', priceData, volumeData, summaryData);

        i++;

        //This function calls itself at the interval in
        //updateRate until all the points have been drawn
        setTimeout('UpdateGraph()', updateRate);
    } else {
        //I null these out here even though it doesn't seem necessary.
        //It doesn't help though.
        priceDataOrig = null;
        volumeDataOrig = null;
        summaryData = null;
        jsonDataOrig = null;
        priceData = null;
        volumeData = null;
        jsonData = null;
    }
}
</script>

<div id="humblefinance"></div>

解决方法:

尝试对HumbleFinance进行较小的更改.在init方法中,这些函数称为：

this.buildDOM();
this.attachEventObservers();

这些似乎是一次性的配置函数,您只想在第一次更新图形时运行.似乎创建了许多元素并绑定了事件,这些元素会一次又一次地完成,每次都消耗更多的内存,因为它们从未被释放.

最简单的方法是在init中添加一个参数,以便您可以有条件地排除此部分,或者将实际绘制图形的代码分离为单独的方法.最后,我认为您只希望这些设置过程调用一次.

标签：google-finance,memory-leaks,arrays,javascript
来源： https://codeday.me/bug/20191208/2090073.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

处理数组时可能JavaScript内存泄漏？