웹 페이지가 텍스트를 즉시 표시하지 않는 이유는 무엇입니까?
독수리 눈으로 브라우저 창을 보는 경향이 있다면, 페이지를로드하기 전에 이미지와 레이아웃을로드하는 페이지가 1990 년대에 경험했던 정반대의로드 패턴과 일치하는지 자주 눈치 챘을 것입니다. 무슨 일이야?
오늘의 질문 및 답변 세션은 Q & A 웹 사이트의 커뮤니티 중심 그룹 인 Stack Exchange의 하위 부문 인 수퍼 유저의 도움으로 이루어졌습니다..
질문
수퍼 유저 독자 Laurent는 페이지가 정확히 한 번에 완전히 다른 방식으로 요소를로드하는 이유에 대해 매우 궁금합니다. 그는 쓴 :
최근에 많은 웹 사이트가 텍스트를 표시하는 속도가 느리다는 것을 알았습니다. 일반적으로 배경, 이미지 등은로드되지만 텍스트는로드되지 않습니다. 얼마 후 텍스트가 여기 저기에 나타나기 시작합니다 (항상 같은 시간에 모두 표시되는 것은 아닙니다)..
기본적으로 텍스트가 처음 표시 될 때와 이미지와 나머지가로드 될 때와 마찬가지로 반대 방향으로 작동합니다. 어떤 새로운 기술로이 문제가 발생하고 있습니까? 어떤 아이디어?
내가 느린 연결 상태에 있다는 것을 기억하십시오. 아마도 이것은 문제를 강조 할 것입니다..
예를 들어 [위]를 보면 모든 것이로드되지만 텍스트가 마침내 표시되기까지 몇 초가 걸립니다..
그래서 무엇을 줄까요? Laurent과 많은 사람들이 텍스트가 처음으로로드되고 garrish 애니메이션 GIF, 바둑판 식 배경 및 90 년대 후반 웹 탐색의 다른 모든 아티팩트가 나중에 나온 시간을 기억하십시오. 디자인 요소의 현재 상황을 먼저 발생시키는 원인은 무엇입니까??
대답
수퍼 유저 기고가 인 다니엘 앤더슨 (Daniel Andersson)은 왜 폰트로드 최후의 수수께끼의 맨 아래까지 정확하게 도착할 수 있는지에 대해 자세히 설명합니다.
웹 디자이너는 요즘 웹 글꼴 (일반적으로 WOFF 형식)을 사용하고 싶어합니다. Google 웹 글꼴을 통해.
이전에는 사이트에 표시 할 수있는 글꼴은 사용자가 로컬로 설치 한 글꼴뿐이었습니다. 예를 들어 Mac과 Windows 사용자가 반드시 같은 글꼴을 사용하지는 않지만 디자이너는 본능적으로 규칙을 항상
font-family : Arial, Helvetica, sans-serif;여기서 첫 번째 글꼴이 시스템에서 발견되지 않으면 브라우저는 두 번째 글꼴과 마지막으로 대체 글꼴 인 "sans-serif"글꼴을 찾습니다..
이제 글꼴 URL을 CSS 규칙으로 지정하여 브라우저에서 글꼴을 다운로드하도록 할 수 있습니다.
@import url (http://fonts.googleapis.com/css?family=Droid+Serif:400,700);특정 요소에 대한 글꼴을 다음과 같이로드하십시오.
font-family : 'Droid Serif', 산 세리프 (sans-serif);이는 사용자 정의 글꼴을 사용할 수 있도록 인기가 있지만 다운로드 시간, 글꼴 로딩 시간 및 렌더링 시간을 포함하여 브라우저에서 자원을로드해야 텍스트가 표시되지 않습니다. 나는 이것이 당신이 경험하고있는 유물이라고 기대한다..
예를 들어, 내 전국 신문 중 하나 인 Dagens Nyheter는 헤드 라인에 웹 글꼴을 사용하지만 리드는 사용하지 않기 때문에 해당 사이트가로드 될 때마다 보통 리드를 먼저보고 나중에 0.5 초 후에 모든 빈 스페이스가 채워집니다 헤드 라인이 있습니다 (Chrome과 Opera에서 마찬가지입니다..
(디자이너는 요즘 어디에서나 JavaScript를 뿌리므로 어쩌면 누군가가 텍스트를 영리하게하려고 노력할 수 있습니다. 지연되는 이유는 사이트마다 다를 수 있습니다. 텍스트의 일반적인 경향은 다음과 같습니다. 시간은 위에서 설명한 웹 글꼴 문제입니다.)
부가:
이 답변은 매우 자세하게 설명되었지만, 자세히 설명하지는 않았거나 아마도 때문에 이의. 질문 스레드에 많은 의견이 있었으므로 조금 확장 해 보겠습니다. [...]
이 현상은 일반적으로 "unstyled content flash"로 알려져 있으며 특히 "unstyled text flash"라고 알려져 있습니다. "FOUC"와 "FOUT"를 검색하면 더 많은 정보를 얻을 수 있습니다..
웹 디자이너와 관련된 FOUT에 대한 웹 디자이너 Paul Irish의 게시물을 추천 할 수 있습니다..
주목할 점은 다른 브라우저가이를 다르게 처리한다는 것입니다. 위와 같이 썼다. 오페라와 크롬은 비슷하게 행동했다. 모든 WebKit 기반 프로그램 (Chrome, Safari 등)은 FOUT를 피하기로 선택합니다. 아니 웹 폰트 로딩 기간 동안 폴백 폰트로 웹 폰트 텍스트 렌더링하기. 설사 웹 글꼴이 캐시에 저장됩니다. 의지 렌더링 지연이있다.. 이 질문은 스레드가 다르게 말하는 의견이 많으며 캐시 된 글꼴이 이와 같이 작동하지만 잘못된 결과가 나올 수 있습니다. 위의 링크에서 :
어떤 경우에 FOUT을받을 수 있습니까?
- 의지: 원격 ttf / otf / woff 다운로드 및 표시
- 의지: 캐시 된 ttf / otf / woff 표시
- 의지: data-uri ttf / otf / woff 다운로드 및 표시
- 의지: 캐시 된 데이터 표시 - uri ttf / otf / woff
- 하지 않을 것이다: 기존 글꼴 스택에 이미 설치되고 이름이 지정된 글꼴 표시
- 하지 않을 것이다: local () 위치를 사용하여 설치되고 명명 된 글꼴 표시
Chrome은 렌더링 전에 FOUT 위험이 사라질 때까지 기다리기 때문에 지연이 발생합니다. 어느 곳에 범위 효과가 표시됩니다 (특히 캐시에서로드 할 때) 렌더링해야 할 텍스트의 양과 다른 요인에 따라 달라지는 것처럼 보이지만 캐싱이 효과를 완전히 제거하지는 않습니다.
아일랜드어에는 게시물 하단의 2011-04-14 현재 브라우저 동작에 관한 몇 가지 업데이트가 있습니다.
- Firefox (FFb11 및 FF4 최종) 더 이상 FOUT가 없다.! Wooohoo! http : //bugzil.la/499292 기본적으로 텍스트는 3 초 동안 표시되지 않으며 대체 글꼴이 표시됩니다. webfont는 아마도 3 초 내에로드되지만 아마도 ...
- IE9는 WOFF, TTF 및 OTF를 지원합니다 (WOFF를 사용하는 경우 임베디드 비트 셋이 필요합니다.. 하나!!! IE9는 FOUT를 가지고있다.. :(
- Webkit에는 0.5 초 후에 대체 텍스트를 표시하기 위해 착륙 대기중인 패치가 있습니다. FF와 같은 동작이지만 3s 대신 0.5s입니다..
이것이 디자이너를 대상으로 한 질문이라면, 다음과 같은 문제를 피할 수있는 방법으로 갈 수 있습니다.
webfontloader, 그러나 그것은 또 다른 질문이 될 것입니다. Paul Irish 링크는이 문제에 대해 자세히 설명합니다..
설명에 추가 할 것이 있습니까? 의견에서 소리가 나지. 다른 기술에 정통한 Stack Exchange 사용자의 답변을 더 읽고 싶습니까? 전체 토론 스레드를 여기에서 확인하십시오..
