※ ChatGPTを利用し、要約された質問です(原文:数千行HTML 画面表示の性能改善)
数千行HTML 画面表示の性能改善方法と計測
このQ&Aのポイント
Webシステムの画面表示が遅い問題について、HTMLの最適化手法や計測方法を知りたい
HTMLタグの最適化やHDDENの使用による性能改善についての情報が欲しい
リクエストから画面描画までの時間計測方法について教えて欲しい
Webシステムを作成しております。1画面の情報量が肥大化してきており、8000行ぐらいの物になっております。(JS含む)
リクエストから画面表示が終わるまでに、4~5秒ほどかかってしまうのです。
JSのonload処理で、0.5msぐらいの処理がかかっていることは確認できております。
どうやら、それ以外の箇所で時間がかかっているようです。
HTMLのヘッダ部にnew Date()を利用して、JS処理の開始時間を採取
<script ****>var st = new Date(); ****</script>・・・(a)
(onload時ではなく、global領域に記載)して計測したところ、
(a)からonload処理が開始されるまでに1秒強かかっております。
試験的に、画面に表示されるTAGを削除すると、1秒強から700msになります。
さらに、hiddenを削除すると150ms程度まで高速になります。(ほとんどタグ無しなので当然なのですが、、、)
このことから、HTMLのbodyの多さが大きな原因となっていると考えています。
いくつかの不明点があります。
1.HTMLタグの最適化(?)を行う手法
今まで、HTMLの最適化を意識したことが無く、このあたり無知な状況です。レイアウトにTABLを多用しているのが悪い?また、HDDENなどは、あまり性能的に良くない?など、なにか、性能改善がまとめられているWebサイトや書籍はありませんでしょうか?
2.遅くなる原因を細分化するために、リクエストから、サーバ処理(Apache)、通信(読込)時間、JS開始時間、画面描画時間、を採取したいところですが、各時間の計測方法はありますでしょうか?
特に、クライアントの読込終わって画面描画にかかる時間を調査したいです。
対象プラットフォームは、
Apache,IE6を利用しています。
お礼
ご指摘の通り,TABLEをかなり多用しています。 実験的に、CSSを利用した物に変えてみたいと思います。 アドバイスありがとうございました。