챕터 5. 웹에서 가속을 이끌어 내는 방법

[Tanney-102]

.

[Tanney-102]

CRP 중 레이아웃 단계에서 너비는 부모 => 자식 순 높이는 자식 => 부모 순으로 계산 된다고 했는데 다음과 같은 경우에 자식의 높이 계산이 먼저 일어날 수 있을까?

<div style="height: 100px">
   <div style="height: 50%">hey!</div>
</div>

[ritajeong]

<div style="height: 100%">
   <div style="height: 50%">hey!</div>
</div>

[al-bur]

브라우저에서 DOM과 CSSOM이 별도 분석된다는 데 이에 대해 얘기해봐도 좋을 것 같습니다~
예를 들어, 렌더링시에 크롬에는 몇 개의 스레드(?)가 동시에 작동되는 지

[Tanney-102]

https://d2.naver.com/helloworld/5237120

[al-bur]

추가로 조사하여 찾아보겠습니다.

[Tanney-102]

163페이지에
주의할 점은 모든 자바스크립트가 비동기나 지연처리의 대상이 될 수 없다는 것입니다. 자바스크립트들은 많은 경우 렌더링에 관여하도록 구현됩니다. 또한 스크립트 사이에 종속 관계가 있을 수 있으므로 비동기 처리나 지연 처리를 무분별하게 적용하면...
라는 언급에 대해 이야기 나누고 싶습니다.

1. 렌더링에 관여하는 자바스크립트 중 지연처리 대상이 될 수 없는 경우가 있을까요?
2. 스크립트 사이에 종속 관계라고 하면 한 스크립트에서 다른 스크립트를 의존하는 경우일 듯 한데, 그런 경우 애초에 스크립트 참조 순서를 정해 놓은 상태일테고 defer 속성을 사용하면 크게 문제는 없을 것 같은데 문제되는 상황이 있을까요?

[al-bur]

따로 찾아보겠습니다~

[Tanney-102]

렌더트리를 생성할 때 body를 제거하고 Root 노드를 추가하는 이유가 궁금하네요!

[Tanney-102]

이것도 따로 ㅎㅎ

[Tanney-102]

번들링할 때 critical-css를 따로 분리할 수 있는 방법이 있을까요?

[Tanney-102]

https://www.npmjs.com/package/css-split-webpack-plugin

[Tanney-102]

https://www.npmjs.com/package/postcss-critical-split

[ritajeong]

https://blog.cometkim.kr/posts/css-optimization-in-jamstack/