웹 브라우저 렌더링이란?
앞선 시리즈에서 웹 브라우저의 역할과 구성 요소에 대해 알아보았다!
그래도 모르실 분이 있으니 브라우저는 간단하게 인터넷에서 특정 정보를 알 수 있고 주소 입력창이 있으며 HTTP와 HTTPS를 이용하여 정보 탐색 및 검색이 가능하게 도와주는 도구 라고 생각하자
영어 단어로는 "rendering" 컴퓨터 프로그램을 사용하여 모델 또는 이들을 모아놓은 장면인 씬 파일(scene file)로부터 영상을 만들어내는 과정을 얘기하는 데 이렇게 설명하면 사람들 보통 뇌정지가 온다.
나도 처음에 웹에 대해 전혀 모르는 신입이였을 때 뇌정지가 왔다.
(웹 언어는 전문적이고 Fucxxng!! 할정도로 영단어가 많다.)
흔히 이상태가 되어 버리는 데 내가 생각하는 렌더링을 표현하자면 화면에 순차적으로 그려주는 도구 라고 생각한다.
HTML -> CSS -> Javascript 등 작성한 문서들을 브라우저가 순차적으로(순차적이지만 동시에) 그려준다.
출처 : (https://d2.naver.com/helloworld/59361)
1. 사용자 인터페이스 - 주소 표시줄/이전/다음버튼/북마크 메뉴 등등 요청한 페이지를 제외한 보여주는 창을 전부 포괄함
2. 브라우저 엔진- 사용자 인터페이스와 렌더링 엔진 사이의 동작으 ㄹ제어
3. 렌더링 엔진 - 요청한 콘텐츠를 표시 예를 들어 HTML을 요청하면 HTML과 CSS을 파싱하여 화면에 표시함
4. 통신 - HTTP 요청과 같은 네트워크 호출에서 사용됨. 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨
5. UI 백엔드 - 콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용.
6. 자바스크립트 해석기 - 자바스크립트 코드를 해석하고 실행.
7. 자료 저장소 - 이 부분은 자료를 저장하는 계층이다. 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있다. HTML5 명세에는 브라우저가 지원하는 '웹 데이터 베이스'가 정의되어 있다.
[출처](https://d2.naver.com/helloworld/59361)이제 이걸 어떻게 렌더링을 하냐에 대해 얘기해 보려고 한다.
듣기 싫음 말고;;
렌더링 엔진!!
우리는 IT계열에 종사하는 사람들이다. 그렇다면 이거는 거의 필수적으로 알아야 하지만 보통 종류를 모른다. 힣 잡담은 여기 까지고 흔히 웹 렌더링 엔진 및 웹 브라우저 엔진 아니면~~ 웹 레이아웃 엔진이라고 부르는 데 말그대로 웹 페이지에 대한 컨텐츠 및 데이터를 위해 동작하는 엔진이다.
자아 근데~ 우리가 알기로 웹 브라우저는 여러 종류가 있다.
기본적으로 뭐 IOS나 맥에서 사용하는 사파리, 파이어폭스(불여우), 인터넷익스플로러(관짝할아버지), 크롬(메모리 ㅂㅇ)등등 여러 가지가 있는 데 이 브라우저들이 전부 렌더링 엔진이 같을까? 정답은 "No" 다.
-moz-border-radius: 2em;
-ms-border-radius: 2em;
-o-border-radius: 2em;
-webkit-border-radius: 2em;출처: https://mygumi.tistory.com/173 [마이구미의 HelloWorld]
흔히 이러한 border 속성을 선언하면 이런식으로 나오는 경우가 있는 데 이건 각각의 렌더링 엔진의 종류를 앞에 선언해서 그 엔진에만 적용하는 방식을 나타낸다.
즉 브라우저의 엔진마다 브라우저를 렌더링 하는 방식이 다르다는 것이다!!!
(다르면 그대로 내버려 둘까? 아니다 이거를 다 같은 layout으로 만드는 작업! 크로스 브라우징은 다음편에 애기할거다)
렌더링 과정!!
이제 과정을 알아보자!
첫 째는 Document object model, css object model 을 가져와서 페이지에 뿌려줍니다!
이 부분은 참고로 구글 객체 모델 생성에서 자세하게에ㅔㅔㅔㅔㅔㅔㅔㅔㅔㅔㅔㅔㅔㅔㅔㅔ 설명해준다. 이거를 보자 나보다 설명 잘하신다.
HTML, CSS들은 단순해서 이거를 관리 및 유지하기 편하게 Object Model로 만들고 이걸 문서 객체 모델과 css 객체 모델로 나눈다.
(이부분은 그냥 외우세요. 기본임)
둘 째는 흔히 얘기하는 렌더 트리(Render Tree)를 생성하여 우리가 사용하는 웹 브라우저에 나타납니다!! 여기서 중요한 점은 화면에 표출되는 부분만 나타난다!
즉 화면에 나타나는 요소들만 보이고 나머지 요소는 보이지가 않는다!
(display: none은 애초에 화면 구성요소에서 Goodbye 라 포함되지 않는다. 요거 중요!)
셋 째는 Layout 단계!!!!
이것이 무엇이냐!
우리가 브라우저에 나타내는 모든 요소들의 정확한 크기와 위치를! 아주정확하게! 나타나게 해주는 거다!!!
(강조 세번함 이해가 안되면 외워야 한다)
사진으로 예를 들자면
이러한 텍스트의 크기와 굵기 위치 등을 계산하는 작업이라고 생각하면 된다.
!!Tip. Layout을 그려내는 과정에서 %,vh,vw,vmax 등등은 상대적인 위치를 가지게 되고 크기 속성은 실제화면에 그려지는 pixel 단위로 변환이 된다.
-> %, vh, vw vmax 등등은 뷰포트(viewport)에 따라서 달라지기 때문!!
잘 모르겠어요? 외워요! 으이!
마지막으로 레이아웃 까지 요소들을 전부다 채워줬다! 그러면 무엇을 해야 하는가!!!
밑 그림 그리면 뭐해에ㅔㅔㅔㅔㅔㅔㅔㅔㅔㅔㅔㅔ "색칠" 시간이다.
Paint 라고 한다.
Layout 작업이 완료되면 이제 브라우저 구성 요소들은 전부 그려지게 된다. 이 단계에서 박스 모델, 텍스트, 이미지, 그림자 효과, 애니메이션 효과 등 모두 처리되어 지면서 그려지게 된다.
말 그대로 밑그림을 다 그렸으니 색칠을 해서 그림을 완성하는 시간이라고 생각하면 된다.
오늘은 밥 선생님과 함께하는 웹 브라우저 렌더링과 과정에 대해 알아보았다!!
참 쉽죠? ㅎ (개뿔)
