🦎 [딥다이브 스터디] 1st- 38.브라우저 렌더링과정1

매주 수 7, 토 10시마다 모던 자바스크립트 딥다이브 교재를 바탕으로 스터디를 진행하기로 했다.
챕터별로 각자 선정한 질문 3개를 준비해 함께 풀어보며, js 를 깊게 이해하고자 한다.

1. 레이아웃계산(리플로우)과 페인팅이 재차실행되는(리페인팅)등 리렌더링으로 인해 성능에 악영향을 주는 경우는 어떤것이 있을까?

브라우저의 렌더링 과정은 크게 두 파트로 나뉘어집니다. construction 과 operation.

이 중, operation 부분을 살펴보면, layout 은 먼저 어떤 요소를 어떻게 배치할지에 대한 틀을 잡는 단계입니다.

paint 는 포토샵을 생각하면 쉬운데, 관련 있는 요소를 레이어로 분리 하는 것입니다. 이는 브라우저가 성능최적화를 위해 일부 요소가 이벤트나 애니메이션으로 인해 변경될 때, 관련없는 다른 요소들도 한꺼번에 변경되는 것을 막기 위해 변화가 일어날 수 있는 요소들끼리 그룹화 시키는 작업입니다. 예컨데, css 에는 will-change 라는 속성이 있는데, 이는 해당 요소가 변경될 수있다는 의미로 이 속성을 사용하게 되면 브라우저에서 단독적인 레이어를 생성합니다. 그러나, 너무 자주 사용할 경우 레이어를 많이 생성하게 되면 성능이 저하될 수 있다는 단점이 있기 때문에 적절히 사용해야 합니다. 컴포지션은 레이어로 분리된 것들을 합쳐서 완전한 형태로 구현하는 단계입니다. 최대한, 시작단계인 레이아웃부터 다시 그려지는 것을 막고, 나중 단계의 작업만 이뤄지도록 하는 것이 성능 개선에 도움이 됩니다.

아래의 사이트에서, css 의 속성별로 브라우저에서 어떤 단계까지 변화를 요구하는 지 확인해 볼 수 있습니다. 브라우저 별로 조금씩 다르기 때문에, 각기 체크해봐야합니다.

http://csstriggers.com/

2. xxxtag는 브라우저가 html을 동기적으로 파싱하기 때문에 이를 블로킹할 수 있다. 이 외에도 js 엔진으로 제어권을 넘기는 경우는?

브라우저는 html 을 렌더링엔진으로 동기적 파싱하다가, css 파일을 로드하는 link태그나, 이미지 파일을 로드하는 img태그, js를 로드하는 script 태그등을 만나면 html의 파싱을 중단(블로킹)하고 해당 리소스 파일을 서버로 요청하게 되면서 js 엔진으로 제어권을 넘긴다.

3. 렌더링 엔진과 자바스크립트 엔진의 차이는?

렌더링 엔진은 html 과 css를 파싱하여 렌더트리를 생성한다. 렌더트리는 html는 DOM 과 CSSOM 트리가 합쳐져 구성된다. 이를 기반으로 레이아웃을 계샇나고 브라우저 화면에 html 요소가 페인팅된다. js 엔진은 js를 파싱하여 AST 를 생성하고 바이트 코드로 변환하여 실행한다. 이때 DOM API 를 통해 DOM 이나 CSSOM 을 변경할 수 있다.

3-1 display:none , visibility:hidden 의 차이를 렌더 트리 개념을 적용해 설명하시오

display: none 은 렌더트리에 그려 지지 않고, 때문에 dom api 를 사용해 조작이 불가능 하다. visibility hidden 은 렌더트리에 존재하지만 보여지지 않는 속성으로, width 와 height를 줄 경우 브라우저에서 일정 공간을 차지할 수 있고 dom api를 통한 조작도 가능하다.

4. async에 비해 defer가 가지는 장점은?(엘리 강의 참고)

async 와 defer 어트리뷰트는 html 파싱과 자바스크립트 파일 로드를 비동기적으로 동시에 실행하기 위해 사용한다. 하지만 자바스크립트의 실행시점에 차이가 있다.

async 는 자바스크립트파일의 로드가 완료되면 즉시 실행되며, 이로인해 html파싱이 중단된다. 여러개의 script 태그에 async 어트리뷰트를 지정하면 script 태그 순서와 상관없이 로드 완료된 js부터 실행되므로 순서가 보장되지 않는다.

defer은 html 파싱과 js 로드가 동시의 실행되지만, html 파싱이 완료된 이후(dom 이 생성된 이후) 순차적으로 실행되기 때문에 순서가 보장된다. (권장)

https://youtu.be/tJieVCgGzhs