[HTML] 렌더링(Rendering)이란?

렌더링(Rendering)이란?

• 렌더링은 웹사이트 코드를 사용자가 웹 사이트를 방문할 때 보게 되는 대화형 페이지로 바꾸는 웹 개발에 사용되는 절차입니다.
• 이 용어는 일반적으로 HTML, CSS, JavaScript 코드의 사용을 나타냅니다.
• 이 절차는 렌더링 엔진에 의해서 완성됩니다. 
• 렌더링 엔진은 웹 페이지를 렌더링하기 위해 웹 브라우저에서 사용하는 소프트웨어를 의미합니다.
• 웹 브라우저와의 관련성을 이유로 렌더링은 엔진은 자주 브라우저 엔진으로도 불립니다.

브라우저가 웹 페이지를 렌더링하는 방법

웹 브라우저는 다음 순서대로 웹 페이지를 렌더링합니다.

 

원시 코드에서 DOM 및 CSSOM 구성

• 웹 페이지를 로딩하는 동안, 웹 서버는 유저의 웹 브라우저에 JavaScript 코드와 CSS, HTML 파일을 포함한 폴더를 전송합니다.
• 브라우저 엔진은 data를 characters (the HTML code)로 변환합니다. 
• chracters를 토큰으로 구문 분석하고 노드로 추가 구문 분석합니다.
• 브라우저 엔진은 노드를 DOM (Document Object Model)이라고 하는 트리와 같은 구조로 연결합니다.
• DOM은 HTML의 JavaScript 표현입니다.
• 동시에 브라우저는 유사한 프로세스를 통해 CSS 코드를 CSS 개체 모델 (CSSOM)로 변환합니다.

Render Tree를 사용하여 최종 사용자 웹 페이지 생성

• 브라우저 엔진은 DOM과 CSSOM을 결합하여 Render Tree라고 하는 나무와 같은 구조를 만듭니다.
• 렌더 트리에는 브라우저가 뷰어가 볼 수 있도록 웹 페이지를 채우고, 웹 페이지에서 볼 수 있는 각 요소의 레이아웃을 계산하고, 최종 사용자가 볼 수 있도록 화면에 그리는 데 필요한 스타일 및 콘텐츠 정보가 포함되어 있습니다.
• 레이아웃 작업은 다음 단계입니다. 렌더 트리를 사용하여 브라우저 엔진은 웹 페이지에서 보이는 각 요소의 위치를 계산합니다.
• 마지막으로 브라우저 엔진은 최종 사용자가 볼 수 있도록 화면에 요소를 추가하거나 그립니다. 이제 웹 페이지가 렌더링되었습니다.

동적 렌더링

• 자바스크립트는 직관적인 유저 경험을 만들 때 사용하기 때문에 웹 페이지를 렌더링하는데 인기있는 선택입니다.
• 그러나 많은 검색엔진 봇들은 자바스크립트를 처리하는데 어려움을 겪습니다.
• JavaScript를 사용하여 대부분의 콘텐츠와 탐색을 수용하는 웹 사이트는 웹 크롤러에 보이지 않을 위험이 있습니다.
• 동적 렌더링은 검색 엔진 봇이 크롤링하고 인덱싱할 수 있도록 정적 HTML을 렌더링하는 동시에 인간 사용자 대해 위에서 설명한 대로 웹 페이지를 렌더링하여 이 문제를 해결합니다.

SEO를 위한 렌더링의 중요성

• 웹 페이지 렌더링은 봇이 페이지를 색인화하고 사용자가 경험하는 방식에 영향을 줍니다.
• 검색 엔진 순위 및 SEO 결과에 대한 렌더링의 영향을 이해하는 것은 모든 웹 개발 팀에서 주요 고려 사항이 되어야합니다.

 

 

 

REFERENCE

https://www.seobility.net/en/wiki/Rendering

Rendering (Web Development): Definition - Seobility Wiki