브라우저 렌더링 성능 최적화 - Repaint가 일어나지 않는 CSS 속성
이전포스팅에서 브라우저의 렌더링 과정과 Reflow, Repaint를 어떻게 최적화 할 수 있는지 대략적으로 알아보았습니다. 그중 Repaint가 일어나지 않는 CSS 속성이 있다고 간단히 언급을 했는데요, Repaint가 일어나지 않는 CSS 속성과 그 원리에 대해 알아보도록 하겠습니다. Composite 우선 Repaint가 일어나지 않는 속성들에 대해 알아보기 전에 Composite 단계부터 짚고 넘어가야 합니다. 아래 그림은 초기 렌더링이 완료된 이후에 애니메이션이나 요소에 변화를 주어 발생하는 렌더링 흐름 입니다. 요소의 스타일을 변경하기 위해 JavaScript가 실행되고 Style변경, 계산이 다시일어납니다. 그 후 Reflow(Layout) 와 Repaint(Paint) 단계를 거치게 됩니..
카테고리 없음
2019. 7. 31. 22:26