0

無限スクロール ページを作成しようとしています -このような tumblr アーカイブ ページにいくぶん似ています。サーバー呼び出しでコンテンツをロードする必要があるという概念は理解していますが、Tumblr のようにこの「アニメーションによるロード」設計を実現する方法がわかりません。

正確なコードは知りたくありません。ソリューションの全体的な概念だけを知りたいです。では、このようなことを行うためのベストプラクティスは何でしょうか?

サーバーから何を取得する必要がありますか: 大量のJSON データまたは完全な HTML ページ?

上記の Tumblr ページをデコードしようとしましたが、ネットワーク トラフィック ページで、すべてのスクロール イベントで、独自の JavaScript および CSS コンテンツを含む完全なHTML ページを返す POST 要求があることがわかりました。

アニメーション ロジックは、この JavaScript コンテンツ内にあると思います。

しかし、この方法について 2 つの質問があります。

  • サーバーから完全な HTML ページ (新しいページも含む) を取得した場合、現在表示されている HTML ドキュメントを破棄して新しいページを設定するにはどうすればよいですか?
  • 毎回完全な HTML ドキュメントを返すのは、パフォーマンスの観点からあまりにも悪いことではありませんか? ドキュメント全体には、アーカイブの前の「ページ」の結果も含まれているためです。それとも私は間違っていると思いますか？

サーバーから JSON のみの結果を返すほうがよいのではないでしょうか? （クライアントで解析する必要がありますが、ネットワークトラフィックにやさしいと思います）

JSON を返すほうがよい場合、なぜ Tumblr は逆に機能するのでしょうか?

4

1 に答える 1

1

使用されないデータを大量に送信しないことは確かに有益です。ただし、サーバーに多くのリソースがある場合は、クライアントの代わりにサーバーで前処理を行うことができます。つまり、JSONの代わりに、追加されるブロックであるHTMLスニペットを送信できます。さらに、HTML構造が非常に複雑な場合は、それを2回実装する必要はありません。1回はHTMLで、もう1回はJavascriptで。

Tumblrが機能する方法は、サーバーコードベースにこれ以上追加することを望まず、代わりにクライアントに作業をオフロードするためである可能性があります。一度に送信されるページは1つだけなので、オーバーヘッドはページ数に対して一定です。クライアントは完全なHTMLを取得し、DOM操作で対応する要素を見つけて、それをどこかに配置することができます。

実際、これがAutoPagerプラグインの機能です。ユーザーから「次の」リンクとページ本文を学習し、疑いを持たないサーバーから追加の全ページをフェッチして、そのコンテンツをページに挿入します（次のページのURLを読み取ります）。 。

要するに：

  • JSONの利点は、帯域幅の使用量が少ないことです。
  • HTMLスニペットの利点は、クライアントの処理能力に対する要求が低く、コードの重複がほとんどまたはまったくないことです。
  • フルHTMLの利点は、サーバーが最初のページまたはその他のページを提供しているかどうかを気にする必要がないことです。
于 2012-09-22T23:35:15.513 に答える