분할되지 않은 콘텐츠의 플래시

Flash of unstyled content
위키피디아의 메인 페이지를 로드할 때 FOUC.

모든 정보를 검색하기 전에 페이지를 렌더링하는 웹 브라우저 엔진으로 인해 외부 CSS 스타일시트를 로드하기 전에 브라우저의 기본 스타일을 사용하여 웹 페이지가 잠깐 나타나는 인스턴스(FOUC, 또한 분할되지 않은 텍스트의 플래시)[1][2]이다.[3]이 페이지는 스타일 규칙이 로드되고 적용되는 즉시 수정되지만, 이동은 주의를 산만하게 할 수 있다.관련 문제로는 보이지 않는 텍스트 플래시(FOIT)와 가짜 텍스트 플래시(FOFT)가 있다.[1][2]

기술정보

이 문제는 "미분열 콘텐츠의 플래시"[4]라는 제목의 기사에 기록되었다.처음에 FOUC는 Internet Explorer 특유의 브라우저 문제인 것처럼 보였으나 나중에 다른 브라우저에서 명백해졌고,[5][6] 그 이후로 "사파리 전염병"[7]으로 묘사되었다.

FOUC는 CSS나 HTML 버전의 변경에 무관심하다.문제는 브라우저에 프로그래밍된 우선순위 집합에서 비롯된다.[citation needed]브라우저가 HTML과 마크업에서 참조된 모든 보조 파일을 수집할 때, 브라우저는 즉시 Document Object Model을 구축한다.브라우저는 가장 빨리 구문 분석할 수 있는 텍스트를 먼저 표시하도록 선택할 수 있다.

HTML 페이지는 여러 스타일시트를 참조하는 경향이 있기 때문에 FOUC가 더 널리 퍼져있다.웹 페이지는 종종 프린터와 모바일 장치의 CSS 규칙과 같이 브라우저 화면 이외의 미디어에 대한 스타일 참조를 포함한다.웹 페이지는 스타일 파일의 레이어 및 참조 대체 스타일 시트를 가져올 수 있다.비디오와 검색 엔진과 같은 온라인 광고와 삽입된 다른 오프사이트 콘텐츠는 종종 코드 블록 내에서 그들 자신의 스타일 규칙을 지시한다.CSS 규칙의 계단식 특성은 일부 브라우저가 모든 스타일 데이터가 수집될 때까지 기다렸다가 적용하도록 권장한다.

웹페이지의 스타일링을 더욱 정의하고 적용하기 위해 채용할 수 있는 jQuery와 같은 자바스크립트 라이브러리가 등장하면서 FOUC도 더욱 두드러지게 되었다.분할되지 않은 콘텐츠를 피하기 위한 시도로, 프런트 엔드 개발자는 로드 이벤트 처리기가 트리거되고 로딩 중단이 빈 페이지를 남겨둘 수 있지만, 이 때 분할되지 않은 콘텐츠가 더 선호되는 빈 페이지를 남길 수 있는 완전 로딩이 될 때까지 모든 콘텐츠를 숨기도록 선택할 수 있다.

FOUC를 모방하기 위해 개발자는 웹 페이지의 CSS를 즉시 비활성화할 수 있는 브라우저 추가 기능을 사용할 수 있다.Firebug와 Async CSS는 그러한 부가물이다.

반면, 2016년까지 여러 기법이 HTML5규격이 필요하면서 스타일 시트 자바 스크립트에 의해 주입된 페이지 로딩을 차단하는, 금지된 구글 크롬 버전 50,에서의 행동 표현한 변화 behaviours,[2] 원하지도 않았던 디스플레이를 피하기 위해 개발되었는데, 상황은 창작자의 관심 agai는을 가져왔다.n특히 Adobe Systems의 웹 타이포그래피 제품인 Typekit의 사용자에게 영향을 미친다.[1]2개월 이내에 Adobe는 원하지 않는 렌더링 동작을 피하기 위해 글꼴을 타사 웹 사이트로 포함하는 방식을 변경했다.[8]

참고 항목

참조

  1. ^ a b c Tim Brown (3 June 2016). "Regarding the Flash of Unstyled Text in Chrome 50". Adobe Typekit blog. Adobe Systems. Archived from the original on Sep 1, 2016. Retrieved 9 August 2016.
  2. ^ a b c Chris Coyier (1 April 2015). "FOIT, FOFT". CSS Tricks. Archived from the original on 15 August 2020. Retrieved 9 August 2016.
  3. ^ Designer, Ryan Boudreaux in Web; October 18, in Developer on; 2013; Pst, 8:09 Pm. "How to prevent Flash of Unstyled Content on your websites". TechRepublic. Archived from the original on 2021-03-05. Retrieved 2021-10-09.{{cite web}}: CS1 maint: 숫자 이름: 작성자 목록(링크)
  4. ^ "Flash of Unstyled Content (FOUC)". Blue Robot. 2001. Archived from the original on May 13, 2015. Retrieved 12 October 2012.
  5. ^ "Flash of Unstyled Content (FOUC)". Bugzilla@Mozilla. Archived from the original on 5 November 2016. Retrieved 14 October 2016.
  6. ^ "Chromium Bugs containing 'FOUC'". bugs.chromium.org. Archived from the original on 18 October 2016. Retrieved 14 October 2016.
  7. ^ Dave Hyatt (1 September 2006). "The FOUC Problem". Surfin' Safari. The WebKit Open Source Project. Archived from the original on 30 August 2012. Retrieved 16 October 2012. The FOUC problem would normally be a minor occurrence. However with the advent of Google AdSense, FOUC has become a Safari epidemic. Because these Google ads not only execute inline script but access layout information that they often don't even end up using in the page, the problem of FOUC is much more severe than it should be.
  8. ^ Bram Stein (28 July 2016). "Changes to web font serving on Typekit". Adobe Typekit blog. Adobe Systems. Archived from the original on 15 August 2016. Retrieved 9 August 2016.