렌더링 과정을 공부하면서 모르는 단어와 말들이 있어 적는다!!
CSSOM , AST는 브라우저의 렌더링 과정에서 가장 많이 나오는 말이다.
렌더링의 뜻과 브라우저의 렌더링 과정을 알아봐야한다.
렌더링
렌더링은 HTML, CSS , 자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는것을 말한다.
- 브라우저는 HTML , CSS , 자바스크립트, 이미지 , 폰트 파일 등 레너링에 필요한 리소스를 요청하고 서버로부터 응답을 받는다.
- 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS 를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더트리를 생성한다.
- 브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 AST 를 생성하고 바이트코드로 변환하여 실행한다. 이때 자바스크립트느 DOM Api를 통해 DOM 이나 CSSOM을 변경할 수 있다. 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합된다.
- 랜더 트리를 기반으로 HTML 요소의 레이아웃(위치와 크기)을 계산하고 부러우저 화면에 HTML요소를 페인팅한다.
CSSOM
풀어 쓰면 CSS Object Model 이다.
MDN 의 정의를 보면 이와 같이 설명한다.
JavaScript에서 CSS를 조작할 수 있는 API 집합입니다. HTML 대신 CSS가 대상인 DOM이라고 생각할 수 있으며, 사용자가 CSS 스타일을 동적으로 읽고 수정할 수 있는 방법입니다.
이말은 즉 브라우저가 렌더링되면서 DOM을 생성하고 우리가 만든 CSS를 병합해서 트리를 만들게 된다.
다시 책으로 넘어와서 CSSOM이 생성되면서 우리가 만든 HTML 태그들도 다같이 한꺼번에 병합이 되는것일까?
책에 내용에 따르면 CSS파일이나 style태그 내의 CSS를 HTML과 동일한 파싱 과정을 거치며 해석하여 CSSOM을 생성하고 이후에 다시 CSS 파싱을 완료하면 HTML 파싱이 중단된 지점 부터 다시 HTML을 파싱하기 시작여 DOM생성을 재게한다고 되어있다.
햇갈리는게 이말이 HTML을 파싱하다가 CSS에 관련된 style태그가 나오면 HTML파싱을 멈추고 CSS에 관련된 style태그를 파싱한 이후에 중단된 지점부터 다시 HTML을 파싱한다는 말일까 그러면 DOM생성을 재게 한다 이말인데 ...
내가 알고 있는 내용은
html 먼저 읽고 이후 DOM Tree가 생성되고, 다음 CSS파일을 읽은 다음 스타일을 모두 계산해서 최종적으로 확정된 CSSOM(CSS Object Model) 을 만들게 된다. 라고 알고 있는데 내가잘못 알고 있는건가? 너무 햇갈려서 몇일째 찾아 보는데도 잘모르겠다 이거는 나의문제인가.. 아니면.. 애내들의 문제..인가?.. 내가 이해를 못하는건가... DOM이랑 CSSOM이랑 별개로 생각해야하는거일까?? 물음표만 잔득 생기게 하는 녀석이다
위 그림을 보면 그니까!! body에 적용한 font-size 프로퍼티와 ul 요소에 적용한 list-style-type 프로퍼티는 모든 li 요소에 상속이 되는거 안다구 이게 그냥 cssom 생성과정이라는건가?? 아 진짜 너무 모르겠다...
너무 모르면 잠깐 멀리서 보라고 하던데 그래.. 잠깐 멀리하자.. ㅋㅋ
AST
이거는 진짜 책에도 그냥 언급만하고 자세한 설명이 없어서 구글링 한 내용을 적어본다 일단 이분의 블로그에서 내용을 가져왔다.
https://code-giraffe.tistory.com/44
AST (Abstract syntax tree)
말하자면 특정 프로그래밍 언어로 작성된 프로그램 소스 코드를 각각 의미별로 분리하여 컴퓨터가 이해할 수 있는 구조로 변경시킨 트리를 의미한다고 한다.
이녀석이 하는일은 말그대로 Abstract(요약) 이기 때문에 문법의 의미를 자세하게 표현하는것이 아니라 요약하게 짜여진 Parsing-Tree이다.
AST는 컴파일러가 프로그램의 각 부분의 사용이 옳바른지, 프로그래밍 언어의 사용이 틀린 부분은 없는지 Semantic Analysis( 문맥적인 소스코드 검사 )의 단계에서 사용되곤 합니다. AST의 모든 단계를 거쳤을 때 이상이 없다는 것은 프로그램이 정확하다는 의미를 뜻한다.
위사진을 보면 쉽게 알수 있다 .
package.json 파일인데 여기에는 우리가 개발하면서 필요한 라이브러리 들을 다운받았을때 간단하게 정의되어 있는 것들이다. 간단하게 정의가 되어 있을뿐 안으로는 수많은 파일들이 설정되어 있다.
이분의 블로거를 보면
https://gyujincho.github.io/2018-06-19/AST-for-JS-devlopers
우리가 라이브러리를 다운받고 사용하는데 있어서 플로우 차트가 필요할때 그때 AST를 생성해서 플로우차트를 만든다 라고 얘기 하고 있다.
실제로 라이브러리르 그냥 다운 받아서 사용한다고 해서 개발에 문제가 생기진 않는다 하지만 공동으로 작업하고 프로젝트의 관해서 의견을 내거나 결정을 할때는 useCase를 사용하기도 한다. 그러면 플로우 차트를 만들기 위해 사용하는 라이브러리도 있다.
`
