첫사랑은 아름다워서

브라우저 렌더링 과정 🤔 자바스크립트는 현재 Node.js의 등장으로 백엔드에서도 사용되고 있지만, 그래도 웹 어플리케이션을 만들 때 주로 사용되고 있습니다. 그래서 이번에는 브라우저에서 HTML, CSS, 그리고 자바스크립트로 작성한 문서가 렌더링되는 과정을 알아 보려 합니다. 빠르고 신뢰할 수 있는 웹사이트를 구축하려면, 브라우저가 웹페이지를 렌더링하기 위해 거치는 단계들의 메커니즘을 이해하는 것이 필요하다 생각합니다. 아래에서 소개할 렌더링 과정을 요약하면 다음과 같습니다. HTML 파싱 외부 리소스 가져오기 CSS 파싱 및 CSSOM 생성 자바스크립트 실행 DOM과 CSSOM 병합 후 렌더 트리 생성 레이아웃 계산 및 페인트 렌더링(Rendering): HTML, CSS, JavaScript로 작..