페이지의 메모리 사용량을 찾는 jQuery 또는 javascript

웹 페이지 또는 내 jquery 응용 프로그램에서 사용중인 메모리 양을 확인할 수있는 방법이 있습니까?

내 상황은 다음과 같습니다.

jquery 프런트 엔드와 JSON으로 데이터를 제공하는 편안한 백엔드를 사용하여 데이터가 많은 웹 애플리케이션을 구축하고 있습니다. 페이지가 한 번로드되면 모든 것이 ajax를 통해 발생합니다.

UI는 사용자에게 UI 내에서 여러 탭을 만드는 방법을 제공하며 각 탭에는 많은 양의 데이터가 포함될 수 있습니다. 만들 수있는 탭 수를 제한하는 것을 고려하고 있지만 메모리 사용량이 특정 임계 값을 초과하면 제한하는 것이 좋을 것이라고 생각했습니다.

답변을 바탕으로 몇 가지 설명을하고 싶습니다.

• 개발자 도구뿐만 아니라 런타임 솔루션을 찾고 있는데,이를 통해 내 애플리케이션이 사용자 브라우저의 메모리 사용량에 따라 작업을 결정할 수 있습니다.
• DOM 요소 또는 문서 크기를 계산하는 것은 좋은 추정치 일 수 있지만 이벤트 바인딩, data (), 플러그인 및 기타 메모리 내 데이터 구조를 포함하지 않기 때문에 매우 정확하지 않을 수 있습니다.

2015 업데이트

2012 년에는 사용중인 모든 주요 브라우저를 지원하려는 경우 불가능했습니다. 안타깝게도 현재이 기능 은 여전히 Chrome 전용 기능입니다 (의 비표준 확장 window.performance).

window.performance.memory

브라우저 지원 : Chrome 6 이상

2012 년 답변

웹 페이지 또는 내 jquery 응용 프로그램에서 사용중인 메모리 양을 확인할 수있는 방법이 있습니까? 개발자 도구뿐만 아니라 런타임 솔루션을 찾고 있는데,이를 통해 내 애플리케이션이 사용자 브라우저의 메모리 사용량에 따라 작업을 결정할 수 있습니다.

간단하지만 정답은 ' 아니오' 입니다. 모든 브라우저가 그러한 데이터를 귀하에게 노출하는 것은 아닙니다. "수제" 솔루션 의 복잡성과 부정확성이 해결하는 것보다 더 많은 문제를 일으킬 수 있기 때문에 아이디어를 포기해야한다고 생각합니다 .

DOM 요소 또는 문서 크기를 계산하는 것은 좋은 추정치 일 수 있지만 이벤트 바인딩, data (), 플러그인 및 기타 메모리 내 데이터 구조를 포함하지 않기 때문에 매우 정확하지 않을 수 있습니다.

아이디어를 고수하고 싶다면 고정 콘텐츠와 동적 콘텐츠를 분리해야합니다.

고정 콘텐츠는 사용자 작업 (스크립트 파일, 플러그인 등에서 사용하는 메모리)에 의존하지 않습니다.
다른 모든 것은 동적으로 간주되며 제한을 결정할 때 주요 초점이되어야합니다.

그러나 그것들을 요약하는 쉬운 방법은 없습니다. 이러한 모든 정보를 수집 하는 추적 시스템을 구현할 수 있습니다. 모든 작업은 적절한 추적 방법을 호출해야합니다. 예 :

추적 시스템에 데이터 할당 jQuery.data을 알리는 방법을 래핑하거나 덮어 씁니다 .

콘텐츠 추가 또는 제거도 추적되도록 html 조작을 래핑 innerHTML.length합니다 (가장 좋은 추정치).

대용량 메모리 개체를 유지하는 경우에도 모니터링해야합니다.

이벤트 바인딩 과 관련 하여 이벤트 위임 을 사용해야하며 이는 다소 고정 된 요소로 간주 될 수도 있습니다.

메모리 요구 사항을 올바르게 추정하기 어렵게 만드는 또 다른 측면은 다른 브라우저가 (Javascript 객체 및 DOM 요소에 대해) 메모리를 다르게 할당 할 수 있다는 것입니다.

Navigation Timing API를 사용할 수 있습니다 .

Navigation Timing은 웹에서 성능을 정확하게 측정하기위한 JavaScript API입니다. API는 페이지 탐색 및로드 이벤트에 대한 정확하고 상세한 타이밍 통계를 기본적으로 얻을 수있는 간단한 방법을 제공합니다.

window.performance.memory JavaScript 메모리 사용량 데이터에 대한 액세스를 제공합니다.

추천 도서

• 탐색 타이밍으로 페이지로드 속도 측정

이 질문은 5 년 전의 것으로, 자바 스크립트와 브라우저 모두이시기에 엄청나게 발전했습니다. 지금은 가능하고 (적어도 일부 브라우저에서는)이 질문이 Google에서 "javascript show memory useage"를 표시 할 때의 첫 번째 결과이므로 현대적인 솔루션을 제공 할 것이라고 생각했습니다.

memory-stats.js : https://github.com/paulirish/memory-stats.js/tree/master

이 스크립트 (어느 페이지에서든 언제든지 실행할 수 있음)는 페이지의 현재 메모리 사용량을 표시합니다.

var script=document.createElement('script');
script.src='https://rawgit.com/paulirish/memory-stats.js/master/bookmarklet.js';
document.head.appendChild(script);

실제로 브라우저에서 얼마나 많은 메모리를 사용하고 있는지 알아낼 수있는 방법은 없지만 페이지의 요소 수에 따라 휴리스틱을 사용할 수 있습니다. Uinsg jQuery, 당신이 할 수 $('*').length있고 그것은 당신에게 DOM 요소의 수를 줄 것입니다. 그러나 솔직히 사용성 테스트를 수행하고 지원할 고정 된 수의 탭을 만드는 것이 더 쉬울 것입니다.

사용 크롬 힙 스냅 샷 도구를

MemoryBug 라는 Firebug 도구도 있지만 아직 성숙하지 않은 것 같습니다.

테스트를 위해 Chrome에서 개발자 페이지를 통해 메모리 사용을 추적하는 방법이 있지만 자바 스크립트에서 직접 수행하는 방법을 모르겠습니다.

응용 프로그램의 속도를 관찰하고 정의 된 수준 아래로 떨어지면 사용자에게 탭을 닫거나 새 탭이 열리지 않도록하는 팁을 표시하는 등 다른 답변과는 완전히 다른 솔루션을 제안하고 싶습니다. 이러한 종류의 정보를 제공하는 간단한 클래스는 예를 들어 https://github.com/mrdoob/stats.js 입니다. 그 외에도, 이러한 집약적 인 응용 프로그램은 처음부터 모든 탭을 메모리에 보관하는 것이 현명하지 않을 수 있습니다. 예를 들어 사용자 상태 (스크롤) 만 유지하고 마지막 두 탭이 열릴 때마다 모든 데이터를로드하는 것이 더 안전한 옵션 일 수 있습니다.

마지막으로, 웹킷 개발자는 자바 스크립트에 메모리 정보를 추가하는 것에 대해 논의 해 왔지만 노출해서는 안되는 항목과 항목에 대해 여러 가지 논쟁을 벌였습니다. 어느 쪽이든, 이러한 종류의 정보가 몇 년 안에 이용 가능할 것 같지는 않습니다 (지금 당장은 그 정보가 너무 유용하지는 않지만).

비슷한 프로젝트를 시작하면서 완벽한 질문 타이밍!

더 높은 수준의 권한이 필요하므로 앱 내에서 JS 메모리 사용을 모니터링하는 정확한 방법이 없습니다. 주석에서 언급했듯이 모든 요소 등의 수를 확인하는 것은 바운드 이벤트 등을 무시하므로 시간 낭비가 될 것입니다.

이는 메모리 누수 매니페스트 또는 사용하지 않는 요소가 지속되는 경우 아키텍처 문제입니다. 닫힌 탭의 내용이 느린 이벤트 핸들러 등없이 완전히 삭제되었는지 확인하는 것이 완벽합니다. 완료되었다고 가정하면 브라우저에서 과도한 사용량을 시뮬레이션하고 메모리 모니터링 결과를 추정 할 수 있습니다 ( 주소 표시 줄에 about : memory 입력 ).

Protip : IE, FF, Safari ... 및 Chrome에서 동일한 페이지를 여는 경우; Chrome에서 about : memory 로 이동하는 것보다 다른 모든 브라우저 에서 메모리 사용량을보고 합니다. 산뜻한!

원하는 것은 서버가 해당 세션에 대한 대역폭을 추적하도록하는 것입니다 (전송 된 데이터 바이트 수). 한도를 초과하면 ajax를 통해 데이터를 보내는 대신 서버는 사용자에게 너무 많은 데이터를 사용했음을 알리기 위해 자바 스크립트가 사용할 오류 코드를 보내야합니다.

document.documentElement.innerHTML을 가져 와서 길이를 확인할 수 있습니다. 웹 페이지에서 사용하는 바이트 수를 제공합니다.

이것은 모든 브라우저에서 작동하지 않을 수 있습니다. 따라서 모든 body 요소를 거대한 div로 묶고 해당 div에서 innerhtml을 호출 할 수 있습니다. 같은 것<body><div id="giantDiv">...</div></body>