컴포넌트의 생명주기
라이프 사이클을 다루는 것은 컴포넌트가 생겨나고 변화하고 없어지는 일련의 프로세스를 프로그래머가 통제하는 것을 말한다.
라이프 사이클에 대한 개념이 없는 상태에서 document.getElementById같은 키워드로 element를 선택할려고 할때 선택이 되지 않을 수도 있다.
html이 실제로 브라우저에 나타나고 사라지는 타이밍을 알아야 더 복잡한 작업을 수행할 수 있다.
먼저 크게 웹 브라우저의 라이프사이클? 로딩순서는 다음과 같다
웹 브라우저에서 HTML문서 렌더링 과정 (동작 순서)
웹 브라우저의 HTML문서 렌더링 과정 1. 불러오기 로더(Loader)가 서버로부터 전달 받는 리소스 스트림을 읽는 과정. 읽으면서 어떤 파일인지, 데이터인지 파일을 다운로드할 것인지 등을 결정한다
jeong-pro.tistory.com
웹 브라우저의 HTML문서 렌더링 과정
1. 불러오기
로더가(Loader)가 서버로부터 전달 받는 리소스 스트림을 읽는 과정.
2. 파싱 (Pasing)
웹 엔진이 가지고 있는 html/xml 파서가 문서를 파실해서 DOM tree를 만든다.
| 먼저 html 파일을 읽어 문서릐 구조를 파악하고, 트리 형태로 된 데이터 구조를 만든다. 이걸 DOM이라고 한다. |
3. 렌더링 트리 만들기
DOM tree는 내용을 저장하는 트리로 자바스크립트에서 접근하는 DOM객체를 쓸 때 이용하는 것이고 별도로 그리기 위한 트리가 만들어져야 하는데 그것이 렌더링 트리다.
4. CSS결정
css는 선택자에 따라서 적용되는 태그가 다르기 때문에 모든 css스타일을 분석해 태그에 스타일 규칙이 적용되게 결정한다.
5. 레이아웃
렌더링 트리에서 위치나 크기를 가지고 있지 않기 때문에 객체들에게 위치와 크기를 정해주는 과정을 레이아웃이라고 한다.
6. 그리기
렌터링 트리를 탐색하면서 그리기
참고로 렌더링 엔진은 가능하면 html문서가 파싱될 때까지 기다리지 않고 , 배치와 그리기 과정을 시작한다.
위에랑 같은 말? 인데 자세하게 쓰면
먼저 HTML 파일을 일겅 문서의 구조를 파악하고, 트리 형태로 된 데이터 구조를 만든다. 이것이 DOM 이다.
DOM이 일단 완성되고 나면, 자바스크립트로 DOM을 제어할 수 있게 된다.
웹 브라우저가 웹 페이지를 화면에 표시하는 단계로 넘어가기 전에 자바스크립트가 DOM을 제어 할수 있다.
DOM 제어가 끝나면 웹 브라우저는 DOM 구조를 기반으로 웹 브라우저 화면에 웹페이지를 그리는 과정을 진핸한다.
이 그리는 과정을 렌더링(Rendering)이라고 한다.
렌더링에는 미리 작성한 CSS의 화면 배치와 속성에 대한정보를 사용한다.
이 과정에서 웹 브라우저는 DOM과 마판가지로 CSS를 읽어 CSSOM(Cascading Style Sheet Object Model)을 생성한다.
CSSOM은 CSS를 구조화 된 데이터 형태로 생성한 것이다.
DOM과 CSSOM을 조합해 화면에 펴시할 최종 구조를 만든다.
이것이 렌터 트리(Render Tree)다.
렌더트리를 기초로 화면에 HTML페이지가 그려진다.
배치가 되면서 컨텐츠 파일들 또한 비동기로 읽어서 HTML 페이지의 적절한 위치에 배치를 한다.
렌더링과정은 전적으로 웹 브라우저의 몫이다.
DOM의 구조는 표준으로 정햐져 있기 때문에 모두 같은 구조를 가지지만
DOM을 웹 브라우저 화면에 어떻게 표시할 것이냐는 웹 브라우저 고유의 방식을 따른다.
여기서 호환성 문제가 발생한다.
css는 위에 두고 script는 아래에 두는 이유
문서를 파싱해서 DOM tree를 만들어도 스타일 규칙이 없으면 렌더링 할 수가없다.
즉 최대한 빨리 스타일 규칙을 알아야 렌더링 트리가 완전히 만들어지므로 스타일시트 파일을 모두 다운로드시키기 위해 <head></head>태그 사이에 놓는 것이다.
(인터프리터에서 html파일을 위에서 아래로 읽음)
자바스크립트는 왜 아래에 놓아야 성능이 좋아질까?
자바스크립트는 DOM객체를 이용해서 컴포넌트들을 조작하는데 <head></head>태그 사이처럼 상단에 놓게 되면 html파서가 파싱을 멈추고 스크립트 파일을 읽는다.
파싱을 멈추고 읽기 때문에 위에서 스크립트 파일이 많거나 크면 읽는 시간이 오래 걸려 사용자 입장에서 웹페이지가 느리게 보이게 되므로 성능이 안좋아지게 된다.
심지어 잘못 코딩했을 경우 html파싱보다 자바스크립트 파일이 먼저 실행되서 적용이 안되는 모습도 볼 수 있다. 그래서 일반적으로 </body>태그 위에 스크립트를 모아둔다.
구글에 검색하면 vue에 관한 이야기가 많이나오는데
Part 17. JS 라이프 사이클 이해하기
컴퓨터 시스템의 모든 자원은 라이프 사이클 즉, 생애 주기를 가집니다. Javascript의 자원들 값, 변수, 함수 등 또한 생애주기를 가집니다. 생애주기란 생성되고 사용되며 소멸되는 메커
lsy0581.tistory.com
이곳에서는 자바스크립트의 라이프 사이클을 다룬다.
'개념정리' 카테고리의 다른 글
| keydown, keypress, keyup (0) | 2021.07.26 |
|---|---|
| DOM (Document Object Model) (0) | 2021.04.29 |
| 이클립스 (0) | 2021.04.13 |
| POJO (Plain Old Java Object ) (0) | 2021.04.11 |
| AS - IS / TO - BE 분석 (0) | 2021.04.09 |