大きい画面の表示速度が急に遅くなるのはなぜ？

質問

1画面に２０行の表（EXCEL表のようなイメージ）が表示できる画面があります。

２０行を超える場合は、スクロールバーを表示します。
この表が、８０行まではリクエストしてから２秒以内で表示され増すが、
それを超えると極端に表示速度が遅くなり、
１６０行を表示するのに１０秒もかかります。

IE６、IE７、IE８、いずれも同じようにかかります。

なぜ、画面の大きさが2倍になっても表示時間が5倍になるのでしょうか？
また、大きい画面の表示速度を速める知恵がございましたらご教授ください。

よろしくお願いします。

回答No.4

神崎 渉瑠（@taloo） · ベストアンサー

まず初めに。
CSSレイアウトによる表作成（エミュレート）を否定しているわけではありません。
<table>が遅いのは事実ですから。
ただ、CSSの作り方によっては、CSSレイアウトの方が遅くなることもあります。

そういえばここはJavaScriptカテゴリでしたね。
とりあえず、遅くなる原因を確認したいのですが、
・通信
・JavaScriptによるHTMLデータ（HTMLElement）の生成
・描画
どこに一番時間がかかっていますか？

描画に時間がかかっているなら、CSSレイアウトで作り直せば早くなる可能性は高いです。

補足

ありがとうございます。

調査いたしましたところ、
画面表示する際に、１６０行の先頭のチェックボックスの状態を調べて、
チェックマークの状態により、ボタン（１０種類ほどあります）の活性・非活性の制御を行っているスクリプトの実行に時間がかかっていることが判明しました。

このスクリプトを走らせないようにすると、３秒で表示することがわかりました。
ただ、３秒で満足しているわけではなく、２秒以内に表示させたいと考えています。

CSSレイアウトの作り方は存じませんので、参考になるサイトをご存知でしたら教えてください。

よろしくお願いします。

回答No.3

utun01

> taloo様
ここで回答者に対してどうこう言うのは筋違いかと思いますが、
tableに苦しめられた人間として一応お伝えさせて下さい。

tableは一度全てのドキュメントを読み込んでから、
tableの表示ルールに従った形を再計算して、再表示します。
この仕様上、先に申した通り入れ子構造にすると著しく重くなることもありますが、
一度読み込んでからの再配置となる為、ブラウザによっては見苦しいチラつきが出てしまいます。
また、Horirin39様はJavascriptで動的に表示している様ですので
更にこの仕様が重くのしかかってくると思われます。

tableの使用については既に色々な議論がされておりますが
動的な表示に向かないことは仕様上明らかです。

但し、これらの仕様は簡易に記述できるようにする為のものであり、
単純なHTMLとして、且つ簡易な表として表示する際には優秀な機能でもあります。

回答No.2

神崎 渉瑠（@taloo）

widthを指定していなければ、widthを指定するといいのでは？

表（ひょう）を書くために<div>や別のタグで表のように見せかけるというのは、私はお勧めしません。
表のためのタグがあるのですから、そのためのタグを使う方が良いと思います。

お礼

ご回答ありがとうございます。

Widthは指定してあります。
％での指定となっています。

<div>での表示方法は勧められないこと、参考にさせていただきます。

回答No.1

utun01

もしかしてtableを使用していませんか？
tableは入れ子構造が深くなる毎に、再度表示しなおすような処理が入る為、
大きな表を表示する際にはあまり使えません。
（この処理の為、データが増えると加速度的に表示が遅くなります）
Javascriptで動的に表を表示するのであれば
divを重ねて表として表示する方法をお勧めします。

お礼

さっそくのご回答ありがとうございます。

＜div＞を使った表示方法はよく分かりませんが、調査してみます。