FOCが起こっていること:非スタイルのコンテンツのフラッシュ
14087 ワード
事例研究
最近、私の携帯電話でInstagramの話を見ている間に、Kopidateによるある広告が目に入った.'日付'をその名前の一部として持っているにもかかわらず、私は、それが彼らがマッチしているサイトでなく、1 : 1の接続を人間化することであると言うのが面白かったと思いました.「人間」の部分は、私が共鳴していると感じた何かでした.それで、私はサイトを訪問するためにそれをクリックしました、しかし、ああBoy、それはFUC問題に悩まされるもう一つのウェブサイトでした.ページが読み込まれたときと、ページが読み込まれたときにスタイリングの違いを観察します.
この現象は、unstyled content(FOUC)のフラッシュとして知られており、hp5b Frontend Interviewer Questionsに含まれる質問によってカバーされているトピックである.
何が非スタイリングコンテンツのフラッシュですか?
FUCは、あなたの友人がズームフィルタを適用せずに頭を回すのをキャッチしたときに真実の短い瞬間です-しばしば、それは審美的に魅力的ではなく、上記の例と同様に移行が起こった.FOOCは、この現象に気づいていない新しい訪問者のために、特に非常に悪いユーザー経験をもたらします.彼らは、あなたのウェブサイトがセキュリティ脅威をもたらすとさえ思うかもしれません(私の母は、彼女が訪問する新しいサイトのために私に多くのことを私に尋ねます).この現象を知っているユーザーのためにさえ、その存在によって、遅れの遅れと急峻さはウェブサイトの合法性と専門主義を減らします.
なぜunstyledコンテンツのフラッシュが起こるのですか?
デイブハイアット、WebKitからの著者、Safariによって使われるオープンソースのウェブブラウザエンジンは、このarticleで非常に詳細にFUC問題に光を投げかけます.
特に「一般的な方法」:
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.
彼の記事の残りの部分は、特にWebエンジンを実装するブラウザーのために、特に典型的なウェブ開発者にとって、FORMCを緩和する方法に焦点を当てています.
その代わりに、私たちは、FOOCを避けるために以前著者によって強調された後者の部分に深く掘り下げることができるかどうか見ましょう.
事例研究の再検討
私のモバイルでKopidateのために見たものをエミュレートするために、しかし、私のラップトップのブラウザーで、Google Chrome Inspector Networkタブで
あなたもそれを試してみることができます👇
中で.下のGIFアニメーションは、それが高速の3 Gモードのために約11 sを終えたことを見ることができます.移行は非常にぎこちない感じがしました、そして、それがロードにかかった時間は多くのモバイルユーザーのために単純に苦痛です.
それでは、デバイスのブラウザは、その11 sで何ですか?通常のユーザとしてのいくつかの観測:
に現れている
そして、もしあなたがネットワークログを再生している場合は、大まかに何が起こるかを理解している.ネットワーク検査官に慣れていない人のために、検索されているファイルの名前はいくつかのランダム化された迷惑であり、理解されるつもりではありませんが、我々はまだ検索されるデータのタイプを見ることができます.このようなファイルをクリックすると、どの画像が正確に検索されます.
興味深いことに、それは最初の2 s - 10 sの大部分を費やしていて、ユーザーが彼らのdevice viewportを越えて見ることができない多くの他のイメージをロードして、ロードしていました.それは最終的にそれが最終的に赤い背景部分をフェッチして、ユーザーのデバイスビューポートがカバーする領域で、スタイルの意図されたレイアウトを示す前に、最後の2番目だけでした.これはおそらく、バックグラウンドイメージに基づいてテキストが表示される、css maskプロパティの存在を示すでしょう.Webデザイナーは、バックグラウンドイメージが常に存在し、バックグラウンドイメージがない場合のテキストスタイルのフォールバックを作成していないと仮定します.
参考に、私は以前、5 Gデータネットワークを使用して、1 sで私の電話の突然の移行が起こるのを見ました.つまり、ネットワークの速度に応じて、ユーザーの経験も同様に異なります.要約すると、FOCの問題とパフォーマンスの両方に対する怠慢は、Webアプリケーションの大きなターンオフになりそうです.
今すぐフィナーレ:どのようにオフに汚い!
バニラのウェブサイトでのみ、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">
html {
visibility: visible;
opacity: 1;
}
✅ また、JavaScriptが有効になっていないデバイス/ブラウザをサポートするための推奨ソリューションです.
❌ 静的なコンテンツの多くを持っているあなたのウェブサイト、あなたの高速3 Gユーザーがまだかなりの時間の空白の画面を見つめている場合.よりHolisticな解決のためにbrowser level image lazy-loadingと統合することを考えてください!
あなたが反応、Vue、角度などのような光沢のあるコンポーネントフレームワークを使用している場合
単純な修正はバニラウェブサイトのために上記の解決に類似した何かをすることです、しかし、コンポーネント州管理を使用して.
無反応の例📘
それが行うことは、副作用フックがコンポーネントがレンダリングの前にマウントされることを確実とするということです.そして、それがマウントされるならば、それはコードで順番にそれを意味します、スタイルシートのための輸入声明はコンポーネントのためにコードブロックの前に引き起こされました.そして、それがスタイルシートを得ることを確実としました.
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
この問題について(FOCが起こっていること:非スタイルのコンテンツのフラッシュ), 我々は、より多くの情報をここで見つけました https://dev.to/lyqht/what-the-fouc-is-happening-flash-of-unstyled-content-413jテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol