jqueryを用いてサイトを読み込む量を軽くする目的で1枚のhtmlファイル(もしくはphpで出来たhtmlファイル）を、 無限スクロールなどで数回に分割して読めないか。

Question

1ページのhtmlファイルや、phpで作られたhtmlページが重たいので、
いくつかに分割して、スクロールして読み込むことが出来たら良いと思っていました。
例えば5回くらいに分割して読みながらフッターまで行くような感じで。
1度で表示できなくもないですが、少し重いと言えば重いと自分では思っています。

そして分割してスクロールするようなサイトを見たことがあったので
調べてみた所、「無限スクロールの実装」、「もっと見る」などあったのですが、
これらは

で、ネット上を自分で調べてみたところ、
「無限スクロールの実装」、「もっと見る」、のような機能についてはあったのですが、
これは読んだら次のファイルに行くタイプのもの、例えば
a.html b.html c.html d.html e.html

などの形に5つ用意してそれぞれを読んで進んでいくもの・・と自分なりには解釈しましたが・・

phpやhtmlが先に1枚あったとして、本来はこれを5枚のファイルに分けるべきかもしれませんが、
1枚のファイルの中で、数回でフッターまでたどり着くことは不可能でしょうか？

Answer 1

1枚のファイルの中で、数回でフッターまでたどり着くことは不可能でしょうか？

よほど特殊な実装をしない限り無理です。ふつうにHTMLにアクセスすれば、まずブラウザがHTMLパースを行いますので、JavaScriptはそこに介入できません。

もっとも、「重たい」ページの重たさの原因がどこにあるかによって対処法は変わってきます。画像が重いのであれば、画像ファイルだけ遅延させることにも効果はあります。

Comments

[gugupoo]

画像はとても多いとは思えませんでしたが、もちろんありますので、
今回はいったん　PHP for文の繰り返しの数を減らして、
表示そのものを少し制限することに納得いきましたので
それでいってみようと思います。有難うございました！

Answer 2

１枚のHTMLを解釈して適切に分割するのはかなり面倒だと思います
あまりおすすめしません
PHPなどサーバーサイドの処理が可能ならAPIでデータを段階的に送ればよいでしょう

Comments

[gugupoo]

1枚からの分割案は普通は用いることは考えない方が良い具合ですね。
有難うございました！

Answer 3

いくつかに分割して、スクロールして読み込む

maisumakunさんが書かれている通り
1枚を分割して読むのは難しいと思いますし
ファイルを複数に分けて読ませれば
それを呼び出しに行く為のロスが出ます。

重いという事ならば、「分割」の前に

● 画像のスリム化や最適化
● 余計なタグ、cssの重複呼び出し
● scriptなどの移動
● キャッシュの利用

といったファイルそのものの
スリム化軽量化を試されてはいかがでしょう?

Comments

[gugupoo]

改めて「分割」作戦も狙うことにしました。有難うございました！

[gugupoo]

肝心な間違いをすみません；　改めて「軽量化最適化」を狙うことにしました！

Answer 4

JavaScriptにしろ、PHPにしろ、遅延ロードはかなり難しい分野になります。
むしろJavaScriptなら、別ファイルを非同期で読み込むなどの方法があるのでまだマシですが、
PHPは出力したものを、ブラウザに返すので、API的に次のファイルを読み込むって形でないと遅延ロードは難しいかと思います。
（出力されてしまっているため、先にパースとレンダリングが走る）

そこで、
template要素を使うことをお勧めします。
これは、DOMとしてパースは行われてしまいますが、
ページロード時にレンダリングを行わないという性質の要素になります。
この要素の中に入った全ての要素、画像はレンダリングが行われないため、
その分速度を担保できます。

あとは、スクロールによって、要素位置付近まできたら、
templateの中身を取り出し、対象のDOM（位置）に出力する、という方法がいいでしょう。
そこまでやらなくても、画像の遅延のみで解決できそうなら、
maisumakunさんのご回答とおり、画像の遅延のみでもいいかと思います。
（実際それだけでもだいぶページ表示速度上がります）
いずれにせよ、JavaScriptでコントロールできます。