jamis回答ポイント 100pt

プログラム実行後、ブラウザのフリーズが発生する

PHPで1000件程度のデータを一覧にして表示するプログラムを作成しました。
特に複雑なものではなく、シンプルなものです。

ウェブページに

$rank2=$pdo->query(SELECT * FROM table);
while($rank=$rank2->fetch(PDO::FETCH_ASSOC)){
tableで一覧
}

で一覧表示した後、2秒後くらいにフリーズが発生し、それが3秒程度続きます。
原因を探るべく切り分けたところ、スクリプト周辺に問題がある事がわかりました。
※削除すると発生しない。

一覧表示は1000件程度をテーブルで表示するもので、特に重たいものではありません。
実行後、即座に結果がテーブル(html)として完全に一覧表示され、少し間が空いて3秒程度フリーズが発生します。
※一覧の結果は完全に表示されている状態です。

フリーズ発生の可能性として何が考えられるでしょうか？

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ログインして回答する

回答がありません

この質問へのコメント

a-kuma32015/06/24 23:52:21

＞原因を探るべく切り分けたところ、スクリプト周辺に問題がある事がわかりました。
＞※削除すると発生しない。
「スクリプト」というのが javascript のことを言ってるのだったら、それが原因でしょう。

想像するに、TABLE を並べ替えしたり、一部分だけを固定してスクロール（Excel でいうところの「ウィンドウ枠の固定」）したり、というような javascript だったりするのでしょうか。
その「スクリプト」の作りがあまり良くなくて、行数や列数が多いと、激しく処理時間を食ってフリーズしたように見える（ブラウザの操作が効かない、という意味では、本当にブラウザがフリーズ）ということでしょう。
TransFreeBSD2015/06/25 15:55:46

chromeは使えませんか？
chromeのデベロッパーツールにあるタイムラインはブラウザがどのような処理を行ってきたのか表示できます。
これで何に時間を取られているかはわかると思います。
http://www.buildinsider.net/web/chromedevtools/01#page-6
http://gihyo.jp/dev/feature/01/devtools/0003
http://www.slideshare.net/yoshikawa_t/chrome-developer-tools-17787728
pinkymonk2015/06/25 16:19:24

他の方もかかれていますが原因はブラウザにあるように思います。

phpで書いた値をjavascriptで操作していたりしていませんか。

またブラウザにより動作が異なりませんか。
jamis2015/06/25 16:39:39

みなさん回答ありがとうございます。

スクリプトとはphpのことです。
jsも他の部分で使用していますが、該当部分には使用していないので関係はないのかと思います。
ブラウザはどのブラウザも似たような動作をしています。
chromeのデベロッパーツールで確認してみます。

ソースなり、ページなりを公開すれば話が進みそうですが、事情により公開できません。
申し訳ないです。
a-kuma32015/06/25 18:57:07

php のスクリプトで削除した部分というのは、質問にある fetch のループの部分でしょうか。

table の tr や td の出力ではなく、div なんかで出力するとどうなるでしょう。
もし、それで早くなるようだったら DB 周りの問題ではないし、それでも遅いようであれば fetch のループが遅いところが効いているのかも。

1000件程度だと、そんなに効かないような気もするのですが、列幅が固定のスタイルになっていないと、table タグはレンダリングに時間がかかります（それなりに、ですけど）。
t_yamo2015/06/25 19:12:32

コードの全貌が分からないのでアレですが、whileの中はechoなどでリアルタイムにレスポンスを返している感じでしょうか。
サーバ側は一通り終わったつもりでもクライアント側がflushやclose待ちしてるかもしれません。

設定やコードの内容に合わせて終了処理をちゃんとしているかも確認頂くとよいかなと。
ループの有無で発生有無が左右されるのはバッファの使い具合が影響してるのかなーと思ってみたり。

ただ、30秒フリーズとかの場合だと何がしかのタイムアウトまで待ってから動いてそうな雰囲気ですが、デフォルト3秒のタイムアウトはあまり思い当たらず。
lang_and_engine2015/06/25 20:12:48

テーブル部分のHTMLをajaxで取得して，非同期で描画すれば
フリーズを軽減できますよ。
jamis2015/06/26 11:43:42

みなさんありがとうございます。

更に細かく切り分けていくと、どうも<table><tr><td>~で処理しているためにタイムラグが発生しているようです。
※同じソースを<div>に変更すると発生しないため。
※よくよく調べるとchrome ieで顕著。safari firefoxでは発生していませんでした。

tableタグは全部読み込まないとページを表示しないというルールがあったような気がしますが、このあたりを改善すればなんとかなりそうです。
divタグなどで対応してみようと思います。
制作した同じようなソースの他のウェブサイトではこの問題は発生していないため何か他の要因も絡んでいるのかなとも思いますが・・。

みなさんありがとうございました。
※回答欄に適当に回答していただければ、ポイントも配布させていただきますので。
a-kuma32015/06/27 03:05:49

＞tableタグは全部読み込まないとページを表示しないというルールがあったような気がしますが、
というルールはないんですが、列幅を指定しない table では、セルの文字によって列幅を自動で調整します。
行数が多いと、先を読み込む、列幅を調整する、の繰り返しがあって、ぼちぼち重たくなります。
中身がスカスカだったり、一部のセルだけに長文が書かれていたりするような table だと、顕著に表れます。

table のままでも、col タグを入れて属性で指定するか、css で td の幅を固定値にすると、レンダリングにかかる時間は激減します。
タグ構造を見直す前に、スタイルをいじってみると良いと思います。