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

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

---

리플 로우 + 리 페인트의 차이점에 대해 약간 불분명합니다 (차이가있는 경우)

리플 로우는 다양한 DOM 요소의 위치를 ​​바꾸는 것처럼 보입니다. 여기서 repaint는 단지 새 객체를 렌더링하는 것입니다. 예를 들어 요소를 제거 할 때 리플 로우가 발생하고 색상을 변경할 때 다시 페인트가 발생합니다.

이것이 사실입니까?

---

이 게시물은 리플 로우 대 리 페인트 성능 문제를 다루는 것 같습니다.

http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/

정의에 관해서는 그 게시물에서 :

재 페인트는 변화가 눈에 띄게 변경하는 요소 피부에 만들어진, 그러나 그것의 레이아웃에 영향을주지 않는 경우에 발생합니다.

이것의 예는 outline, visibility, background, 또는 color. Opera에 따르면 브라우저가 DOM 트리에있는 다른 모든 노드의 가시성을 확인해야하기 때문에 다시 그리기는 비용이 많이 듭니다.

리플 로우 는 페이지 (또는 전체 페이지)의 일부의 레이아웃에 영향을주는 변경을 포함하기 때문에 더욱 중요 성능이다.

예를 들면 원인 리플 로우를 포함하는 것이 : 추가하거나 내용을 삭제, 명시 적 또는 암시 적으로 변경 width, height, font-family, font-size등.

http://csstriggers.com 에서 어떤 css-properties 효과가 다시 그려지고 검토되는지 알아보십시오 .

---

제 생각에 repaint는 DOM 자체에만 영향을 주지만 리플 로우는 전체 페이지에 영향을줍니다.

Repaint는 색상 및 가시성과 같은 스킨 스타일 만 변경할 때 발생합니다.

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

최근에 어떤 속성이 리 페인트 또는 리플 로우를 트리거할지 검색 할 수있는 사이트를 찾았습니다. http://csstriggers.com/

---

또 다른 훌륭한 게시물이 있습니다 : http://blog.letitialew.com/post/30425074101/repaints-and-reflows-manipulating-the-dom

다시 그리기 또는 다시 그리기는 모든 요소를 ​​살펴보고 가시성, 색상, 윤곽선 및 기타 시각적 스타일 속성을 결정한 다음 화면의 관련 부분을 업데이트합니다.

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

또한 리플 로우 발생시기와 리플 로우 최소화 방법도 소개했습니다.

---

DOM 레이아웃이 변경되면 리플 로우 가 발생합니다. 페이지 요소의 크기와 위치를 다시 계산해야하기 때문에 리플 로우는 계산적으로 매우 비쌉니다. 그러면 화면이 다시 그려 집니다.

리플 로우를 유발하는 것의 예

for (let i = 1; i <= 100; i++ {
const newEle = document.createElement('p');
newEle.textContent = 'newly created paragraph element';

document.body.appendChild(newEle);
}

위의 코드는 매우 비효율적이므로 추가 된 모든 새 단락 요소에 대해 100 개의 리플 로우 프로세스가 발생합니다.

다음을 사용하여 계산적으로 스트레스가 많은 프로세스를 완화 할 수 있습니다. .createDocumentFragment()

const docFrag = document.createDocumentFragment();

 for (let i = 1; i <= 100; i++ {
    const newEle = document.createElement('p');
    newEle.textContent = 'newly created paragraph element';

    docFrag.appendChild(newEle);
    }

document.body.appendChild(docFrag);

위의 코드는 이제 100 개의 새 단락 요소를 만드는 데 리플 로우 프로세스 1x 만 사용합니다.

리 페인트 는 단순히 모니터의 픽셀을 변경하는 것이며, 리플 로우는 절차에 리 페인트를 포함하기 때문에 여전히 두 가지 악 중 더 적은 부담입니다.

참고URL : https://stackoverflow.com/questions/2549296/whats-the-difference-between-reflow-and-repaint