렌더링(Rendering)이란?

렌더링(Rendering)이란?

• 실시간으로 웹사이트가 그려지는 과정
• 모든 웹 브라우저는 렌더링 엔진, 자바스크립트 엔진을 갖고 있음
  • 렌더링 엔진은 HTML, CSS문서와 같은 웹 사이트 코드를 읽어 화면을 그려줌
  • 자바스크립트 엔진은 JS 코드를 읽어 기능을 작동시킴

파싱

• 프로그래밍 언어로 작성된 파일을 실행시키기 위한 구문 분석 단계
• 파일의 문자열을 문법적 의미를 갖는 최소단위 토큰으로 분해
• 분해한 요소들을 노드로 만듦
• 노드들은 상하관계를 반영해 트리를 형성
• 이 트리를 파스트리라 함

렌더링 과정

Request/Response

• 브라우저는 HTML, CSS, JS, 이미지, 폰트 등 리소스를 서버에 요청
• 요청한 리소스들을 응답으로 받아옴
  • 요청 전송 방법은 URL

HTML parsing, Create DOM

• HTML, CSS를 파싱해 DOM, CSDOM을 생성
• 이를 연결해 Render tree 생성
  • DOM이란
    • HTML문서의 요소들의 중첩 관계를 기반으로 노드들의 트리구조

• HTML를 파싱할때 CSS가 사용되는 부분이 나오면 해당 리소스를 요청
• 응답으로 받아온 CSS도 토큰 단위로 나누고 노드 생성, 트리 만들어 CSSOM을 생성
• CSS Object Model
• CSS의 속성은 상속이 됨, 이를 반영

Javascript Parsing

• HTML을 파싱하는 중 <script>태그를 만나면 멈춘뒤 해상 js 파일을 서버에 요청
• 받아온 js도 파싱하는데 이는 Javascript 엔진이 담당
  • 이때문에 잠깐 HTML 파싱을 멈춤
• js 코드들을 파싱해 AST(추상 구문 트리)를 생성
  • 이를 인터프리터가 실행하는데 이를 위해 바이트 코드로 변환

Rayout

• 렌더트리를 기반으로 HTML요소의 레이아웃을 계산
  • 실제 요소들의 위치, 너비, 높이 등을 계산

Painting

• 계산한 위치에 화면에 띄움

Reflow, Repaint

• Reflow : 레이아웃 계산을 다시하는 것
• Repaint : 새로운 렌더트리를 바탕으로 다시 페인트를 하는 것