1. CSSOM과 DOM이 완성되지 않으면 Render block이 발생한다고 했는데! FOUC가 어떻게 발생하지?
지난글 Render blocking의 1.CSS에서 분명히
브라우저에서는 DOM과 CSSOM을 모두 사용 할 수 있게 될 때 까지 렌더링을 차단합니다.
CSS는 렌더차단 요소입니다. 최초 렌더링에 걸리는 시간을 최적화하려면 클라이언트에 최대한 빠르게 다운로드되어야 합니다.
라고 했는데 FOUC가 어떻게 발생하는것일까? 하는 의문이 생겼다.
FOUC(Flash of Unstyled Contents)
css가 적용되지 않은 컨텐츠가 브라우저에 나타났다가 뒤늦게 스타일이 적용되며 깜빡이는 현상을 말한다.
그런데 바로 이부분이 내가 알고있던 내용과 상충되는 내용이었다.
랜더링을 하려면 CSSOM이 완성되어야 하는데
FOUC가 발생하려면 CSSOM없이 랜더를 해야한다.
이유
GPT-4에게 질문하고 얻은 이유로는 아래와 같다.
- 늦은 CSS 로딩: 웹 페이지에 포함된 CSS 파일이 느리게 로드되는 경우 FOUC가 발생할 수 있습니다. 이때 브라우저는 DOM을 구축하지만, CSSOM이 아직 준비되지 않았기 때문에 스타일이 적용되지 않은 상태로 페이지를 렌더링합니다. (그럴 수 없다며..)
-
비동기 또는 지연된 CSS 로딩: CSS 파일을 비동기적으로 로드하거나 태그의 media 속성을 사용하여 조건부로 로드하는 경우, 초기 로드 시에 스타일이 적용되지 않아 FOUC가 발생할 수 있습니다. (말이 되는 이유)
-
자바스크립트에 의한 스타일 변경: 일부 JavaScript 코드는 페이지 로드 후 스타일을 동적으로 변경할 수 있습니다. 이 경우, JavaScript가 실행되기 전과 후에 페이지의 스타일이 달라질 수 있어 FOUC가 발생할 수 있습니다. (새로 알게된 이유)
-
@import 규칙 사용: CSS 내에서 @import 규칙을 사용해 다른 CSS 파일을 불러오는 경우, 불러온 파일이 로드되고 파싱되는 동안 FOUC가 발생할 수 있습니다. (폰트를 사용할때 경험해본 이유)
-
CSSOM 구축 지연: 복잡하거나 큰 CSS 파일은 파싱 시간이 길어져 CSSOM 구축이 지연될 수 있으며, 이로 인해 FOUC가 발생할 수 있습니다. (이해가 안되는 이유)
결론
DOM과 CSSOM트리가 완성되기 전까지 렌더링을 막는 이유는 무었일까?
사용자 경험이 좋지 않기 때문이라고 생각 할 수 있을것 같다.
그럼 마찬가지로 컨텐츠가 전혀 표현되지 않는 상황과 스타일이 적용되지 않더라도 컨텐츠를 표시하는 상황중 어떤것이 사용자 경험이 더 낫다고 판단할까?
브라우저를 만든 사람은 후자가 더 낫다고 판단하여 FOUC를 발생시킨것이 아닐까 추측해본다.
그래서 정확하게 이유를 찾으려 노력해봤지만 알 수는 없었다.
Chromium 코드까지는 찾아봤지만 뭔소린지 모른다.
HTML 파서: html_document_parser.cc
Dom: 파서document_parser.cc
CSSOM 파서: css_parser.cc
