20210327(토)
1. 학습 날짜
2021-03-27
2. 학습 시간
17:00 ~ 21:00
3. 학습 범위 및 주제
자바스립트 학습하기
4. 학습 목표
강의 듣기
5. 학습 정리
6. 상세 학습 내용
브라우저에서 페이지에 접속하면 먼저 파일을 다운로드 받는다. 파일을 다운로드 받으면 그 다음에는 어떤 동작이 일어나는가?
우선 브라우저는 html 파일을 읽어서 한줄 한줄을 DOM 으로 만든다.
만약 html파일에 script 태그가 있으면 그 DOM 작성을 멈추고 먼저 script 태그를 실행한다.
따라서 만약 script 태그 뒤에 존재하는 tag 를 가져오는 코드가 있다면 여기서 에러가 발생한다.
따라서 script 의 순서는 중요하다.
가장 쉽게 처리하는 방법은 script 를 defer 옵션을 주고 다운로드 하는 방법이다.
이후에는 css 를 읽고 CSSOM 을 만든다. CSSOM 이란 css object model 의 약자다 (DOM이랑 같다.)
만들어진 DOM 과 CSSOM 을 합쳐서 렌더링트리를 만든다.
이 렌더링 트리에서는 실제로 사용자에게 보여줄 요소만을 트리에 포함시킨다.
예를 들면 display: none 은 실제로 유저에게 보여주지 않을 정보이므로 이 렌더링 트리에서는 제외된다.
이런 이유 때문에 transition 이 동작하지 않았던것.
여기까지가 기초작업이다. DOM과 CSS 를 이용해서 rendering-tree 를 만들면 아래의 동작을한다.
layout
layout 과정에서는 rendering-tree 결과의 각각의 요소들이 어느 위치에 얼마만큼의 크기를 가질지 계산한다.
여기서 모든 상대적인 값들이 절대적인 값으로 변환된다.
이런 계산의 결과로 스타일 및 기하학적 형태등도 모두 파악한다.
paint
렌더링 트리의 요소들이 계산 되었다면 이제 계산된 값을 실제로 그리는 작업을 수행한다.
여기서 주의할 건, 실제로 그리는 작업이란 브라우저에 나타낸다는게 아니라 각각의 부분을 준비만 해놓는것.
이게 무슨말이냐면, 브라우저는 모든 계산된 요소를 묶는 과정을 갖는다.
당연한 말이겠지만 모든 요소요소 각각으로 처리하면 성능이 떨어질 수 밖에 없다.
따라서 브라우저는 성능 개선을 위해 요소를 묶어서 레이어로 만든다.
여기서 주의할게 있는데 이렇게 묶었는데 묶여있는 요소의 스타일이 계속 변경되서 브라우저가 계속 그림을 그려야하는 과정이 반복된다면 그 요소가 속해있는 레이어는 하나으 ㅣ요소의 계속된 변경으로 인해 레이어 자체가 계속 그려져야하므로 성능이 매우 떨어지게된다.
따라서 계속 변경될 스타일을 가진 요소에는 css 로
will-change옵셥을 줄 수 있다. 이렇게 되면 그 요소만 따로 layer 로 묶이게 되서 위와 같은 문제에서 벗어날 수 있게 된다ㅏ.
composition
자 이제 만들어진 모든 레이어들을 실제로 브라우저에 위치시킨다.
7. 오늘 학습 내용에 대한 개인적인 총평
어제, 오늘 너무 놀았다. 다시 열심히하자!
8. 다음 학습 계획
자바스크립트 공부
Last updated