2013-03-21 5 views
4

나는 이것에 대한 몇 가지 관련 출처를 찾으려고 노력했지만 아무 것도 발견하지 못했습니다.캔버스 대 img - 성능

제 질문은 매우 간단합니다. 캔버스가 img보다 빠릅니까? img (png, gif) 또는 캔버스에서와 같이 객체를 사용합니다.

  1. 개체 회사의 예 로고를 들면, 한 번만 관리자의 예를 아이콘에 대한 동일한 개체의
  2. 여러 사용, 다른 개체의
  3. 여러 사용을 사용한다.

메모리 사용, 브라우저 성능 및 로딩 속도에 관심이 있습니다.

편집 # 1 : 캔버스는 js로 그려지며 img 태그의 이미지와 동일합니다.

+0

''* 대 ''태그 *에 무언가를 그리겠습니까? "더 빨리"어떤 식으로? 다운로드 속도? 렌더링 속도? – deceze

+0

예. 제 말은 ... 질문을 편집합니다. 감사합니다. –

+3

거의 모든 경우에 총 비공개입니다. img가 필요할 때 캔버스와 img가 필요할 때 캔버스를 사용해야합니다. 필요에 따라 선택하고 * 필요할 때 * 최적화하십시오. – JJJ

답변

3

아니요, imgcanvas을 사용하는 것보다 빠르고 쉽게 작성하고 액세스하기 쉽습니다. img 태그는 이미지을 표시하도록 설계되었으므로 수행해야하는 경우 img 태그를 사용하십시오. 이미지는 한 번만 다운로드되므로 여러 용도로 사용하면 안됩니다.

애니메이션이나 인터랙션이 필요한 경우, 그 시간은 canvas입니다.

+0

'img'가 더 빠릅니까? 이유를 설명해 주시겠습니까? – Robula

+0

@Robula'img'는 이미지를 그리기 위해 제작되었으며, 모든 것은 원시 코드로 처리됩니다. 캔버스의 경우, DOM 요소를 만들고 이미지를 (잠재적으로'img' 요소를 통해) 잡아서 그려야합니다. 그것들은 모든 종류의 것들을 그리기위한 일반적인 캔버스가되도록 만들어졌으며,'img'는 단순하고 그림 그리기에 더 좋습니다. –

+0

설명해 주셔서 감사합니다. 캔버스가 WebGL을 사용함에 따라 더 많은 공연을 할 수 있다는 인상을 받았다. – Robula