FOUC에서 일어나는 일: 포맷되지 않은 내용의 반짝임
13103 단어 webdevcssreactcodenewbie
사례 연구
최근 내가 휴대전화로 인스타그램 이야기를 훑어보았을 때, 코피드의 광고가 나의 주의를 끌었다.이름에'date'가 있지만 흥미로운 것은 결혼정보 사이트가 아니라 일대일의 인성화된 연결이라고 말하는 것이다.'사람'이라는 부분에 공감이 간다.그래서 나는 그것을 클릭하여 이 사이트를 방문했다. 그러나 어머나, 이것은 또 다른 FOUC 문제에 시달리는 사이트이다.페이지가 불러올 때와 페이지가 불러올 때의 스타일 차이를 관찰합니다.
이런 현상을'비양식 내용의 반짝임'(FOUC)이라고 하는데, 이것은 hp5b Frontend Interviewer Questions에 포함된 문제에 관련된 주제이다.
포맷되지 않은 Flash란?
FOUC는 친구가 축소 필터를 사용하지 않은 상태에서 머리를 돌리는 것을 발견할 때, 보통 미학적으로 그다지 매력적이지 않다. 위에서 전환되기 전의 예와 같다.FOUC는 특히 이런 현상을 의식하지 못한 새로운 방문객들에게 아주 나쁜 사용자 체험을 가져왔다.그들은 심지어 너의 사이트가 안전 위협이라고 생각할 수도 있다.이런 현상을 알고 있는 사용자도 존재로 인해 과도적 정체성과 갑작스러움은 사이트의 합법성과 전문성을 떨어뜨린다.
왜 비스타일적인 내용의 반짝임이 나타날까요?
Dave Hyatt는 Safari가 사용하는 소스 오픈 웹 브라우저 엔진 웹키트의 저자로 본문article에서 FOUC 문제를 상세하게 논술했다.
특히 "일반적인 방법"은 다음과 같습니다.
This situation occurs whenever a Web browser ends up showing your Web page’s content without having any style information yet.
정확한 방법:
when/how a browser ends up committing the crime of FOUCing depends heavily on how the browser’s engine is architected and on interesting assumptions made by Web site authors when designing their sites.
그의 글의 나머지 부분은 주로 FOUC를 어떻게 완화시키는지, 특히 웹 엔진을 실현하는 브라우저, 그리고 전형적인 웹 개발자에 대해 웹 브라우저 엔진의 작업 방식이 그들의 일반적인 업무 범위를 넘어섰다는 것을 설명하기 때문에 우리는 여기서 이 점을 토론하지 않을 것이다.
반대로 우리는 작가가 이전에 강조한 뒷부분을 깊이 연구해서 FOUC-사이트 작가가 사이트를 디자인할 때 하는 가설을 피할 수 있는지 살펴보자.
사례 연구 재검토
휴대폰에 있지만 노트북 브라우저에 표시되는 Kopidate를 시뮬레이션하려면 Google Chrome Inspector 네트워크 탭에서 다음을 수행하십시오.
교실에 있어요.다음 GIF 애니메이션에서 빠른 3G 모드를 볼 수 있습니다. 불러오는 데 약 11초가 걸립니다.이런 과도감은 매우 정체되어, 불러오는 데 걸리는 시간은 많은 모바일 사용자들에게 그야말로 고통스럽다.
그렇다면 이 장치의 브라우저는 11s에서 무엇을 했습니까?일반 사용자로서 몇 가지 관찰이 있다.
흥미로운 것은 사용자가 볼 수 없는 많은 다른 그림을 가져오고 불러오는 데 2~10초 전의 대부분의 시간이 걸렸다는 것이다. device viewport마지막 초가 되어서야 빨간색 배경 부분을 가져오고 사용자 장치 뷰포트가 덮어쓰는 영역에 스타일의 예상 배치를 올바르게 표시합니다.이것은 일부 css mask 속성이 존재한다는 것을 나타낼 수 있다. 그 중에서 텍스트는 배경 이미지에 따라 다른 방식으로 나타날 것이다. 왜냐하면 웹 디자이너는 배경 이미지가 항상 존재한다고 가정할 수 있고 배경 이미지가 없는 상황에서 텍스트 스타일에 대한 리턴을 만들지 않았기 때문이다.
참고로 나는 이전에 5G 데이터 네트워크를 사용해서 내 휴대전화의 갑작스러운 변화가 1s 내에서 발생하는 것을 보았다.이는 인터넷 속도에 따라 사용자의 체험도 달라질 수 있다는 뜻이다.한 마디로 하면 FOUC 문제와 성능에 대한 무시는 웹 응용 프로그램의 심각한 폐쇄를 초래하고 많은 잠재적 사용자를 유실시킬 수 있다.
이제 마지막 회: 어떻게 출발해!
HTML 및 CSS만 사용하는 일반 웹 사이트에는 반짝이는 프레임이 없습니다.
경기 시작할 때html 파일, 숨겨진 사이트 배치 스타일
<!doctype html>
<html>
<head>
<style>html{visibility: hidden;opacity:0;}</style>
<link rel="stylesheet" href="style1.css" />
<link rel="stylesheet" href="style2.css">
<link rel="stylesheet" href="style3.css">
style3.csshtml {
visibility: visible;
opacity: 1;
}
✅ Javascript가 활성화되지 않은 장치/브라우저를 지원하는 것도 추천하는 해결 방안입니다.
❌ 만약 당신의 사이트에 정적 내용이 매우 많다면, 당신의 빠른 3G 사용자도 상당히 긴 시간 동안 공백 화면을 주시할 것이다.browser level image lazy-loading와 통합하여 보다 포괄적인 해결 방안을 고려해야 합니다!
React, Vue, Angular와 같은 빛나는 구성 요소 프레임워크를 사용하는 경우
간단한 복구 방법은 위에서 일반 사이트에 제공한 해결 방안과 유사한 조작을 실행하지만 구성 요소 상태 관리를 사용하는 것이다.
React with fallback의 예📘
부작용 연결고리는 렌더링하기 전에 구성 요소를 설치해야 한다.만약 그것이 불러온다면, 이것은 코드에서 스타일시트의 가져오기 문장이 구성 요소의 코드 블록 앞에서 터치되어 스타일시트를 얻을 수 있음을 의미합니다.
import './app.css';
import { useState }, React from 'react';
const defaultState = {
loading: false
}
const AppWithoutFallback = () => {
const [loading, setLoading] = useState(defaultState.loading);
useEffect(() => { setLoading(false) }, []);
return (
<div className="app" style=style={{ visibility: this.state.loading? 'hidden' : 'loading' }}></div>
)
}
import './app.css';
import { useState }, React from 'react';
const defaultState = {
loading: false
}
const AppWithFallback = () => {
const [loading, setLoading] = useState(defaultState.loading);
useEffect(() => { setLoading(false) }, []);
return (
loading
? <div>Fallback content</div>
: <div className="app-container"></div>
)
}
결론
본문을 읽어 주셔서 감사합니다!
만약 당신이 독서를 좋아한다면, 약간의 반응을 남겨 주십시오💌
저도 당신의 어떤 피드백을 받아서 매우 기쁩니다🌻
추가 리소스
만약 이 문장이 너무 짧다고 생각한다면, 내가 아래에서 본 자원을 마음대로 훑어보십시오.
Reference
이 문제에 관하여(FOUC에서 일어나는 일: 포맷되지 않은 내용의 반짝임), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/lyqht/what-the-fouc-is-happening-flash-of-unstyled-content-413j텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
