SVG/SMIL 리플 로우/페인트 칠의 성능 영향?

Question

이전에는 DOM 조작을 포함하여 자바 스크립트에서 많은 작업을 수행했습니다. 거기에서 리플 로우/페인트 칠은 어떤 경우에는 큰 성능 문제가 될 수 있으며 일반적으로 최소로 제한되어야한다는 것을 알게되었습니다. 예를 들어 div 그룹을 추가 할 때와 같이 한 번에 모두 추가해야합니다 (DOM 외부의 div에 첨부 한 다음 첨부). 동일한 내용이 다시 칠하기 때문에 요소의 CSS 속성을 변경하여 트리거 할 수 있습니다. 비록 내가 그다지 재 페인트를 들여다 보지 못했다는 것을 인정해야 하겠지만, 나는 마지막 부분에 대해 틀릴 수도있다.

이것은 SVG에도 적용 되는가? (가능한 일종의 DOM을 사용하는 것을 볼 때)? 그리고 다른 SVG 요소에 차이점이 있습니까? 예를 들어, 애니메이션 요소는 새로운 SVG 요소가 아니기 때문에 리플 로우를 생성하지 않지만 속성과 더 비슷합니다.

SVG에 대한 재 페인트는 확실하지 않지만 CSS/HTML과 동일한 방식으로 존재합니까? 모든 SMIL 애니메이션이 이미 프레임을 생성 한 후에 새 프레임이 렌더링 될 것이므로 "다시 그리기"와 같은 것은 아무런 차이가 없습니다.

나를 위해 이러한 것들을 명확히 할 수있는 SMIL의 내부 동작을 더 잘 이해하는 사람은 누구입니까?

Answer 1

귀하의 정보는 유효 기한이 지났습니다. UA 일괄 처리는 최근 DOM을 바깥으로 div를 첨부 할 필요가 없도록 요즘 리플 로우합니다.

SVG는 실제로 기본적으로 모든 위치에 있으므로 리플 로우가 없으므로 한 요소의 위치 만 변경하면 해당 요소와 하위 노드에만 영향을줍니다. SVG DOM 변경으로 인해 페인트가 다시 발생합니다. 적절한 데이터가 그래픽 메모리에있는 경우 때때로 repaint가 필요하지 않습니다. instand translate transform은 그래픽 하드웨어 렌더러에 의해 대부분 완전히 다시 처리되지 않고 처리됩니다. SMIL 애니메이션도이 메커니즘에 연결됩니다.

SVG 내용에 변환 속성이 ​​있으면 별도의 레이어에 저장됩니다. 많은 경우에 다시 렌더링하지 않고 레이어를 업데이트 할 수 있습니다. 그래픽 시스템으로서의 번역은 그들이 갈 필요가있는 곳에 레이어를 그릴 수 있습니다.

how this works in Firefox here에 대한 문서가 더 있지만 다른 UA도 비슷한 방식으로 작동합니다.