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

크롬 기준의 브라우저 렌더링 101 강의는 fastcampus 의 동영상 강의의 화면을 일부 캡쳐해서 정리해둔다. 전체적인 개요 같은 내용이다. 먼저 모르는 용어 Render Tree DOM 과 CSS 가 적용된 결과물 정도로 이해하고 넘어간다. 이 Render Tree 가 표현되기 위해 (렌더링을 위해), 아래와 같은 3단계의 일이 벌어진다고 알면 된다. 1. Layout 2. Paint 3. Render 라는 과정이 있다는 것을 기억하라는 강사분의 말씀. Layout 부분이 다시 불리게 되면 좀 느려질 가능성이 있으니 피해서 설계하는 것이 좋다. 대충 이해한 바로 써보면, (틀릴수도 있다.) 예제로는 애니메이션을 구현할 때 Position 을 변경할 수 있는데 이 부분은 layout을 변경하는 기술이..