svg를 다룰 때 메모리 관리 <image> 님의

Question

꽤 큰 SVG 이미지 파일을 만들기 위해 SVG-Edit을 사용하고 있습니다. 문제는 메모리 사용량이 미친 것처럼 보입니다. 정상인지 또는 최적화 부서에서 누락 된 부분이 있는지 궁금합니다. 여기

파이어 폭스 (10)를 사용하여 각 단계에서 테이블 보여주는 메모리 델타 약 : 메모리 페이지 :

단계 :

• 전 : SVG-편집이로드되기 전에
• 준비 : SVG-Edit가로드되었습니다.
• 총 크기 16.6MB * 3534 이미지로드
• 미리보기 생성 된 파일 *
약을 통해
• 청산 미리보기 *
• 닫은 탭, 트리거 FF 메모리 정리 : 메모리 페이지

* 내 사용자 정의 기능을하지 SVG-편집의

준비의 델타에서 볼 수 있듯이 < -> 이미지로드, 메모리 사용량이 300MB 증가했습니다! 16 MB의 이미지를로드하려면! 이미지를로드하는 방법은 ObjectURL을 작성하는 것이므로 그 이유가 될 수 없습니다. 미리보기가 진행되는 동안 ObjectURL 배열을 데이터로 변환합니다 : uri, 그래서 나는 거대한 증가를 이해합니다 (여전히 너무 많이 생각합니다). 요구 사항은 모든 이미지가 포함 된 단일 결과 SVG를 갖는 것이므로 각 SVG가 50MB 이상인 것이 일반적입니다.

SVG-Edit는 Canvas를 사용하지 않습니다. DOM 기반 편집기입니다.

나는 특히 메모리를 정확히 차지하는 것을 정확히 파악할 수있는 방법에 대해 도움을 얻을 수 있습니다. SRC, 폭, 높이의 SVGImage 소자를 만들 된 ObjectURL

세트 Image.onload 이벤트에

• 세트 Image.src : 화상 (입력의 변화() 이벤트)를로드 할 때

  은 여기서 단순 흐름의 이미지에서 복사했습니다. revokeObjectURL()는 또한 SVGImages는

Answer 1

16메가바이트는 SVG의 크기 SVG로 객체 {imageID, < 화상 > 요소 파일 핸들}

가 추가 글로벌 배열

저장소의 SVGImage 실행된다. 300 메가 바이트 점프는 픽셀 데이터 인 이미지 표면입니다. 렌더링 된 이미지의 픽셀 당 4 바이트가됩니다.

1000px x 1000px 직사각형의 작은 SVG 이미지를 만들 수 있습니다. 이것은 아마도 500 바이트 이하의 SVG에서 수행 될 수 있습니다. 하지만 렌더링 된 버전은 4MB의 픽셀 데이터가 될 것입니다 ....