423_html/css_WEB-ITnose

Web ページの高さを決定し、その高さに基づいて最初の画面行を取得します。最初の画面行より上のコンテンツは、時間内に表示できるかどうかによって決まります。ユーザーを維持することは非常に重要な要素です。調査によると、ユーザーは 2 秒以内に Web ページを開く速度に最も満足しています。

Fire Bird Studio

初回画面時間

Web ページの高さを決定し、その高さに基づいて最初の画面行を取得します。最初の画面行より上のコンテンツは、初めてユーザーに表示される必要があります。タイムリーに表示できないことは、ユーザーを維持する上で非常に重要な要素です。調査によると、ユーザーは 2 秒以内に Web ページを開く速度に最も満足しています。

• 初回画面時間: ユーザーが閲覧するコンテンツがレンダリングされ、ページをスクロールせずに操作できる時間を指します。
• 読み込み時間: ページ全体が一番下までスクロールし、レンダリングされてインタラクティブになるまでにかかる時間。

ユーザーがサイトにアクセスすると、ブラウザは HTML ドキュメントのリクエストを送信し、ドキュメントを受信すると、解析を開始してウィンドウ上に表示します。

このプロセスでは、2 つの非常に重要な時点があります:

• Time Of First Byte (最初のバイト時間)
• Start Render Time (レンダリング開始時間)

上記 2 つの時点が初回となります。スクリーンタイムは、以下に示すように 3 つの短い期間に分割されます:

最初のバイトの時間

最初のバイト時間が長いほど、ブラウザによるドキュメントの解析が遅くなり、最初のスクリーンタイムも長くなります。

このタイミングは HTML5 パフォーマンス API で提供されます。

最初のバイトまでの時間が長い場合、ボトルネックはネットワーク、バックエンド プログラムなどにあるはずです。

レンダリング開始時間

レンダリング開始時間とは、ユーザーの画面に最初にコンテンツの表示が開始される時間を指します。

ブラウザは最初は空白ですが、描画中にテキスト、背景、ロゴなどを含む内容が変化します。

head タグなどの非ビジュアル DOM はブラウザ ウィンドウに表示されません。つまり、ブラウザがレンダリングを開始する前に、少なくとも head タグ内のコンテンツを解析する必要があります。

通常の状況では、ドキュメント内の CSS ファイルの準備ができていれば描画を開始できます。CSS ファイルはすべて head タグに書き込まれています。したがって、bodyタグのレンダリングが開始される瞬間、またはheadタグが解析される瞬間がStart Render Timeであると考えることができます。

この機能によれば、body タグの先頭または head タグの末尾にスクリプトを埋め込んで、開始レンダリング時間を取得できます。

最初の画面の使用量を減らす方法

• 最初の画面にCSSを埋め込む
• Cssはheadに配置し、jsはの前に配置
• jsは極力非同期で読み込む、スクリプトタグに async 属性が追加されます

Hand Taobao rem Solution

flexible.js

すべてのリソースが読み込まれる前にこの js を実行することをお勧めします

この js は data-dpr と font を追加しますhtml、document.documentElement、および後続の要素の -size 属性は、 rem を使用して設定できます。ここで設定された font-size は、rem の参照ピクセルです

この計画では、ビジュアル ドラフトを 100 の部分に分割し、各部分は次のように認識されます。単位は a で、1rem は 10a として認識されます。例として 750px のビジュアル ドラフトを見てみましょう:

1a = 7.5px1rem = 10a = 75px

flexible.js は正確に何をするのですか?

1. metaタグにビューポートが設定されている場合は、既存のビューポートを使用してdprを設定します
2. metaタグにflexibleが設定されている場合は、その中のコンテンツを使用します
3. metaタグが上記2つに一致しない場合これらのいずれかが書き込まれると、自動的に dpr 値が取得されます。
   1. iosではdprはデバイスのdprに設定されます
   2. Androidでは一律dpr=1が設定されます

取得したdprは何に使うのですか？

そのような式があります:scale = 1 / dpr (scale はスケーリング値です)

#span{ font-size: 20px;}[data-dpr="2"] span { font-size: 40px;}	[data-dpr="3"] span { font-size: 60px;}

上記の CSS コードは、dpr=1、dpr=2、および dpr の場合のスパンを設定します。フォントサイズはそれぞれ =3。

• dpr = 1、scale = 1、font-size = 16px;
• dpr = 2、scale = 0.5、font-size = 32px; 32px のフォントを 0.5 倍に拡大しても、サイズは 16px になります
• dpr = 3、scale = 1/3、font-size = 48px; 48px フォントを 1/3 倍に拡大しても、サイズは 16px になります