最初に CSS ファイルを導入し、最初に CSS スタイルをロードして、ユーザーに乱雑なページが表示されないようにしてから、JS を導入してロードします。 js は通常、関数を処理するため、事前にロードする必要はありません。最初にユーザーに外観と操作性を提供し、次にユーザーに実践的なエクスペリエンスを提供します。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&JavaScript バージョン 1.8.5、Dell G3 コンピューター。
最初に css ファイルを導入して読み込み、次に js を導入して読み込みます。
通常、CSS を上部に、JS を下部に配置します。最初に CSS ファイルを読み込みます (ユーザーに乱雑なページが表示されないようにします)。 、最後にjsファイルを読み込みます。 js は通常、関数を処理するため、事前にロードする必要はありません。最初にユーザーに外観と操作性を提供し、次にユーザーに実践的なエクスペリエンスを提供します。
js スクリプト ファイルの場所
js スクリプトは一番下に配置する必要があります。これは、js スレッドと GUI レンダリング スレッドが相互に排他的であるためです。 . js を先頭に置くと、js をダウンロードして実行するときに、ページを描画するレンダリング プロセスに影響します。js の主な機能はインタラクションを処理することであり、インタラクションは最初にページをレンダリングする必要があります。ユーザー エクスペリエンスを考慮して、最初にページを描画するようにしてください。
CSS ファイルの場所
CSS はページ レンダリングにおける重要な要素の 1 つです (ページ上に外部リンク CSS がある場合) ブラウザは待機します。すべての CSS がダウンロードされ、解析が完了するとページがレンダリングされます。クリティカル パスの遅延は最初の画面までの時間に影響するため、できるだけ早く CSS をユーザーのデバイスに転送する必要があります。そうしないと、(ページがレンダリングされるまで) ユーザーには空白の画面しか表示されなくなります。
CSS ファイルが一番上に配置されるのは、配置順序によってダウンロードの優先順位が決まり、さらに重要なことに、ブラウザのレンダリング メカニズムが決まるためです。
css は読み込み処理中の DOM ツリーの生成には影響しませんが、Render ツリーの生成には影響し、それがレイアウトに影響を与えるため、一般的にスタイルのリンク タグはDOM ツリーは上から下に解析され、CSS スタイルは非同期で読み込まれるため、この場合、DOM ツリー配下の body ノードを解析して CSS スタイルを読み込むことで、可能な限り並行して実行され、レンダー ツリーの生成速度が向上します。
CSS を一番下に置くと、ページは徐々にレンダリングされます。ただし、CSS がダウンロードされて解析された後、レンダリングされたテキストと画像を新しいスタイルに従って再描画する必要があります。悪いユーザーエクスペリエンスです。
プログラミング関連の知識について詳しくは、プログラミング ビデオをご覧ください。 !
以上がjs または css ファイルのどちらを最初に導入する必要がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。