질문 : HTML5 Canvas vs. SVG vs. div
즉석에서 요소를 만들고 이동할 수있는 가장 좋은 방법은 무엇입니까? 예를 들어 직사각형, 원 및 다각형을 만든 다음 해당 개체를 선택하고 이동하려고한다고 가정 해 보겠습니다.
HTML5가이를 가능하게하는 세 가지 요소 인svg , canvas 및 div를 제공한다는 것을 알고 있습니다. 내가하고 싶은 일 중 어떤 요소가 최고의 성능을 제공할까요?
이러한 접근 방식을 비교하기 위해 각각 머리글, 바닥 글, 위젯 및 텍스트 콘텐츠가 포함 된 시각적으로 동일한 웹 페이지 3 개를 만들려고했습니다. 첫 번째 페이지의 위젯은 전체적으로 canvas 요소로, 두 번째는 전체적으로 svg 요소로, 세 번째는 일반 div 요소 인 HTML 및 CSS로 만들어집니다.
답변
선택과 이동이 이미 내장되어 있기 때문에 SVG가 더 쉬울 것입니다. SVG 객체는 DOM 객체이므로 "클릭"핸들러 등이 있습니다.
DIV는 괜찮지 만 투박하고 많은 수에서 성능 이 끔찍합니다.
Canvas는 최고의 성능을 가지고 있지만 관리 상태 (객체 선택 등)의 모든 개념을 직접 구현하거나 라이브러리를 사용해야합니다.
HTML5 Canvas는 단순히 비트 맵의 그리기 화면입니다. 그림을 그리도록 설정하고 (색상과 선 두께로 말하십시오) 그 것을 그리면 Canvas는 그 것에 대해 알지 못합니다. 그것은 그것이 어디에 있는지 또는 방금 그린 것이 무엇인지 알지 못합니다. 픽셀 만. 사각형을 그려서 이동하거나 선택할 수있게하려면 그렸 음을 기억하는 코드를 포함하여 모든 것을 처음부터 코딩해야합니다.
반면 SVG는 렌더링하는 각 개체에 대한 참조를 유지해야합니다. 생성하는 모든 SVG / VML 요소는 DOM의 실제 요소입니다. 기본적으로 이렇게하면 생성 한 요소를 훨씬 더 잘 추적 할 수 있으며 기본적으로 마우스 이벤트와 같은 작업을 더 쉽게 처리 할 수 있지만 개체가 많으면 속도가 크게 느려집니다.
이러한 SVG DOM 참조는 사용자가 그리는 작업을 처리하는 일부 작업이 수행되었음을 의미합니다. SVG는 정말 큰 개체를 렌더링 할 때 더 빠르지 만 많은 개체를 렌더링 할 때는 더 느립니다.
Canvas에서는 게임이 더 빠를 것입니다. 거대한지도 프로그램은 아마도 SVG에서 더 빠를 것입니다. Canvas를 사용하고 싶다면 여기에 이동 가능한 개체를 설치하고 실행하는 방법에 대한 자습서가 있습니다.
캔버스는 더 빠른 작업과 무거운 비트 맵 조작 (예 : 애니메이션)에 더 적합하지만 많은 상호 작용을 원하면 더 많은 코드가 필요합니다.
HTML DIV로 만든 그림과 Canvas로 만든 그림에서 많은 숫자를 실행했습니다. 각각의 이점에 대해 큰 게시물을 올릴 수 있지만 특정 응용 프로그램에 대해 고려할 몇 가지 관련 테스트 결과를 제공 할 것입니다.
저는 Canvas와 HTML DIV 테스트 페이지를 만들었는데 둘 다 이동 가능한 "노드"가있었습니다. 캔버스 노드는 내가 만들고 자바 스크립트에서 추적 한 객체였습니다. HTML 노드는 이동 가능한 Div였습니다.
두 테스트 각각에 100,000 개의 노드를 추가했습니다. 그들은 매우 다르게 수행했습니다.
HTML 테스트 탭을로드하는 데 시간이 오래 걸렸습니다 (약 5 분 미만의 시간에 크롬이 처음으로 페이지를 종료하도록 요청했습니다). Chrome의 작업 관리자는 탭이 168MB를 차지한다고 말합니다. 보고있을 때는 CPU 시간이 12-13 %,보고 있지 않을 때는 0 %를 차지합니다.
캔버스 탭은 1 초에로드되며 30MB를 차지합니다. 또한보고 있는지 여부에 관계없이 항상 CPU 시간의 13 %를 차지합니다. (2013 년 편집 : 대부분 수정되었습니다)
현재 설정은 Canvas 테스트에서 30 밀리 초마다 모든 것을 다시 그리는 것이기 때문에 HTML 페이지에서 드래그하는 것이 더 부드럽습니다. 이를 위해 Canvas에 대해 많은 최적화가 필요합니다. (캔버스 무효화가 가장 쉽고, 영역 자르기, 선택적 다시 그리기 등. 구현하려는 느낌에 따라 다릅니다)
이 간단한 테스트의 div와 같이 개체 조작시 Canvas가 더 빨라지고로드 시간도 훨씬 빨라질 수 있다는 데 의심의 여지가 없습니다. 캔버스에서 그리기 / 로딩이 더 빠르고 최적화를위한 공간도 훨씬 더 많습니다 (예 : 화면에없는 항목을 제외하는 것은 매우 쉽습니다).
- SVG는 항목이 거의없는 응용 프로그램 및 응용 프로그램에 더 적합 할 수 있습니다 (1000 개 미만? 실제로 다름)
- 캔버스는 수천 개의 개체와 신중한 조작에 더 적합하지만,이를 시작하려면 더 많은 코드 (또는 라이브러리)가 필요합니다.
- HTML Div는 투박하고 크기가 조정되지 않으므로 둥근 모서리로만 원을 만들 수 있으며 복잡한 모양을 만들 수 있지만 수백 개의 작은 픽셀 너비의 div가 포함됩니다. 광기가 계속됩니다.
출처 : https://stackoverflow.com/questions/5882716/html5-canvas-vs-svg-vs-div
'프로그래밍 언어 > HTML,CSS,JS' 카테고리의 다른 글
| SCSS 파일에서 일반 CSS 파일 가져오기 (0) | 2021.08.27 |
|---|---|
| Moment js 날짜 시간 비교 (0) | 2021.08.27 |
| 변수가 JavaScript의 문자열인지 확인 (0) | 2021.08.27 |
| CSS에서 margin과 padding을 사용하는 경우 (0) | 2021.08.27 |
| node.js의 콘솔 글꼴 색상을 변경하는 방법 (0) | 2021.08.27 |