안녕하세요.
항상 winform프로젝트만 하다가 최근에 blazor 강의를 보고 있긴했는데
처음으로 blazor 프로젝트를 진행하게 되었습니다.
웹쪽 경험이나 지식이 거의 없는 상태로 진행하게되었어요…
근데 실제 현장에서 하루 정도 구동 시켜놓으면 브라우저가 메모리 오류로 뻗는 현상이 나와서 보니까
개발자 모드로 메모리 스냅샷을 찍어서 보니까 페이지 이동시마다 메모리가 계속 오르는것을 확인했습니다.
페이지는 총 2개인데 한개는 그래프(echart)가 있는페이지고 한개는 데이터를 테이블로 보여주고 이미지를 보여주는 페이지입니다.
echart는 div테그 id를 js로 넘겨서 js에서 해당 테그에 랜더링해 주는 방식으로 만들었습니다.
처음에는 echart때문에 증가 하는것으로 보고 echart를 걷어내고 페이지 이동을 계속 해 봤는데 그래도 메모리가 0.1[mb]정도씩 오르는게 보였습니다.
그래서 검색을 하다보니까 js에서는 변수의 참조를 해제 하지 않으면 가비지가 해당 메모리를 해제하지 않는다는것을 보게 되었습니다.
그래서 혹시나 해서 원래 static으로 razor페이지에 bind해둔 변수를 내부 변수로 모두 바꿔보니
메모리 증가가 완하된것으로 보였습니다.
기존
static A abc ;
예로
@abc.abc
이런식으로 사용하고 있었습니다.근데 변경해본 방식은
@code{
private A _abc = abc.DeepCopy(); // 깊은복사
}
<p> @_abc .abc </p>
여기서 질문은 전역으로 선언된 변수를 바인딩 하는 경우 페이지가 이동해서 해당 테그가 사용 하지 않게 되어도 참조가 남아있게 되어 가비지가 메모리를 회수 하지 않다는 결론을 내리게 됬는데 이게 맞는걸까요?
그렇다면 페이지에 데이터를 바인딩시에는 무조건 내부 변수에 깊은복사를 한후 그 변수를 사용해야 하는걸까요?
얇은 복사로 값 참조를 하면 안되는걸까요?.. 웹쪽 경험도 없어서 확신이 서지 않네요 …
확인해보니 echart도 메모리증가 원인이 맞았습니다.
window.StackedBar = function (id, data, xAxisData, datazoom = null) {
var dom = document.getElementById(id);
var myChart = echarts.getInstanceByDom(dom);
myChart = echarts.init(dom, null, {
renderer: "canvas",
useDirtyRect: false
})
}
처음에는 이런식으로 데이터가 갱신될때도 계속 echarts.init을 했는데 찾아보니 dispose를 해 주지 않으면 기존 인스턴스한 객체가 남아있고 가비지에서 메모리를 해제 하지 않는다고 하여 현재는 이미 인스턴스된 객체가 있을경우 재 사용하고 페이지 이동시에는 dispose를 해주니 메모리증가가 아주 없는것은 아니지만 완화되고 어느정도 이상안올라가는것 같습니다.
아래가 변경 코드입니다.
window.StackedBar = function (id, data, xAxisData, datazoom = null) {
var dom = document.getElementById(id);
//기존에 연결된 echarts 인스턴스가 있는지 확인하고 있으면 해당 인스턴스를 재사용, 없으면 새로 생성.
var myChart = echarts.getInstanceByDom(dom);
if (myChart) {
window.UpdateChartData(id, data);
}
else {
myChart = echarts.init(dom, null, {
renderer: "canvas",
useDirtyRect: false
})
var seriesData = JSON.parse(data); // JSON 문자열을 JavaScript 객체로 파싱
var xAis = JSON.parse(xAxisData); // JSON 문자열을 JavaScript 객체로 파싱
var DataZoom = JSON.parse(datazoom);
//console.log(data);
var option = {
legend: {
//범례설정.
top: '5%',
textStyle: {
color: "white",// 글씨 색상을 빨간색으로 설정,
fontSize: 17 // 폰트사이즈
// 여기에 추가적인 글꼴 스타일 속성을 추가할 수 있습니다.
},
icon: "rect" //심볼 모양 변경.
// 가능한 값: 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
},
tooltip: {},
xAxis: {
data: xAis,
},
dataZoom: DataZoom,
yAxis: {
type: "value"
},
series: seriesData
};
if (option && typeof option === "object") {
myChart.setOption(option);
}
window.addEventListener("resize", myChart.resize);
}
}
window.UpdateChartData = function (id, newData) {
var dom = document.getElementById(id);
var myChart = echarts.getInstanceByDom(dom);
if (!myChart) {
console.error("Chart instance not found");
return;
}
// 기존 시리즈 데이터를 가져와서 새 데이터로 업데이트
var currentOption = myChart.getOption();
var seriesData = JSON.parse(newData);
for (var i = 0; i < currentOption.series.length; i++) {
currentOption.series[i].data = seriesData[i].data;
}
myChart.setOption(currentOption);
};
window.DisposeChart = function (chartId) {
var dom = document.getElementById(chartId);
if (dom) {
var myChart = echarts.getInstanceByDom(dom);
if (myChart) {
myChart.dispose();
}
}
}
먼저 질문에 답글 달아주신분들 감사합니다.
질문 이후 좀 찾아보고 수정했는데 아래 수정 사항이 문제가 없을지는 좀 지켜봐야 할 것 같아
모니터링중입니다.
아래 정리 내용은 제가 서치해서 찾아본 건데 확실하지는 않지만 신빙성 있어보여 정리 해보려고 합니다.
- static으로 선언된 변수를 컴포넌트에 직접 바인딩 할 경우 메모리가 상승할 수 있는 이유
- static으로 선언된 변수의 생명주기는 프로그램의 생명주기와 일치하여 컴포넌트가 파괴되더라도 참조가 살아 있어 가비지가 해당 참조의 메모리를 해제 하지 않아 유지됨.
- static으로 된 변수를 사용해야 할 경우 컴포넌트 내부에 변수를 할당 하고 바인딩한다.
해당 변수에 static변수의 값또는 참조를 함.
이때 참조 변수를 굳이 깊은복사가 아닌 값참조를 해도되는 이유는 컴포넌트 내부에서 선언된 변수의 생명주기는 컴포넌트의 생명주기와 일치해서 컴포넌트가 파괴되면 해당 변수의 참조도 해제 되어 가비지가 메모리를 회수함.
- echart를 데이터 갱신마다 init을 해서 새로운 객체를 만들 경우 이전 객체가 자동으로 참조가 해제 되지 않아 메모리에 남게됨.
- 데이터 갱신마다 init을 할 경우 기존 인스턴스된 객체를 dispose하고 새로운 객체 생성 필요
- 이미 인스턴스된 객체가 있을경우 해당 객체를 재사용함.
제가 이해한 내용으로는 이런데 혹시 제가 이해하는 부분이 맞을까요 … ?