웹 페이지에 사용할 수 있는 메모리는 얼마입니까?

웹 페이지에 사용할 수 있는 메모리는 얼마입니까?

반응형

단일 사용자가 원하는 데이터 세트가 브라우저 메모리에 들어갈 수 있는 경우 브라우저에 모든 데이터를 한 번에 로드하는 것이 좋습니다.

임상 데이터를 예로 들어봅시다. 임상연구에서 과학자들은 환자 집단과 함께 일한다. 현재 지배적인 COVID-19 연구에서 환자 집단에는 기껏해야 수만 명의 환자가 포함된다. 전체 데이터가 보안 Excel과 같은 웹 응용 프로그램에 로드된 경우 데이터를 완전히 렌더링할 필요가 없습니다. 브라우저 메모리에 있는 이 메모리는 더 나은 사용자 환경을 보장하기에 충분합니다. 사용자는 추가 SQL 쿼리 및 관련 네트워크 요청이 실행될 때까지 기다리지 않고 필터링, 검색, 정렬, 그래프 만들기 및 내보내기를 수행할 수 있기 때문에 만족하게 됩니다. 최신 파일 시스템 API로 웹 애플리케이션들은 연구자들이 선호하는 도구인 엑셀을 완전히 대체할 준비가 되어 있다.

또한 개발자 관점에서 자바스크립트를 사용하는 브라우저에서 데이터를 처리하는 것은 백엔드에서보다 훨씬 쉽습니다. 브라우저의 개발, 테스트 및 디버깅은 백엔드 코드 개발에 비해 빠르고 간단합니다. 백엔드 개발은 코드가 상세하고 상대적으로 핸디캡이 있는 Java로 작성되어 실행 전에 컴파일되어야 할 경우 특히 느립니다.

그러면 브라우저의 탭으로 열려 있는 웹 페이지에 얼마나 많은 메모리를 사용할 수 있을까요? 웹 애플리케이션의 메모리 제한은 얼마입니까?

크롬에서 스크립트는 사용 가능한 메모리의 크기를 추정할 방법이 없는 것으로 알고 있습니다. 메모리 제한을 추정하기 위해 다른 방법을 사용할 것입니다. 브라우저가 고장날 때까지 메모리를 계속 채울 것입니다.

사용된 메모리를 측정하는 방법은?

크롬 탭에 로드된 페이지에서 사용되는 메모리를 측정하는 두 가지 신뢰할 수 있는 방법이 있습니다.

작업 관리자의 메모리 설치 공간 열에 있습니다.

프로그래밍 방식으로 새로운 메모리 API를 사용합니다. 두 가지 접근 방식 모두 유사한 결과를 도출합니다. measureUser에이전트SpecificMemory()의 유일한 불편한 점은 개발자를 위한 방법이라는 것입니다. 브라우저가 추가 플래그와 함께 실행되지 않는 한 속도가 느리므로 개발자에게 문제가 되지 않습니다.

두 방법 모두 유사한 값을 생성합니다. 예를 들어 샘플 웹 페이지 https://outofmemory.onrender.com/의 스크립트가 총 11억 개의 문자를 포함하는 11개의 문자열을 생성하면 메모리 API는 1100.8MB를 반환합니다. 작업 관리자는 유사한 값 1105MB를 표시합니다.

메모리가 부족한 방법

이를 위해 제 샘플 스크립트는 1초에 한 번씩 1억 자 길이의 문자열을 만들어 냅니다.

const MB = 1_000_000; function toMB(num) { return (num / MB).toFixed(1); } function tableRow(count, len, mbs) { return `${count}${toMB(len)}${toMB(mbs)}` } const strs = []; runBtn.onclick = async function addString() { strs.push('X'.repeat(100 * MB)); strs.at(-1)[0]; const memory = await performance.measureUserAgentSpecificMemory(); const chars = strs.reduce((t, s) => t + s.length, 0); table.insertAdjacentHTML('beforeend', tableRow(strs.length, chars, memory.bytes));; setTimeout(addString, 1000); }

메모리의 문자열 크기와 문자의 길이가 같으려면 새로 만든 문자열을 평평하게 만들어야 합니다. 마지막으로 생성된 문자열(배열 str의 마지막 문자열)을 마이너스 인덱스가 있는()에서 속기 메서드를 사용하여 검색합니다.

새 문자열을 만든 후 스크립트는 생성된 문자열 수, 문자열의 총 길이 및 채워진 메모리의 크기를 가진 행을 테이블에 추가합니다.

결국 사용 가능한 메모리가 남아 있지 않으면 페이지가 충돌합니다. 페이지를 닫을 수만 있습니다.

8GB인 일반 컴퓨터에서는 2.1GB가 채워지면 페이지가 충돌합니다. 사용 가능한 메모리가 컴퓨터 전체 메모리에 따라 어떻게 달라지는지 잘 모르겠습니다. 어쨌든, 그 결과는 많은 데이터가 일반 사용자의 브라우저에 안전하게 로드될 수 있다는 것을 의미한다.

샘플 코드는 https://github.com/marianc000/outOfMemory에서 다운로드하거나 샘플 웹 페이지에서 직접 검사할 수 있습니다.

from http://it-ground.tistory.com/213 by ccl(A) rewrite - 2021-09-23 04:01:27