IEで長いWEBページを表示した場合に、スクロールがループしてCPU使用率が100%になります

質問

下記現象にて困っております。
解決策をご存知の方がいらっしゃいましたら、ぜひご教授下さい。
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
　　　　　　　│　タイトル一覧　　　　　　│
　　　　　　　￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
メニュー　　｜　コンテンツ内容　　　　｜
　　　　　　　｜　　　　　　　　　　　　　　　｜
￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
PHPにて、上記のようなフレーム構成のWEBページを作成しておりました。
メニューをクリックすると、タイトル一覧が表示されるのですが、
タイトル一覧の行数が650行を越える辺りから、メニューを選択した時に、
CPUの負荷が異常に高くなったままになります。
そこで、タイトル一覧のスクロールバーをずっと下に押しっぱなしにして
みたところ400行辺りから、401->402->403->400->401->402->403->404
->400・・というように表示がループしておりました。
何度か試したところ、これは、タイトル一覧のフレームにフォーカスを
あてることで、解消されることがわかり、読み込み時にjavascriptで
フォーカスをあてるようにしました。
これで万事OKかと思っていたのですが、この現象は、ウィンドウの最大化等
を行った時にも、再描画の為に発生することが判明し、どうしたらいいもの
かと困っています。
現在、判明していることは下記４点になります。
(1)一覧が650を越える辺りから発生する。それ以下だと発生しない。
(2)フォーカスをあてることで、処理が正常に行われ、解消する。
(3)コンテンツの場合はなぜか650行を越えても発生しない。
(4)MicroSoftサポートにある「スムーズ スクロールを使用しない」に設定
を行っても、解消されない。
ページ分割も考えたのですが、全件表示を一機能としてもたせたいと考えて
います。

回答No.1

YUTAKUN007 · ベストアンサー

ループしていたのではなく描画能力が追いついていなかったからではないでしょうか。
この問題はクライアントの環境に依存するのではないかと思います。
もしhelpme_orzさんのＰＣが高性能のＣＰＵを積んでいてこの結果になってのであれば
描画能力が追いつかない端末が多いことになりますし
描画性能が良くない端末をお使いならば使っている端末で十分に描画が可能な
ページに設計をし直す必要があります。
もしかすると300件近くの表示で負荷がかかり止まってしまうかもしれません。
ウェブプログラミングをする立場の人間としてはすべてのクライントで表示できる
「優しいページ」を設計するのが理想であると考えます。

おそらくHTMLタグなどが含まれないテキストだけでの描画はあまり問題ない
と思いますが当然スタイルシートを用いたりして６００行ともなれば背景の描写など、
グラフィック描画の際の負荷も変わってくると思います。
ブラウザはただデータを表示するだけでなくタグを読み取って
適切な特殊描画効果を与える処理も行うのですから。

ちょっと興味がありさきほど手元の端末で実験をしてみました。
3500件近くのデータをphpmyadminでデータベースから引き出して
全件表示を行ってみたところ完全描画までに1分半ほどかかりました。
(クライアント側はPentium M 1G MEM 768MBの環境)
サーバーから吐き出される表示の為のHTMLデータなどは
10秒近くで吐き出されましたので(Vigilでパケットをキャップチャして確認)
明らかにクライアント側での描画に時間がかかっている証拠です。
この結果から、クライアント側の端末性能によっては
大きく変わってくるということがわかるとおもいます。

参考までに、
私が運営するサイトで検索結果を表示する場合はサーバー・クライアントの負荷軽減の為に普段は５０件毎にページング処理を行います。
検索結果が１００件内なら一括表示が可能ですが
それ以上の場合は強制的にページングを行っております。
また、エクセルなどで一度に取得する必要がある場合はcsv方式での書き出しも行っています。

お礼

ご回答頂きありがとうございます。
字数制限の為、提供情報が少なくなってしまい申し訳ありません。
YUTAKUN007さんの仰る通り、処理が停止してしまっている感じです。
リストはテーブル構造を用いた複数のカラムからなっており、
SPANタグとCSSで行っているので、それも処理が重くなる理由の１つなの
かもしれません。また、私の方もCeleron-1.2G-256M、Pentium4-3.2G
-1024Mにて確認を行い、両方で同様の現象が出ることを確認しております。
「優しいページ」に関しても仰る通りで、WEBプログラマとしては、私もそう
あるべきと考えます。ただ、今回のサイトに関しましては、公開する対象が
決まっており、ページを切り替える動作を行わず、ホイールの回転だけで、
一覧を眺めたいという要望があった為、入れることとしました。
そこで、この現象をなんとかプログラムで解消できないかと考えています。
気になるのは、フォーカスを当てると、上記2機のPCどちらも一秒以内に
処理を完了してしまうということです。
現象がスペックに依存しないところを見ると、IE側の問題なのでしょうか。
これについては、補足質問という形で出させて頂こうと思います。
朝早くにも関わらず、確認作業まで行って頂き、本当にありがとうございま
した。

補足

IEで長いWEBページを表示した場合に、表示処理に異常が発生、スクロール
動作がおかしくなり、CPU負荷が100%近くまで上昇、対象のフレームに
フォーカスを当てるまで、CPU負荷状況が解消されないことがあります。
フォーカスを当てるとすぐに処理が完了します。
もし、この現象について、御解りになる方がいらっしゃいましたら、
ご教授ください。同現象について、MicroSoftに上がっている回避策「スム
ーズスクロールを使用しない」を使用しても、解消することはできませんで
した。下記2項目について、調べております。

(1)CPU負荷上昇の発生原因の特定。
(2)CPU負荷上昇の回避策。

以上です、よろしくお願い致します。

私は、本日より2日程、外出することになりますので、返信の方は、戻り次第
とさせて頂きます。戻り次第、私の方でも、再度調べるつもりです。

回答No.2

yambejp

CSSによる負荷の可能性もあります。
いちどCSSを切ってなるべく生のデータの
ものでテストすると、原因がはっきりするかも
しれません。

また何百行も全件表示させてもどちらにしろ
視認性が高いわけではないので得策でないかも
しれないですね。
こんな感じでビュー領域を小さくすると
効果ありませんか？

<div style="background-Color:#e0e0e0;width:100%; height:200PX; overflow-Y:SCROLL;">
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
</div>

お礼

ご返答が遅くなり大変申し訳ございません。
こちらでもいろいろ思考錯誤しながら、解決策を探してみて、
解決致しました。
やはり、おっしゃるとおり、CSSの負荷が原因と思われます。
DIVやSPANタグを組み合わせ、テーブル表記を行っているのですが、
より簡潔な表現に修正することで解決しました。
自分の至らなさを痛感した次第です。
アドバイス頂きましてどうもありがとうございました。