요즘 웹사이트에서 텍스트가 즉시 표시되지 않는 이유는 무엇입니까?

Question 1

한 가지 이유는 요즘 웹 디자이너가 웹 글꼴(보통워프형식), 예를 들어Google 웹 글꼴.

이전에는 사용자가 로컬에 설치한 글꼴만 사이트에 표시할 수 있었습니다. 예를 들어 Mac과 Windows 사용자가 반드시 동일한 글꼴을 가질 필요는 없었기 때문에 디자이너는 본능적으로 항상 규칙을 다음과 같이 정의했습니다.

font-family: Arial, Helvetica, sans-serif;

여기서 첫 번째 글꼴이 시스템에서 발견되지 않으면 브라우저는 두 번째 글꼴을 찾고 마지막으로 대체 "sans-serif" 글꼴을 찾습니다.

이제 브라우저가 글꼴을 다운로드하도록 CSS 규칙으로 글꼴 URL을 제공할 수 있습니다.

@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,700);

그런 다음 다음과 같이 특정 요소의 글꼴을 로드합니다.

font-family: 'Droid Serif',sans-serif;

이는 사용자 정의 글꼴을 사용할 수 있다는 점에서 매우 인기가 있지만 다운로드 시간, 글꼴 로딩 시간 및 렌더링 시간을 포함하는 리소스가 브라우저에 의해 로드될 때까지 텍스트가 표시되지 않는 문제도 발생합니다. 나는 이것이 당신이 경험하고 있는 유물이기를 기대합니다.

예를 들어, 제가 전국적으로 발행하는 신문 중 하나인다겐스 나이헤터, 헤드라인에는 웹 글꼴을 사용하고 리드는 사용하지 않으므로 해당 사이트가 로드되면 일반적으로 리드가 먼저 표시되고 0.5초 후에 위의 모든 공백이 헤드라인으로 채워집니다(Chrome 및 Opera에서는 사실입니다. 적어도 다른 것을 시도하지 않았습니다).

(또한 요즘 디자이너들은 JavaScript를 절대적으로 모든 곳에 뿌리고 있기 때문에 누군가가 텍스트를 가지고 영리한 작업을 하려고 할 수도 있고, 이것이 지연되는 이유일 수도 있습니다. 하지만 이는 매우 사이트에 따라 다를 수 있습니다. Times는 위에서 설명한 웹 글꼴 문제라고 생각합니다.)

덧셈

이 답변은 매우 호평을 받았지만 자세히 설명하지는 않았습니다.왜냐하면이의. 질문 스레드에 많은 댓글이 있으므로 조금 더 확장해 보겠습니다(주제가 보호된 후 잠시 후에 많은 댓글이 사라진 것 같습니다. 일부 조정자가 수동으로 삭제했을 수도 있습니다). 또한 이 스레드의 다른 답변도 각자의 방식으로 확장되므로 읽어보세요.

이 현상은 일반적으로 "스타일이 없는 콘텐츠의 플래시", 특히 "스타일이 없는 텍스트의 플래시"로 알려져 있습니다. "FOUC" 및 "FOUT"을 검색하면 자세한 정보를 얻을 수 있습니다.

나는 추천할 수 있다웹 디자이너 Paul Irish가 FOUT에 게시한 웹 글꼴 관련 게시물.

주목할 수 있는 점은 브라우저마다 이를 다르게 처리한다는 것입니다. 나는 위에서 비슷하게 동작하는 Opera와 Chrome을 테스트했다고 썼습니다. 모든 WebKit 기반 제품(Chrome, Safari 등)은 FOUT을 방지하도록 선택합니다.~ 아니다웹 글꼴 로딩 기간 동안 대체 글꼴로 웹 글꼴 텍스트를 렌더링합니다.설사웹 글꼴이 캐시되어 있습니다.~ 할 것이다렌더링 지연이 되다. 이 질문 스레드에는 캐시된 글꼴이 이와 같이 동작하는 것이 완전히 잘못된 것이라고 말하는 의견이 많이 있지만 예를 들어 위 링크에서 볼 수 있습니다.

어떤 경우에 FOUT을 받게 되나요?

할 것이다:원격 ttf/otf/woff 다운로드 및 표시

할 것이다:캐시된 ttf/otf/woff 표시

할 것이다:data-uri ttf/otf/woff 다운로드 및 표시

할 것이다:캐시된 데이터 URI ttf/otf/woff 표시

하지 않을 것이다:기존 글꼴 스택에 이미 설치되어 이름이 지정된 글꼴 표시

하지 않을 것이다:local() 위치를 사용하여 설치되고 이름이 지정된 글꼴 표시

Chrome은 렌더링하기 전에 FOUT 위험이 사라질 때까지 기다리므로 지연이 발생합니다. 어느쪽으로정도눈에 보이는 효과(특히 캐시에서 로드할 때)는 무엇보다도 렌더링해야 하는 텍스트의 양과 기타 요인에 따라 달라지는 것처럼 보이지만 캐싱이 효과를 완전히 제거하지는 않습니다.

Irish는 또한 게시물 하단에 2011–04–14 현재 브라우저 동작에 관한 몇 가지 업데이트를 제공합니다.

파이어폭스(FFb11 및 FF4 Final 기준)더 이상 FOUT이 없습니다!우후!http://bugzil.la/499292기본적으로 텍스트는 3초 동안 보이지 않았다가 대체 글꼴을 다시 가져옵니다. 웹폰트가 아마도 3초 안에 로드될 것입니다. 하지만… 바라건대..

IE9는 WOFF, TTF 및 OTF를 지원합니다.임베딩 비트 물건을 설정하다– WOFF를 사용하는 경우 대부분 논쟁의 여지가 있습니다).하지만!!! IE9에는 FOUT이 있습니다.:(

웹킷에는착륙을 기다리는 패치0.5초 후에 대체 텍스트를 표시합니다. 따라서 FF와 동일한 동작이지만 3초가 아닌 0.5초입니다.

덧셈: 깜박임이 있음이것에도 버그가 등록되었습니다, 그러나 이를 어떻게 해야할지에 대한 최종 합의에 도달하지 못한 것 같습니다. 현재 WebKit과 동일한 구현입니다.

이것이 디자이너를 대상으로 한 질문이라면 다음과 같은 문제를 피하기 위한 방법을 모색할 수 있습니다.webfontloader, 하지만 그것은 또 다른 질문이 될 것입니다. Paul Irish 링크는 이 문제에 대해 더 자세히 설명합니다.

Answer

한 가지 이유는 요즘 웹 디자이너가 웹 글꼴(보통워프형식), 예를 들어Google 웹 글꼴.

이전에는 사용자가 로컬에 설치한 글꼴만 사이트에 표시할 수 있었습니다. 예를 들어 Mac과 Windows 사용자가 반드시 동일한 글꼴을 가질 필요는 없었기 때문에 디자이너는 본능적으로 항상 규칙을 다음과 같이 정의했습니다.

font-family: Arial, Helvetica, sans-serif;

여기서 첫 번째 글꼴이 시스템에서 발견되지 않으면 브라우저는 두 번째 글꼴을 찾고 마지막으로 대체 "sans-serif" 글꼴을 찾습니다.

이제 브라우저가 글꼴을 다운로드하도록 CSS 규칙으로 글꼴 URL을 제공할 수 있습니다.

@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,700);

그런 다음 다음과 같이 특정 요소의 글꼴을 로드합니다.

font-family: 'Droid Serif',sans-serif;

이는 사용자 정의 글꼴을 사용할 수 있다는 점에서 매우 인기가 있지만 다운로드 시간, 글꼴 로딩 시간 및 렌더링 시간을 포함하는 리소스가 브라우저에 의해 로드될 때까지 텍스트가 표시되지 않는 문제도 발생합니다. 나는 이것이 당신이 경험하고 있는 유물이기를 기대합니다.

예를 들어, 제가 전국적으로 발행하는 신문 중 하나인다겐스 나이헤터, 헤드라인에는 웹 글꼴을 사용하고 리드는 사용하지 않으므로 해당 사이트가 로드되면 일반적으로 리드가 먼저 표시되고 0.5초 후에 위의 모든 공백이 헤드라인으로 채워집니다(Chrome 및 Opera에서는 사실입니다. 적어도 다른 것을 시도하지 않았습니다).

(또한 요즘 디자이너들은 JavaScript를 절대적으로 모든 곳에 뿌리고 있기 때문에 누군가가 텍스트를 가지고 영리한 작업을 하려고 할 수도 있고, 이것이 지연되는 이유일 수도 있습니다. 하지만 이는 매우 사이트에 따라 다를 수 있습니다. Times는 위에서 설명한 웹 글꼴 문제라고 생각합니다.)

덧셈

이 답변은 매우 호평을 받았지만 자세히 설명하지는 않았습니다.왜냐하면이의. 질문 스레드에 많은 댓글이 있으므로 조금 더 확장해 보겠습니다(주제가 보호된 후 잠시 후에 많은 댓글이 사라진 것 같습니다. 일부 조정자가 수동으로 삭제했을 수도 있습니다). 또한 이 스레드의 다른 답변도 각자의 방식으로 확장되므로 읽어보세요.

이 현상은 일반적으로 "스타일이 없는 콘텐츠의 플래시", 특히 "스타일이 없는 텍스트의 플래시"로 알려져 있습니다. "FOUC" 및 "FOUT"을 검색하면 자세한 정보를 얻을 수 있습니다.

나는 추천할 수 있다웹 디자이너 Paul Irish가 FOUT에 게시한 웹 글꼴 관련 게시물.

주목할 수 있는 점은 브라우저마다 이를 다르게 처리한다는 것입니다. 나는 위에서 비슷하게 동작하는 Opera와 Chrome을 테스트했다고 썼습니다. 모든 WebKit 기반 제품(Chrome, Safari 등)은 FOUT을 방지하도록 선택합니다.~ 아니다웹 글꼴 로딩 기간 동안 대체 글꼴로 웹 글꼴 텍스트를 렌더링합니다.설사웹 글꼴이 캐시되어 있습니다.~ 할 것이다렌더링 지연이 되다. 이 질문 스레드에는 캐시된 글꼴이 이와 같이 동작하는 것이 완전히 잘못된 것이라고 말하는 의견이 많이 있지만 예를 들어 위 링크에서 볼 수 있습니다.

어떤 경우에 FOUT을 받게 되나요?

할 것이다:원격 ttf/otf/woff 다운로드 및 표시

할 것이다:캐시된 ttf/otf/woff 표시

할 것이다:data-uri ttf/otf/woff 다운로드 및 표시

할 것이다:캐시된 데이터 URI ttf/otf/woff 표시

하지 않을 것이다:기존 글꼴 스택에 이미 설치되어 이름이 지정된 글꼴 표시

하지 않을 것이다:local() 위치를 사용하여 설치되고 이름이 지정된 글꼴 표시

Chrome은 렌더링하기 전에 FOUT 위험이 사라질 때까지 기다리므로 지연이 발생합니다. 어느쪽으로정도눈에 보이는 효과(특히 캐시에서 로드할 때)는 무엇보다도 렌더링해야 하는 텍스트의 양과 기타 요인에 따라 달라지는 것처럼 보이지만 캐싱이 효과를 완전히 제거하지는 않습니다.

Irish는 또한 게시물 하단에 2011–04–14 현재 브라우저 동작에 관한 몇 가지 업데이트를 제공합니다.

파이어폭스(FFb11 및 FF4 Final 기준)더 이상 FOUT이 없습니다!우후!http://bugzil.la/499292기본적으로 텍스트는 3초 동안 보이지 않았다가 대체 글꼴을 다시 가져옵니다. 웹폰트가 아마도 3초 안에 로드될 것입니다. 하지만… 바라건대..

IE9는 WOFF, TTF 및 OTF를 지원합니다.임베딩 비트 물건을 설정하다– WOFF를 사용하는 경우 대부분 논쟁의 여지가 있습니다).하지만!!! IE9에는 FOUT이 있습니다.:(

웹킷에는착륙을 기다리는 패치0.5초 후에 대체 텍스트를 표시합니다. 따라서 FF와 동일한 동작이지만 3초가 아닌 0.5초입니다.

덧셈: 깜박임이 있음이것에도 버그가 등록되었습니다, 그러나 이를 어떻게 해야할지에 대한 최종 합의에 도달하지 못한 것 같습니다. 현재 WebKit과 동일한 구현입니다.

이것이 디자이너를 대상으로 한 질문이라면 다음과 같은 문제를 피하기 위한 방법을 모색할 수 있습니다.webfontloader, 하지만 그것은 또 다른 질문이 될 것입니다. Paul Irish 링크는 이 문제에 대해 더 자세히 설명합니다.

Question 2

그 이유는 아직 읽을 수 없는 텍스트가 다음과 같이 렌더링되기 때문입니다.웹 글꼴그것은 여전히 파이프를 통해 브라우저로 전달되는 중입니다.

또한 귀하의 브라우저는 WebKit을 사용하여 페이지를 렌더링하는 Google Chrome이므로,그건 그 사람들이 결정한 거야(즉, WebKit) 웹 글꼴을 다운로드할 때까지 어떤 텍스트도 전혀 표시하지 않는 것이 가장 좋습니다. 그러나 적절한 대체 시스템 글꼴로 텍스트를 읽을 수 있기를 원하는 개발자라면 다음과 같은 것을 사용할 수 있습니다.Google의 WebFont 로더이것을 달성하기 위해.

Answer

그 이유는 아직 읽을 수 없는 텍스트가 다음과 같이 렌더링되기 때문입니다.웹 글꼴그것은 여전히 파이프를 통해 브라우저로 전달되는 중입니다.

또한 귀하의 브라우저는 WebKit을 사용하여 페이지를 렌더링하는 Google Chrome이므로,그건 그 사람들이 결정한 거야(즉, WebKit) 웹 글꼴을 다운로드할 때까지 어떤 텍스트도 전혀 표시하지 않는 것이 가장 좋습니다. 그러나 적절한 대체 시스템 글꼴로 텍스트를 읽을 수 있기를 원하는 개발자라면 다음과 같은 것을 사용할 수 있습니다.Google의 WebFont 로더이것을 달성하기 위해.

Question 3

짧은 답변:아약스또는워프

있다여러 가지 원인웹사이트의 존재"텍스트 표시 속도가 느림". 속도가 느려짐Portableapps.com다운로드로 인해 발생합니다.워프글꼴. 그러나 당신이 설명하는 것은"여기저기서 텍스트가 나타나기 시작합니다"다음으로 인해 발생하는 경우가 더 많습니다.아약스.

웹사이트는 많은 부분으로 구성되어 있습니다. 이러한 부품을 다운로드하고 조립하는 방법은디자인 선택의 통제하에웹 디자이너. 개발자가 다음 구성 요소를 조합하기로 선택한 방식으로 인해 속도가 느려집니다.

초기 HTML 페이지
CSS
JS
이미지
WOFF 글꼴
AJAX 요청
DOM 조작

전통적으로 웹사이트:

전통적으로 개발자는 텍스트 콘텐츠를초기 HTML 페이지그리고 그것을 표시이용 가능해지자마자. HTML은 다운로드될 여러 리소스를 참조합니다. 그러면 브라우저는점진적으로 다시 그리다사용 가능한 스타일과 이미지가 포함되도록 화면에 표시합니다. AJAX와 WOFF는 사용할 수 없었습니다.

WOFF 웹사이트:

WOFF 글꼴을 사용하면 웹 사이트에서 일반적으로 브라우저에서 사용할 수 없는 글꼴을 사용할 수 있습니다.웹사이트에서 글꼴 다운로드. 일부 개발자는 모든 WOFF 글꼴이 다운로드될 때까지 텍스트 내용을 표시하지 않도록 브라우저에 지시합니다. 내 경험에 따르면 이 접근 방식은 아직 널리 사용되지 않았습니다.

AJAX 웹사이트:

일부 개발자는 초기 HTML 페이지에 텍스트 콘텐츠를 포함하지 않기로 선택합니다. 대신 AJAX를 사용하여 텍스트 콘텐츠를 다운로드하기로 선택합니다. 이런 일이 일어난다기본 페이지가 로드된 후. 내 경험상 이 방법은 많은 이득을 얻었다.폭넓은 채택WOFF 글꼴보다 설명하는 속도 저하의 원인이 되는 경우가 가장 많습니다.

원인 파악

특정 부위의 원인을 확인하려면 다음과 같은 도구를 사용한 분석이 필요합니다.개똥 벌레또는Chrome 개발자 도구. 또는 다음을 사용하여 사이트를 열 수 있습니다.인터넷 익스플로러 8, AJAX는 지원하지만 WOFF는 지원하지 않습니다. 사이트가 여전히 느리다면 문제는 WOFF가 아니라 AJAX입니다.

Answer