bộ nhớ ứng dụng nvd3 rò rỉ

Question

Tôi có một Biểu đồ đường sống mà cập nhật thường xuyên, xem http://jsfiddle.net/cddw17fg/5/

function redraw() { 
    if (!redraw.isGraphShown) { 
    redraw.isGraphShown = true; 
    ... 
    } else { 
    d3.select('#chart svg') 
     .datum(data) 
     .transition().duration(1500) 
     .call(chart); 

    d3.select('.nv-x.nv-axis > g').selectAll('g').selectAll('text') 
     .attr('transform', function(d, i, j) { 
     return 'translate (-40, 40) rotate(315)' 
    }); 
    nv.tooltip.cleanup(); 
    chart.update(); 
    } 
} 

Chạy này js trong IE11 với "Công cụ phát triển" các "Tổng bộ nhớ" tăng nhẹ đầu tiên, nhưng sau vài phút nó bắt đầu phát triển nhanh.

Sau khi khởi động jsfiddle tiêu thụ bộ nhớ vẻ 'tốt' ... nhưng sau vài phút có người bị đói và ăn byte của tôi ...

Bất cứ ai bất cứ manh mối về những gì tôi đang làm sai rồi?

Answer 1

Tôi giữ cho bạn fiddle chạy trong 30 phút trên một trong các tab chrome trong khi tôi làm việc trên một cái gì đó khác và nó bị rơi.

Tuy nhiên nếu tôi tiếp tục mở tab sao cho tab không bao giờ mất tiêu điểm, nó sẽ không bao giờ bị treo và tiếp tục hoạt động liên tục.

Vì vậy, tôi giả định rằng nvd3 không cập nhật biểu đồ nhưng giữ tất cả cập nhật trong bộ sưu tập khi tab ở trạng thái mờ đó là lý do bộ nhớ tiếp tục tăng. Bây giờ khi tiêu điểm trở lại trên tab, nó cố gắng hiển thị tất cả các cập nhật và màn hình bị đóng băng và cuối cùng bị treo.

Bây giờ là một sửa chữa:

Tôi đang sử dụng jQuery để phát hiện các cửa sổ trên tập trung:

$(window).focus(function() { 
    window_focus = true;//set this flag on 
}).blur(function() { 
    window_focus = false;//set this flag off as window is not in display 
}); 

Bây giờ bên trong của bạn redraw function làm cập nhật bảng xếp hạng chỉ khi cửa sổ được lấy nét:

if(window_focus){ 
      chart.update(); 
      d3.select('#chart svg') 
       .datum(data) 
       //.transition().duration(1500) 
       .call(chart); 

      d3.select('.nv-x.nv-axis > g').selectAll('g').selectAll('text') 
       .attr('transform', function(d, i, j) { 
        return 'translate (-40, 40) rotate(315)' 
       }); 
      nv.tooltip.cleanup(); 

     } 

Mã làm việc here

Hy vọng điều này sẽ giúp bạn!

Answer 2

Dường như là lỗi trong chính NVD3 hoặc D3. Cách giải quyết của tôi bây giờ là tải lại trang với sơ đồ cứ 10 phút một lần.

var startDateNVD3Reload = Date.now(); 
... 
var elapsed_time_minutes = (Date.now() - startDateNVD3Reload)/1000/60; 
if (elapsed_time_minutes > 10) 
{ 
    location.reload(true); 
}