質問: TwitterのTLのようにスクロールすると次々と追加読み込みするようなページを作りたいのですが、上部のプルダウンで表示する情報(TLみたいなリスト情報)を切り替えられるようにします。 プルダウンで選択した表示中の情報はスクロールする度に追加読み込みします。 もし、その途中でプルダウンが切り替えられたら、表示内容を切り替えて新しく表示された情報をスクロールのたびに追加読み込みします。 いったん読み込んだ情報は非表示のものも含めてDOMに追加したままです。 この場合、読み込みの上限は設定してある程度読み込んだらそれ以上読み込めないようにすべきなのでしょうか? レスポンシブのページでPC、スマホ、タブレットいずれでも表示出来るようにしたいのですが、制限する必要がある場合、バイト数、DOMエレメントの数、どういった制限か分からないのですが、それぞれ、どれくらいで止めるべきなのでしょうか? ブラウザ毎にも影響しそうな気はしますが、御教示ねがいます。
回答: 私見になりますが、参考程度に記載します。 制限すべきではありますが、どれくらいとは一概には言えないですね。 例えば表示の背景に画像や背景色、透過度などを用いると描画に一気に負荷がかかります。 その場合、低スペックの端末などではスクロールするだけでアプリごと落ちてしまったりします。 **1.表示したい端末の妥協ライン** 機種を買い換えない方もいらっしゃいます。 ですのでどこまでの表示能力を持った端末をサポートするか?がありますね。 **2.コンテンツの表示数** 1ライン当たりのコンテンツの高さから、 端末の何画面分のサイズで表示するかを決めます。 自分が過去に作ったものだと コンテンツもりもりだったので1画面5個程度の表示で 一回のロードに30件程度表示していました。 また、同条件で100件にすると勢いよくスクロールでブラウザがクラッシュしました。 **3.コンテンツのダウンロード量** LTEや4G、Wi-Fiが当たり前になっている中で通信量は然程問題にはなりません。 ですが、スマホでの下り速度は大体10mbps位なのでロード時間を考えると どんなに大きくても1度にロードする全体を50mb程度、 5ライン表示で1コンテンツ2~3mbにすべきかな?とは思います。 (1画面を数秒でロード出来ればストレスはあんまり感じないかと......) ※下りの通信速度目安 **4.コンテンツの展開速度** 表示に時間がかかるページはユーザのストレスの原因となります。 表示に時間がかかる原因として単純に上記でも語った通信量も重要なファクターとなりますが、 ブラウザへの描画負荷なども考慮したほうが良いです。 例えばフェードや透過度、DOM全体へ複数の背景色の設定、transformなど DOMの計算に時間がかかるような記述は避けたほうが無難です。 Chromeだと転送量に制限を設けたり 端末ごとの画面サイズやUAのエミュレートをおこなってくれるので仮試験でオススメです。 最終的にはやっぱり実機で見たほうがいいと思いますが......。