IT story

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

hot-time 2020. 9. 3. 23:44
반응형

페이지의 메모리 사용량을 찾는 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);


I don't know of any way that you could actually find out how much memory is being used by the browser, but you might be able to use a heuristic based on the number of elements on the page. Uinsg jQuery, you could do $('*').length and it will give you the count of the number of DOM elements. Honestly, though, it's probably easier just to do some usability testing and come up with a fixed number of tabs to support.


Use the Chrome Heap Snapshot tool

There's also a Firebug tool called MemoryBug but seems it's not very mature yet.


If you want to just see for testing there is a way in Chrome via the developer page to track memory use, but not sure how to do it in javascript directly.


I would like to suggest an entirely different solution from the other answers, namely to observe the speed of your application and once it drops below defined levels either show tips to the user to close tabs, or disable new tabs from opening. A simple class which provides this kind of information is for example https://github.com/mrdoob/stats.js . Aside of that, it might not be wise for such an intensive application to keep all tabs in memory in the first place. E.g. keeping only the user state (scroll) and loading all the data each time all but the last two tabs are opening might be a safer option.

Lastly, webkit developers have been discussing adding memory information to javascript, but they have gotten in a number of arguments about what and what should not be exposed. Either way, it's not unlikely that this kind of information will be available in a few years (although that information isn't too useful right now).


Perfect question timing with me starting on a similar project!

There is no accurate way of monitoring JS memory usage in-app since it would require higher level privileges. As mentioned in comments, checking the number of all elements etc. would be a waste of time since it ignores bound events etc.

This would be an architecture issue if memory leaks manifest or unused elements persist. Making sure that closed tabs' content is deleted completely without lingering event handlers etc. would be perfect; assuming that it's done you could just simulate heavy usage in a browser and extrapolate the results from memory monitoring (type about:memory in the address bar)

Protip: if you open the same page in IE, FF, Safari... and Chrome; and than navigate to about:memory in Chrome, it will report memory usage across all other browsers. Neat!


What you might want to do is have the server keep track of their bandwidth for that session (how many bytes of data have been sent to them). When they go over the limit, instead of sending data via ajax, the server should send an error code which javascript will use to tell the user they've used too much data.


You can get the document.documentElement.innerHTML and check its length. It would give you the number of bytes used by your web page.

This may not work in all browsers. So you can enclose all your body elements in a giant div and call innerhtml on that div. Something like <body><div id="giantDiv">...</div></body>

참고URL : https://stackoverflow.com/questions/2530228/jquery-or-javascript-to-find-memory-usage-of-page

반응형