0

stackoverflow.comブラウザーが Web サイトを解析する方法と、入力からブラウザーにページを表示するまでのすべての作業をブラウザーがどのように行うかについては、大まかに知っています。

ここでの問題は、特定の一連のタスクを必要な順序で強制するために、その動作をオーバーライドまたは操作するにはどうすればよいかということです。

私は次のようなことを意味します：

  1. Web サイトのスクロールせずに見える部分の上にある HTML コードのみをダウンロードします。
  2. Web サイトのスクロールせずに見える部分の上にあるスタイルシートをダウンロードして解析します。
  3. スクロールせずに見える範囲でレンダリング
  4. スクロールせずに見える範囲の画像をダウンロードする
  5. アバブ ザ フォールドの JS をダウンロードする
  6. JS の解析中に、Web サイトの別のセクションをダウンロードします
  7. 繰り返す...

私の例では、スクロールせずに見える部分をできるだけ早くレンダリングしてから、ページの残りの部分をレンダリングしたいと考えています。

明らかに、これは何ができるかを尋ねる非常に単純化された例であり、この機能 (または同様のもの) を実装するライブラリがあるかどうかも知りたいです。

4

1 に答える 1

3

ブラウザーは、どの Web サイトのソースがスクロールせずに見える範囲だけに触れているかをどのように認識するのでしょうか?

まあ、あなたはそれを世話する必要があります。明示的に。

  • サイトの最初のスタイルシートには、「スクロールせずに見える範囲」のスタイルのみを含めます。
  • サイトの最初の JavaScript には、「スクロールせずに見える範囲」の動作と、残りのコンテンツを動的にフェッチする動作のみを含めます (たとえば、 jspmを使用するとそれが可能になります)。
  • 最初のビューポートがレンダリングされたら、JavaScript をダウンロードして残りのスタイル/スクリプトを挿入し、それらを DOM に挿入します。
  • また、ウェブサイトをチャンクに分割し、ユーザーが近くにスクロールすると動的に読み込まれるようにすることもできます (たとえば、画像/動画の遅延読み込み、YouTube のコメント セクションなどを参照してください)。

注意: 「スクロールせずに見える範囲」とは何ですか? 携帯電話やスマート ウォッチなど、画面が小さいデバイスのスクロールせずに見える範囲に何があるかわかりますか?

ほとんどの場合、Web サイトのパフォーマンスを低下させるのは不要なスクリプトとメディアです。これらをプリフェッチする理由はありません。

これを過度に設計するのではなく、より単純なアプローチを採用する必要があります (ユーザーが最初にスクロールする必要があるデータの大きなチャンクを遅延読み込みするなど)。

于 2016-04-09T04:28:42.220 に答える