이미지를 숨기거나 표시 할 때 Chrome 메모리 누수가 발생했습니다.

Question

오랜 시간 환영의 인사 였지만이 사이트를 자주 방문하는 사용자. 여기 좋은 정보. 나는 처음으로 실제 웹 프로젝트를 진행하고 내가 배우는대로 학습하고있다.

이것은 때때로 문제가 될 수있는 환자에게주의를 끌기 위해 경보 아이콘 (이미지가 포함 된 div)을 표시해야하는 의료용 응용 프로그램입니다. 나는 CSS 클래스를 사용하여 적절한 아이콘을 보여주기 위해 다음 JS/jQuery 코드를 사용 해왔다. 내 CSS 기술은 훌륭하지 않으므로 더 효율적으로 수행 할 수는 있지만 내 질문의 핵심은 아닙니다.

각 업데이트 후 setTimeout을 사용하여 128 명의 환자에 대해 다음 코드를 500msec 간격으로 실행하면 Chrome 렌더링 프로세스가 약 50MB/시간 (작업 관리자 또는 SysInternals Process Explorer 당)의 메모리를 사용합니다. 그러나 Chrome 개발자 도구는 메모리 사용량이나 DOM 노드 수를 늘리지 않습니다. 힙 스냅 샷은 시간이 지남에 따라 큰 변화를 보이지 않습니다. 그러나이 부분을 언급하면 ​​"누출"이 사라집니다.

무엇이 누락 되었습니까?

// Show appropriate alarm icon, or hide all 
iconClass = null; 
if (this.Status && displayMode === 'RealTime') { 
    if (this.Status.Alarm === 'Active') { 
     flashState = ((this.drawTickCount % 4) < 2); 
     iconClass = (flashState) ? 'alarmOn' : 'alarmOff'; 
    } 
    else if (this.Status.Alarm === 'Paused') { 
     iconClass = 'alarmPaused'; 
    } 
} 
// Hide all icons 
this.div.find('div.alarmIcon').css('visibility', 'hidden'); 
// Show the active icon, if any 
if (iconClass) { 
    this.div.find('div.' + iconClass).css('visibility', 'visible'); 
} 

고마워요!

Answer 1

저는 이것을 코멘트로 남기고 싶었지만 코멘트 박스에는 너무 길었습니다.

크롬이 image-related memory leaks 번으로 오랜 시간 괴롭 혔지만, 여기에 표시되는 문제가 확실하지 않습니다.

이 당신이 시도 할 수있는 몇 가지 여기 어둠 속에서 모든 단지 샷 있지만 :

• 대신 타이머에 깜박이는 경고 아이콘을 애니메이션의이 애니메이션 GIF를 사용합니다. gif가 좋지 않으면 (256 색 이상 또는 알파 채널이 필요함) CSS 전환/애니메이션으로 깜박이십시오.

• DOM을 수정하기 전에 실제로 변경된 사항이 있는지 확인하는 논리를 추가하십시오. 이것은 지속적으로 문서를 리플 로우 할 필요가 없으므로 성능 향상에 도움이 될 것입니다 (일정한 문서 수정없이 깜박이는 알람을 애니메이션으로 처리 한 경우).

• 아직 누수가있는 경우 코드의이 부분에서 jQuery를 제거해보십시오. 누출의 원인이 될 수도 안 될 수도 있지만, 누출을 제거하고 누출이 남아 있다면, 적어도 누출이 그것을 일으키지 않았 음을 알게 될 것입니다.

나는 크롬 때문에 메모리 누수의 장기 실행 벽판 유형의 애플리케이션에 적합 아니었지만, 상황은 그 이후 개선 할 수있는 몇 년 전에 결론에 도달했다. 그 밖의 것이 없다면 앱이 탭을 죽이고 매시간 새 탭을 시작하도록 시도 할 수 있습니다. 행운을 빕니다.