問題タブ [fouc]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
pagespeed - PageSpeed Insights は標準に準拠していません
Google PageSpeed は<style>、head のタグに Critical CSS を追加し、外部 CSS を HTML の最後まで延期することを提案しています。
これは、CSS を HTML (分離する必要があります) にインライン化し、CSS が読み込まれるときに FOUC を作成することにより、Web 標準に反します。CSS が読み込まれると、一度にページ全体を表示するように可視性を設定できますが、これによりページ全体の FOUC が作成され、見栄えもよくありません。
<link>ヘッドで a を使用して CSS を正しくロードする場合と、それを後まで延期する場合とでは、リアルタイムの違いはないため、スタイルシートのロードを延期する必要はありません。ページの読み込みには同じ時間がかかります。スタイル付きのページだけを表示するほうがよいのに、半分スタイルのページをユーザーに提供するのはなぜですか。
私の質問は次のとおりです: Web の巨人である Google が、標準に準拠しておらず、FOUC のような読み込み時間の問題を引き起こすようなばかげた慣行を提案するのはなぜですか? これらのアイデアを思いついた人々は、標準の概念を持っていないようです。
reactjs - 本番環境でスタイル設定されていないコンテンツのフラッシュを解決するには?
アプリに NextJs を使用しており、本番環境で FOUC を使用しています。スタイル付きコンポーネントは使用していません。モジュール化されたグローバル CSS/SCSS のみを使用しています。問題は私の_document.jsファイルにある可能性があると思います
javascript - 私のウェブサイトの Twitter フォロー ボタン - スタイルのないコンテンツのフラッシュ
だから私は単にページにフォローボタンを表示したい。非常に簡単。
私のJSファイルには次のものがあります：
次に、HTMLには次のものがあります。
すべてが機能しますが、ボタンがページの上部にあるためです (常に最初のビューポート領域内にあります)。ページを更新する (または初めて読み込む) とすぐに。FOUCが見えます。最初に表示できるように発行されているイベントのようなものはありnoneますか?
ヒントはありますか？