https://www.youtube.com/watch?v=oLC_QYPmtS0
Browser Elements 7가지와 그 역할
1. 사용자 인터페이스
: 주소표시줄, 홈버튼, 새로고침 버튼 등 브라우저 상에서 페이지 외에 사용자가 컨트롤할 수 있는 부분
2. 브라우저 엔진
: 1) 사용자 인터페이스의 요청(주소창에 URI 입력, 새로고침 버튼 누르기 등)을 렌더링 엔진에 전달
2) 사용자 인터페이스에서 입력받은 URI 요청에 대한 자료를 자료 저장소에 접근해 찾아봄(캐싱 기법)
3. 렌더링 엔진
: 브라우저 엔진이 요청한 URI를 받아서 서버에 요청한 후, 응답받은 데이터를 받아 통신 레이어, 자바스크립트 해석기, UI 백엔드에 파싱 후 전달한다.(보다 자세한 설명은 바로 밑의 '브라우저 렌더링 프로세스' 참고)
4. 통신 레이어
: 렌더링 엔진에게 받은 http 통신 요청을 서버로 보내고, 서버로부터 받은 응답 데이터를 다시 렌더링 엔진에 전달한다.
5. 자바스크립트 해석기(chrome은 v8)
: html 태그를 동적으로 움직이는 javascript를 해석(파싱)한다.
6. UI 백엔드
: 렌더링 엔진에서 생성된 '렌더 트리'를 브라우저에 그리는 역할을 한다.
브라우저 렌더링 프로세스
1. 사용자 인터페이스(주소표시줄) 에 URI를 입력하면, 브라우저 엔진에 URI가 전달된다.
2. 브라우저 엔진은 입력받은 주소에 해당하는 자료(Html, css, image 등)를 자료 저장소에서 찾아본다.(매번 서버로 가서 데이터를 받아오면, 똑같은 자료를 또 받아오는 불필요한 네트워크 통신 발생할 수 있다. 이러한 낭비를 방지한다. => 이를 캐싱 기법이라 한다.) 자료 저장소에 있으면 이를 렌더링한다.(통신 레이어까지 안가도 된다)
3. 만약 자료 저장소에 없다면(즉 처음 요청해서 불러오는 데이터라면) 렌더링 엔진에 사용자가 입력한 URI 값을 전달함. 그와 동시에 렌더링 엔진은 브라우저 엔진에서 전달받은 자료(Html, css, image 등)를 분석한다.
4. 렌더링 엔진은 입력받은 URI를 통신 레이어에 보내 http 요청을 보낸다. 서버에서 URI에 해당하는 데이터를 응답받으면 통신 레이어는 이를 다시 렌더링 엔진에 전달한다.
5. 데이터를 받은 렌더링 엔진은 HTML, CSS는 파싱한다. 응답받은 데이터에서 javascript는 자바스크립트 해석기에 전달한다. 해석기는 파싱한 결과를 렌더링 엔진에 전달해 3번과 5번의 파싱한 html의 결과인 DOM 트리를 조작한다.
6. 최종적으로 완성된 DOM Node(DOM 트리 구성요소) 가 Render object(렌더 트리 구성요소)로 바뀌게 되고, 이를 UI 백엔드에 전달해 브라우저 렌더링 화면에 띄우게 된다.
렌더링 엔진의 동작 과정(워킹 프로세스)
렌더링 엔진은 URI를 통해 요청을 받아서 해당하는 데이터를 렌더링하는 역할을 담당한다.
1.DOM 트리 구축: DOM 트리 구축을 위해 HTML, CSS, JS 파싱: HTML 문서를 파싱해 <a>, <div>같은 태그들을 DOM 노드들로 변환한다. 그 다음 CSS 파일과 함께 모든 스타일 요소를 파싱한다.스타일 요소와 HTML 파싱(+JS) 결과물인 DOM 트리가 Render tree로 바뀌게 된다.
2. 렌더 트리 구축: HTML과 CSS를 파싱해 만든 렌더 트리는 색상 또는 면적 등 시각적 속성을 갖는 사각형을 포함한다.
3. 렌더 트리 배치: Render Tree 생성이 끝나면, 배치정보를 가지게 된다. 각 노드가 정확한 위치에 표시되기 위해 이동한다.
4. 렌더 트리 그리기: 각 노드 배치를 완료하면 UI 백엔드에서 각 노드를 가로지르며 paint 작업을 한다.
1번과 2,3,4번은 병렬적으로 진행된다. => 즉 파싱을 통해 돔 트리가 렌더트리가 바로바로 생성돼 node를 그리는 작업(2,3,4)와 자료를 받고 HTML, CSS, JS를 파싱하는 작업(1)이 동시에 병렬적으로 진행된다는 것이다.
=> DOM 트리가 완성되는 중간 중간 렌더 트리가 구축되므로 클라이언트 입장에서 브라우저가 조금씩 그려지므로 기다리지 않아도 괜찮다.
크롬의 렌더링 엔진, Webkit의 동작 과정
1. HTML을 파싱해 DOM 트리를 생성한다.(DOM 노드들의 트리 형태)
: HTML은 마크업 랭귀지이므로 정보를 표시할 수만 있다. 그래서 프로그래밍 언어로서의 동작이 불가능하다. 이를 가능하게 하는 것이 DOM 트리를 생성하는 것이다. 즉 html 태그가 파싱돼 DOM 트리가 생성되면 자바스크립트가 동적으로 html 태그를 움직일 수 있게 되는 것이다.(사용자와 상호작용이 가능해지는 것!)
＃script 태그가 가장 마지막에 있는 이유는?
: 브라우저는 파싱과 실행을 동시에 진행한다. 그래서 html 태그를 쭉쭉 파싱-> 실행하게 되는데 JS 코드를 파싱하게 되면 다음 html 태그를 파싱-실행하기까지 시간이 걸리게 된다. 그래서 script 태그를 가장 마지막에 넣는 것이다. HTML5에는 script 태그를 비동기로 실행하는 기능이 추가되었다.
2. CSS(Style sheets)를 파싱해 스타일 규칙(CSSOM)을 얻는다.
3. DOM 트리를 생성하는 동시에, 이미 생성된 DOM tree와 스타일 규칙(CSSOM)을 어태치먼트 한다.
: DOM 노드들은 object라 attach라는 메소드를 가질 수 있다. DOM 노드가 생성되는 순간 attach 메소드가 실행되며, DOM 노드가 render object로 전환되게 된다. 즉, DOM 트리가 완전히 형성될 때까지 기다리는 게 아니라, DOM 노드가 생성되는 순간 render object를 만들며 점진적으로 DOM 트리가 Render트리가 된다.
render object는 생성될 때 배치 정보(자신과 자식 요소를 어떻게 배치하고 그려야 할 지)를 가지고 있다.
하지만 모든 DOM 노드가 Render Object로 변환되는 것은 아니다(예: head tag, displan:none tag 등)
html 태그와 body 태그가 DOM 노드로 변환될 때도 render object가 구성되는데, 이들은 render tree root로써 render view라고 부른다. 나머지 DOM 노드들은 render object로 생성돼 이 render tree root(render view)에 추가된다.
4. 구축한 render tree를 배치(layout)한다.
: 배치는 <html> 요소에 해당하는 최상위 render object(render view)에서 시작한다. 화면 왼쪽 위부터 render object에 해당하는 DOM node들을 그려나간다.
5. 배치가 끝난 render tree를 그린다(UI 백엔드가 하는 일)
: render tree 탐색 후 해당하는 render object의 paint method를 호출한다.
'개발 공부 > 웹 개발' 카테고리의 다른 글
| [TIL] 함수형 프로그래밍과 람다에 대해 (0) | 2022.12.13 |
|---|---|
| [가장 쉬운 웹개발 with Boaz] 브라우저 렌더링 최적화 (0) | 2022.12.13 |
| 브라우저에 URL을 입력하면 어떤 일이 일어날까? (0) | 2022.11.21 |
| [Git] GitHub Action 공부 (0) | 2022.08.23 |
| [Git] Git Dependabot Alerts 문제 해결 (0) | 2022.08.18 |