프론트엔드 | 2021. 11. 8. 10:47

브라우저 렌더링 101 - from 조은의 프론트엔드 실무 가이드

크롬 기준의 브라우저 렌더링 101 

강의는 fastcampus 의 동영상 강의의 화면을 일부 캡쳐해서 정리해둔다.

전체적인 개요 같은 내용이다. 먼저 모르는 용어

Render Tree 

DOM 과 CSS 가 적용된 결과물 정도로 이해하고 넘어간다.

이 Render Tree 가 표현되기 위해 (렌더링을 위해), 아래와 같은 3단계의 일이 벌어진다고 알면 된다.

1. Layout
2. Paint

3. Render

라는 과정이 있다는 것을 기억하라는 강사분의 말씀.

브라우저 렌더링 기초

Layout 부분이 다시 불리게 되면 좀 느려질 가능성이 있으니 피해서 설계하는 것이 좋다.

대충 이해한 바로 써보면, (틀릴수도 있다.)

예제로는 애니메이션을 구현할 때 Position 을 변경할 수 있는데 이 부분은 layout을 변경하는 기술이 사용되므로 전체적으로 성능을 만족 시키기 어렵다. 그런데 transform 속성을 이용하면 paint 부분이 변경되는 것이어서 같은 효과를 내는데 성능을 올릴 수 있는 효과를 낼 수 있다. 

아무튼 전체 틀을 잘 이해하고 렌더링 쪽을 더 공부해보자.

렌더의 기초 구, 공

Rodion Kutsaiev 님의 사진, 출처: Pexels

댓글을 달아 주세요

">