리플 로우와 재 페인트의 차이점은 무엇입니까?

Question

reflow + repaint (전혀 차이가있는 경우)의 차이에 대해 조금 분명하지 않습니다.

리플 로우와 같은 것처럼 보이지만 여러 DOM 요소의 위치가 변경 될 수 있습니다. 여기서 repaint는 새로운 객체를 렌더링합니다. 예 : 요소를 제거 할 때 리플 로우가 발생하고 색상을 변경할 때 다시 그리기가 발생합니다.

사실인가요?

이

Answer 1

이 게시물은 다시 그리기 성능이 해당 게시물에서,

http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/ 정의에 관해서는

를 발급 대 리플 로우를 커버하는 것 같다 변화가에 만들 때

다시 그리기가 발생합니다 가시적으로 을 변경하지만 해당 레이아웃에는 영향을주지 않습니다. 이러한

예 outline, visibility, background, 또는 color 포함한다. 오페라에 따르면, 브라우저가 DOM 트리의 다른 모든 노드의 가시성을 확인해야하기 때문에 다시 칠하기는 비싸다.

리플도 성능이 더 중요하다 는 페이지 (또는 페이지 전체)의 일부분의 레이아웃에 영향을 변경을 수반하기 때문이다. 리플 로우의 원인이

예는 다음과 같습니다 추가하거나 내용을 삭제, 명시 적 또는 암시 적으로 width, height, font-family, font-size 등을 변경.

칠, 제 생각에는

Answer 2

http://csstriggers.com에있는 CSS-속성 효과 재 페인트 및 검토 알아 단지 DOM 자체가 영향을 미치지 만 리플 로우는 전체 페이지에 영향을 미칩니다.

일부 경우 색상 및 가시성과 같은 스킨 스타일 만 변경 될 때 다시 페인팅이 발생합니다.

DOM 페이지가 레이아웃을 변경하면 리플 로우가 발생합니다.

최근 사이트에서 어떤 속성이 다시 그리기 또는 리플 로우를 트리거하는지 검색 할 수 있음을 발견했습니다. 여기 http://csstriggers.com/

Answer 3

또 다른 좋은 게시물 : http://blog.letitialew.com/post/30425074101/repaints-and-reflows-manipulating-the-dom

다시 그리기, 또는 다시 그리기, 모든 요소를 ​​통과하고 가시성, 색상, 개요 및 기타 시각적 스타일 속성을 결정, 다음은 관련 부분을 업데이트 화면의.

리플 로우는 페이지의 레이아웃을 계산합니다.요소에 대한 리플 로우는 요소의 크기와 위치를 다시 계산하며, DOM에서 그 요소 다음에 나오는 요소, 하위 요소 및 요소에 대한 리플 로우를 트리거합니다. 그런 다음 최종 재 페인트를 호출합니다. 리플 로우는 매우 비쌉니다.

또한 리플 로우가 발생하고 리플 로우를 최소화 할 때 도입되었습니다.