브라우저의 구조
- 사용자 인터페이스 : 뒤로가기, 새로고침 etc 등등
- 브라우저 엔진 : 알려주는 애 ( 뒤로가기 눌렀으면 알려줌)
- 렌더링 엔진 : 유저에게 보여지는 곳
- 통신 : 네트워크를 담당하는 곳
- 자바스크립트 해석기 : v8엔진
- UI 백엔드 : 마우스 움직임, 클릭 이벤트
- 자료 저장소 : local storage, 쿠키 등등
주소를 입력한다면?
- 주소창에 www.naver.com 를 입력한다.
- 컴퓨터는 영어를 모른다. 입력했을 때 딸려오는 ip주소를 확인한다.
- 컴퓨터는 DNS 에 ip주소를 들고 찾아간다
- ex) naver.com 192.10.6.3 사전처럼 정리가 되어있음
DNS : 아이피주소는 naver.com이야 주소를 갖고 방문을 시도 해
( 이제는 캐시에 저장을 해서 다음 번에는 dns에 묻지 않고 바로 찾을 수 있게 됌)
-
naver.com 를 들고 서버에 방문한다.
-
서버에서는 01010001020020300 바이트 스트림 형태로 전달을 한다.
-
브라우저에서는 받고 다시 인코딩을 한다. (다시 이해할 수 있는 언어로)
-
바이트 -> 케릭터화 -> 토큰화를 시킨다.
- 토큰화
토큰화 : 아 < html을 시작하는 구나 h t m l 이 있네 닫혔네 body가 있네 열렸네
- Nodes : 객체화 시키는 것
- DOM Tree 가 된다.
- 자료의 형태
- 문서를 보면 하나하나씩 아래로 읽어나가는데 link를 만나게 되고 style.css 를 만나게 된다. 그러면 다시 ip주소를 다시 찾아가서 받아온다.
-
그래서 아래 순서를 보면 localhost => style.css => main.js 순이다.
-
CSSOM TREE
CSS Object Model을 만들게 된다.
- 자바스크립트도 만나게 되서 다시 재요청을 한다.
자바스크립트가실행되는 동안 DOM을 파싱은 중단된다.
그래서, 자바스크립트는 바디에서 최 하단에 넣는다? ( 원치 않는 사람은 script 안에 defer를 넣으면 된다)
DOM 은 항상 CSSOM을 기다린다. 완성될때까지 기다림 => 그래서 css파일이 위에있음
- DOM과 CSSOM 이 합체 된다. => Render Tree가 만들어진다. = 최종버전
- Layout을 한다. ( 어떤 위치에 그릴지 결정한다. 화면의 50%에 그려줘라고 했을 때 계산을 한다.)
- Paint를 한다. (화면을 여러개의 레이어로 나눠서 그린다. )
- composite를 한다.
※ Reflow 될 떄가 있다. (레이아웃이 자주 변경되는 것이 발생하면 웹사이트에 좋지 않다)
- 페이지 초기 렌더링 시
- 윈도우 리사이징 시
- 노드 추가 또는 제거
- 요소의 위치 크기 변경
- 폰트 변경 , 이미지 크기 변경
※ 성능을 좋게 하려면?
- 외부에서 가져오는 횟수를 줄인다.
- Reflow , Repaint 줄이기
- 외부에서 가져오는 리소스 양 줄이기 (인라인)
- 소스의 사이즈 줄이기
Reflow
DOM 엘리먼트 추가, 제거 또는 변경
CSS 스타일 추가, 제거 또는 변경
CSS 스타일을 직접 변경하거나, 클래스를 추가함으로써 레이아웃이 변경될 수 있습니다. 엘리먼트의 길이를 변경하면, DOM 트리에 있는 다른 노드에 영향을 줄 수 있습니다.
CSS3 애니메이션과 트랜지션. 애니메이션의 모든 프레임에서 리플로우가 발생합니다.
offsetWidth 와 offsetHeight 의 사용. offsetWidth 와 offsetHeight 속성을 읽으면, 초기 리플로우가 트리거되어 수치가 계산됩니다.
유저 행동. 유저 인터랙션으로 발생하는 hover 효과, 필드에 텍스트 입력, 창 크기 조정, 글꼴 크기 변경, 스타일시트 또는 글꼴 전환등을 활성화하여 리플로우를 트리거할 수 있습니다.
Repaint
가시성이 변경되는 순간 (opacity, background-color, visibility, outline)
Reflow 가 실행된 순간 뒤에 실행됩니다.
사용자가 주소창에 URL 입력을 하게 된다면 → DNS를 통해 IP주소를 반환하고 TCP/IP 프로토콜을 사용하여 서버에 요청합니다. → 서버에서는 바이트 스트림 형태로 전달을 해주며 브라우저에서는 다시 인코딩을 하여 바이트 → 케릭터화 → 토큰화를 합니다.→ 객체화를 시켜 DOM TREE를 구성하게 되며, CSSOM TREE이 합쳐져 Render Tree가 만들어집니다. → Layout → Paint → composite를 하게 됩니다.
