프론트엔드
-
[React & 브라우저] 브라우저의 동작 과정 (feat. 렌더링 실행)FrontEnd/React.js 2022. 12. 23. 19:40
프론트엔드(FE) 개발자가 브라우저(Br) 동작 원리를 알아야 하는 이유 FE에게 Br는 거의 모든 것. Br를 통해 개발, Br를 통해 테스트 및 배포 진행, 사용자들은 Br를 통해 웹에 접속 FE는 Br의 모든 것이 아닌 HTML, CSS, JS가 의도대로 동작하는지 확인해도 큰 문제x 하지만 기능이 많고 다양한 동작이 발생한다면 최적화가 필요해짐 Br의 최적화를 위해선 결국 Br의 동작 원리를 이해하는 것에서부터 시작 해당 포스트에서 알아볼 것 => Br의 렌더 과정 & 원리 ( 아래는 선 4줄 요약 ) HTML로부터 DOM 트리를, CSS로부터 CSSOM 트리를 빌드 DOM & CSSOM을 결합하여 렌더 트리를 형성 렌더 트리에서 레이아웃을 실행 => 각 노드의 기학학적 형태를 계산 개별 노드를 ..