렌더링 프로세스1 웹 프론트엔드 성능 비용 Reflow & Repaint 나는 백엔드에 더 관심이 많고 앞으로도 그럴테지만, 웹 개발자이고 웹에 대한 이해가 필요하다고 생각된다. 일을 하다가 궁금한 부분이 생겨서 질문을 했는데, Reflow & Repaint 라는걸 알게되어 궁금해서 바로 이 글을 쓰게 되었다. 브라우저 렌더링 프로세스 Rendering Engine Basic Flow 브라우저가 네트워크 계층에서 요청된 데이터를 받아오면, 렌더링 엔진이 움직이기 시작한다. 렌더링 엔진이 HTML 코드를 파싱해 DOM Tree 생성, CSS 코드를 파싱해 스타일 규칙 생성 위 두 가지를 합쳐 렌더 트리 생성 렌더 트리로 배치 시작 실제 화면 그리기 1~3 번은 Reflow, 4번은 Refaint에 해당하는 단계이다. 특정 엘리먼트의 Color 값 변화 Repaint 발생 특정 .. 2019. 10. 3. 이전 1 다음
