이번 Pre-Onboarding에서 브라우저 작동 원리와, 이벤트 루프에 대해 블로깅을 하는 과제를 주어졌습니다.
웹에서만 쓰는 언어였던 JavaScript는 다른 언어와 다르게 하나의 엔진을 가지고 있었습니다. 바로 그것이 브라우저입니다.
(브라우저마다 가지고 있는 엔진은 다르지만 속으로 들어가보면 복잡해지니 하나라고 간단하게 명시했습니다. 그리고 서버를 컨트롤할 수 있는 Node.js 엔진이 있습니다.)
브라우저가 어떻게 작동되는지 기초적인 부분을 알고 있으면 JavaScript에 대한 이해도가 더 높아졌으면 해서 과제를 내주신 것 같습니다.
그럼 흐름에 따라 오늘도 재밌게 블로깅을 해보겠습니다 🤟
🌏 브라우저
웹 페이지, 이미지, 비디오 등의 콘텐츠를 수신 및 전송을 표현하는 소프트웨어
브라우저의 주요 기능
- 사용자가 원하는 웹페이지를 서버에 요청(Request)하고 서버의 응답(Reponse)을 표시
- 웹 표준화 기구인 W3C(World Wide Web Consortium)가 정한 명세༌에 따라 작성했던 HTML, CSS 파일들을 해석해서 보여준다.
(명세༌: 분명하고 자세하다. // 분명하고 자세하게 정한 규칙인 것 같다.)
과거에는 W3C에서 명세를 따르지 않았던 브라우저가 많아 웹 제작자가 심각한 호환성 문제를 겪었지만 최근에는 대부분의 브라우저가 표준 명세를 따른다.
브라우저의 종류
크롬, 사파리, 엣지, 파이어폭스, 애증의 IE❤️🔥
이렇게 종류가 많은 만큼 같은 데이터라도 각각 다른 방식으로 해석하는데 그래서 개발자는 브라우저의 지속성을 같기 위해 웹 표준을 고려해야만 한다.( 개발자의 필수 💁🏻♀️ )
렌더링 엔진
렌더링 엔진의 역할은 요청 받은 내용을 브라우저 화면에 표시하는 일이다.
-
브라우저 마다 서로 다른 엔진 사용한다.
- Firefox 👉 Gecko
- Safari, Chrome 👉 Webkit
웹킷은 최초 리눅스 플랫폼에서 동작하기 위해 제작된 오픈소스 엔진인데 애플이 맥과 윈도우즈에서 사파리 브라우저를 지원하기 위해 수정을 가했다.
렌더링 엔진의 동작 과정
- DOM 트리 구축 위한 HTML 파싱༌
- 렌더 트리 구축
- 렌더 트리 배치
- 랜더 트리 그리기
HTML 문서를 파싱하여 "콘텐츠 트리"를 만들어 내부에서 태그를 DOM 노드로 변환, css파일 역시 파싱하여 스타일 규칙을 만든다. DOM 트리와, 스타일 규칙을 합쳐 "렌더 트리"를 생성하여, 합친 내용과 스타일을 정해진 순서대로 화면에 표시
이것은 각 노드가 화면의 정확한 위치에 표시되는 것을 의미
UI 백엔드에서 렌더 트리의 각 노드를 가로지르며 형상을 만들어 내는 그리기 과정이다.
(파싱༌ : 일련의 문자열을 의미있는 token(어휘 분석의 단위) 으로 분해하고 그것들로 이루어진 Parse tree를 만드는 과정)
브라우저 내부에서 수행되는 단계
- HTML 분석
- 외부 스타일 시트 로드
- 문서에서 스크립트 분석 후 실행
- HTML DOM 구성
- 이미지와 외부 콘텐츠 로드
- 페이지 로딩 끝
(단, HTML 구조에 따라 다름,)
파싱에 대한 내용은 정말 중요하고 한 번에 배우기 힘든 내용이라 복습할겸 다음에 본격적으로 파해쳐봐야겠다😂
참고한 사이트
