반응형 Repaint2 브라우저 성능 최적화 앞 글에서 웹 최적화를 위해 reflow와 repaint에 대한 정리를 하면서 paint과정 외에도 composite라는 과정이 더 있는 점을 알게 되었다. composite는 브라우저가 각각의 레이어를 스타일 방식에 따라서 병렬적으로 레이어로 분류되고 paint을 한 후에 모든 레이어를 합치는 과정이다. 애니메이션을 처리하기 위해서 GPU도 사용하게 된다. GPU에서 애니메이션을 처리하므로 메인 스레드는 렌더링 레이아웃에 포커스를 둘 수 있게 된다. * 브라우저가 별도의 Layer 생성할 때 조건 * - video, canvas 태그 사용 - animation 이나 transition 사용 - will-change가 opacity, left, top, bottom, right, transform - i.. 2024. 3. 30. css 성능 향상 브라우저 렌더링은 뷰포트가 변경되거나 자바스크립트에서 노드를 만지는 일이 있거나 HTML내에서 스타일을 변경하거나 할 때 반복적으로 동작한다. 이러한 순간마다 화면을 새로 화면을 그리고( reflow, repaint), 이 행동이 반복적으로 사용되게 되면 성능을 저하시킨다. 그렇기 때문에 렌더링은 최적화 시키는 방법을 알아두는 것이 중요하다. [Reflow (layout)] 레이아웃 단계는 렌더트리를 생성하면서 계산된 노드와 스타일을 기기의 뷰포트에 맞게 어떻게 위치 시켜 보일지를 결정하는 단계이다. 상대적인 측정값도 모두 절대적인 픽셀로 변환이 된다. 리플로우는 레이아웃 요소들의 수치를 계산해서 새로운 위치에 나타나게 하는 동작이 일어날 때마다 반복해서 실행되게 된다. 또한 DOM 하위, 상위에 있는 .. 2024. 3. 5. 이전 1 다음 728x90 반응형
