ソフトウェア開発者の日常

こだわりなく書きたいことを書いていきます。

Webサイトのページの表示および動作の高速化手法まとめ

スポンサーリンク

今回いろいろな方法を取り入れたので、まとめておく。

効果がわかったもの

  1. ページャーを導入する
    修正前は、ページャーなしで全件を一度に表示していたが、修正後は、1ページ最大100件までのページャーを入れた。
  2. class指定を止めて、id指定をする
    修正前は、class指定で処理していたが、修正後は、id指定で処理するようにした。
    処理対象が複数あるのでclass指定していたが、id指定では重複しないように連番を割り振って、ループで処理するようにした。
  3.  テーブルの列幅を指定する
    修正前は、列幅を自動計算に任せていたが、修正後は、列幅を指定した。 
  4. テーブルの行を入れ替えない
    ボタンを押したら、行の上下を 入れ替える機能があり、修正前は、行を入れ替えていたが、修正後は、行の内容を入れ替えるようにした。

効果があったかわからないもの

  1. jQueryを最新版にする
    修正前はバージョン1.4.2だったが、修正後はバージョン1.71にした。
  2. ボタンへのバインドを止める
    修正前はclass指定で、ボタンにjQueryのclickイベントをバインドしていたが、class指定でのバインドは遅いのではないかと予想し、修正後はonClickでJavaScriptを呼び出すようにした。

 

id指定ではなく、class指定にすると遅くなるというのは知識として知っていたが、1000箇所以上あると極端に遅かった。特にInternet Explorer6/7/8では。

この状態でもGoogle Chromeならそこそこの速度が出ていたので、Google Chrome限定が出来れば色々な方法を取り入れなくてもいいのかも。