JavaScript | Critical Rendering Path

중요 렌더링 경로 (Critical Rendering Path) ❓

• 단순히 JavaScript에게만 종속된 이야기는 아닙니다. 엄밀히 말하면 브라우저가 웹페이지를 어떻게 렌더링 하는지에 대한 이야기 이기 때문에, JavaScript, HTML, React 모두의 이야기가 될 수 있습니다.

• 중요 렌더링 경로를 이히해가 위해서는 먼져 렌더링 순서에 대해서 알아야 합니다.
  
  출처: Browser Rendering: JS + DOM + CSSOM

• request를 서버로 보내고response 를 받으면, 브라우저는 HTML의 코드들을 읽어내려가기 시작하고 그 코드들을 DOM으로 만듭니다. DOM안에 또 DOM이 만들어지는 DOMTREE가 만들어지게 되는거죠.

• DOMTREE가 만들어 지면, 이제는 CSS를 적용해야 하는데, 이것들도 하나의 DOM? 객체를 만들게 되요. 이게바로 CSSOM이랍니다. 즉, CSS를 객체로 만들었다 라고 생각 하면 됩니다. 이렇게 만들어진 객체들은 렌더링을 하기 위해서 RenderTree를 만들게 됩니다.

• RenderTree를 거쳐서 각페이지에 어떻게 표시할 지, Layout을 결정하게 됩니다. 그리고, paint, 즉 화면에 어떻게 표현할 이미지들을 바로표현? 하는게 아니고, 비트맵이라고 하는데 컴퓨터가 알 수 있도록 이미지를 비트맵 형식으로 바꿔서 잘게 잘게 쪼갠답니다. 그리고, 그림에는 안보이지만 composition 과정을 통해서 순서에 맞게 표시한답니다. z-index가 높으면 맨 위에 표시하는 것, 이런것들이 이 때 일어난다고 생각하시면 되어요.

왜 중요 렌더링 경로를 알아야 할까요 🧐

• 가장 큰 이유는 아무래도, 프론트엔드 개발자 입장에서 어떤 경로에 따라서 웹 화면이 보여지는지 당연히 알아야 하는 것이고
• 두번째는 성능 때문입니다.
• 처음 HTML을 배우게 되면, 심심하면 div쓰고, 잘 모르면 div쓰고, 그냥 막 div를 쓰죠... semantic tag를 쓰는 이유가 막 쓰는 div를 명확하게 구분하기 위함도 있지만 결국은 성능저하를 막기 위함도 있어요.
• 또한 Layout 부분에서 애니메이션이나 어떠한 기능으로 인해 레이아웃 전체가 계속해서 바뀐다면, 그것 또한 성능저하의 원인이 됩니다.

결론 😎

• div를 막 쓰지 말자!!
• 레이아웃을 변경하는 어떠한 부분이 있다면, 그것을 꼭 써야하는지 다시 한 번 생각해보고 쓰자.