img 대신 캔버스를 사용하면 어떤 이점이 있습니까?

Question

현재 모바일 앱을 만들고 있는데 캔버스 또는 img 태그를 사용하는 것이 성능면에서 더 좋은지 궁금합니다. 내 웹 사이트에 실제 이미지를 쿼리 할 것입니다. 하나의 이익이 다른 것보다 많은지 궁금합니다.

Answer 1

주요 이점은 불필요한 브라우저 디코딩을 피하는 것입니다.

이

1. 이미지 파일
2. 디코드 메모리 비트 맵에 원래 JPEG, GIF, PNG 또는 WebP 형식이 형식에서 이미지의 인코딩 된 콘텐츠를 검색 :에
   paint an image onto screen에 브라우저의

   , 그들은 필요

3. 사용자가 스크롤 크기를 조정할 때

성능 문제가 발생할 화면에 그것을 페인트. 디코딩은 특히 비쌉니다. 그러나 페이지를 위아래로 스크롤하면 브라우저는 이전에 점유 한 메모리 인 off-screen images (즉, 현재 스크롤 영역 외부의 내용)을 검색하려고 시도합니다. 즉, 화면 가장자리에서 이미지가 다시 나타날 때마다 브라우저는 동일한 값 비싼 디코딩 프로세스를 반복해야합니다. 긴 페이지에 많은 이미지가 튀어 나오면 브라우저가 스크롤을 더듬 거리게됩니다.

캔버스의 다른 점 : 브라우저는 캔버스 내부에서 디코딩 된 정보를 재활용하지 않습니다. 캔버스를 사용하여 이미지를 렌더링하면 불필요한 디코딩을 피할 수 있습니다.

물론 휴대 기기를 타겟팅하는 경우 이미지 태그로 다시 전환하고 메모리가 부족하기 때문에 브라우저에서 작업을 수행 할 수 있습니다.

이것은 이미지 디코딩과 제한된 메모리 간의 충돌을 다루는 브라우저 관련 전술이라고 생각합니다. Timeline 개발 도구에서 프로세스가 표시되기 때문에 Chrome에 대해 더 구체적으로 말하고있었습니다.

Answer 2

아니요! 정적 콘텐츠를 표시하는 경우 <canvas>은 느리고 훨씬 더 둔합니다. <canvas>과 <img>은 완전히 다른 작업을 수행합니다. 전자는 JavaScript를 사용하는 동적 그래픽 용이고 후자는 URI에서 검색 한 정적 이미지 용입니다.

Answer 3

HTML은 스트리밍하는 동안 브라우저가 IMG 소스를로드하는 데 최적화되는 경향이 있으므로 페이지가 완전히로드되기 전에 이미지가 표시됩니다. 반면 캔버스는로드되는 DOM에 종속적이므로 DOMContentLoaded 이벤트가 발생하기 전까지는 (일반적으로)로드되지 않습니다. 캔버스 컨텍스트와 메모리 요구 사항을 만드는 데 대기 시간을 추가하면 이미지가 실제로 정적 인 경우 거의 확실하지 않습니다.

이미지로 멋진 것을하고 싶다면 왜 이미지를 IMG 태그에로드 한 다음 변환을 수행하기 위해 일단로드 한 다음 캔버스로 변환하지 않습니까?