web/browser-rendering-process/

[utterances-bot]

렌더링 성능 개선(1) — 렌더링 과정 이해하기 | SOSOLOG

들어가며 최근 개인 프로젝트의 렌더링 성능을 개선하며 브라우저 렌더링 과정에 대해 정리하고 정확히 무엇이 성능 저하의 원인인지, 어떻게 개선될 수 있었는지 정리해봤다. 렌더링 파이프라인 렌더링 성능을 개선하려면 먼저 렌더링 과정과 이에 관여하는 요소를 대해 알아야 한다. 이 글에서

https://so-so.dev/web/browser-rendering-process/

[2wndrhs]

안녕하세요 좋은 글 잘 읽었습니다😊

다만 MDN: how browsers work 문서를 읽던 중 HTML 파싱은 CSS 파일을 만나도 중단되지 않는다는 설명을 발견하였는데 'CSS 파일의 경우 스타일링이 적용되지 않는 콘텐츠가 잠깐 뜨는 현상을 방지하기 위해 파싱과 렌더링이 차단된다'는 글의 설명과 상충되는 부분이 있어 의문점이 생겼습니다.

Parsing can continue when a CSS file is encountered, but <script> elements — particularly those without an async or defer attribute — block rendering, and pause the parsing of HTML.

추가적으로, MDN 문서에서는 CSS를 페이지 렌더링 과정을 차단시키는 '렌더 블로킹' 요소로 설명하고 있어 CSS는 HTML 파싱 과정을 차단시키는 script 요소와 달리 페이지 렌더링 과정만 차단시킨다고 이해를 했는데요.

CSS is render blocking: the browser blocks page rendering until it receives and processes all the CSS.
MDN: css object model

나름대로 자료들을 찾아보았지만 정확하게 설명해주는 자료를 발견하지 못해서 혹시 관련하여 알고 계시는 부분이 있다면 공유해주시면 감사하겠습니다 :)