[브라우저 렌더링 과정]
브라우저엔진>렌더링엔진>네트워크통신,JS해석기,UI백엔드
1.DOM 트리구축.
하나의 html 페이지는 div , span 등 각각의 요소를 가집니다.
각 요소는 하나하나 노드(node)로 설정이 되어 트리 형태로 저장되는데,
이를 DOM 트리라고 합니다. 예를 들어 div> span, span이라는 요소가 있다면 div라는 부모노드 밑에 span이라는 자식노드가 2개 생기는것 입니다.
2.렌더트리와 렌더레이어 생성.
각각의 노드는 CSS 파서에 의해 정해진 스타일 규칙이 적용되어 있습니다. span.color = "re" 는 노드 색깔이 빨간색이다 등을 말하는 것이죠.
이런 규칙에 따라 CSSOM 이라는 트리가 만들어지고 미리 만들어 놓은
DOM 트리 내에 있는 노드와 함께 렌더객체(Render Object)가 생성되며
이들이 모여 병렬적인 렌더트리가 생성됩니다.
이때 display:none 이 포함된 노드는 지워지고 font-Size 등 상속적인 스타일은 부모노드에만 위치하도록 설계하는 등의 최적화를 거쳐 렌더레이어가 완성됩니다.
-
렌더레이어를 대상으로 layout 설정
이때 좌표는 보통 부모를 기준으로 설정됩니다.
Global Layout은 브라우저 사이즈가 증가하거나 폰트 사이즈가 커지면 변경됩니다. -
렌더레이어를 대상으로 칠하기(paint)
픽셀마다 점을 찍듯 칠합니다. 이를 레스터화라고도 합니다.
5.레이어 합치기(composite layer) 및 표기.
각각의 레이어로 부터 비트맵이 생성되고 GPU에 텍스처로 업로드됩니다.
그다음 텍스처들ㅇ른 서로 합쳐져 하나의 이미지로 렌더링되며 화면으로
출력됩니다.
[시스템 콜과 modebit]
시스템콜이란 운영체제가 커널에 접근하기 위한 인터페이스이며 유저 프로그램이 운영체제의 서비스를 받기 위해 커널 함수를 호출할 때 씁니다.
유저 프로그램이 I/O 요청으로 트랩(trap)을 발동하면 올바른 I/O요청인지 확인한 후 유저 모드가 시스템콜을 통해 커널모드로 변환되어 실행됩니다.
예를 들어 I/O 요청인 fs.readFile() 이라는 파일 시스템의 파일을 읽는 함수가 발동했다고 치면
이때 유저 모드에서 파일을 읽지 않고 커널 모드로 들어가 파일을 읽고 다시 유저 모드로 돌아가 그 뒤에 있는 유저 프로그램의 로직을 수행합니다.
이 과정을 통해 컴퓨터 자원에 대한 직접 접근을 차단할 수 있고 프로그램을 다른 프로그램으로 부터 보호할 수 있습니다.
modebit
시스템콜이 작동될때 modebit을 참고해서 유저 모드와 커널 모드를 구분합니다.
modebit은 1 또는 0의 값을 가지는 플래그 변수입니다. 카메라, 키보드 등 I/O 디바이스는 운영체제를 통해서만 작동해야 합니다. 카메라를 켜는 프로그램이 있다고 해봅시다. 만약 유조머드를 기반으로 카메라가 켜진다면 사용자가 의도하지 않았는데 공격자가 카메라를 갑자기 켤 수 있는 등 나쁜 짓을 하기가 쉽습니다.
물론 커널모드를 거쳐 운영체제를 통해 작동한다고 해도 100% 막을 수는 없지만, 운영제체를 통해 작동하게 해야 막기가 쉽습니다. 이를 위한 장치가
modebit 입니다.
modebit의 0은 커널모드 , 1은 유저 모드라고 설정되며, 유저 모드일 경우 반드시 시스템콜을 통해 커널모드로 변경된 상태에서 시스템 자원을 써야 합니다.
다음 그림처럼 유저 프로그램이 카메라를 이용하려고 할 때 시스텐ㅁ콜을 호출하고 modebit을 1에서 0으로 바꾸며 커널 모드로 변경한 후 카메라 자원을 이용한 로직을 수행합니다. 그 이후에 modebit을 0에서 1로 바꿔서 유저모드로 변경하고 이후 로직을 수행합니다.
