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限定が出来れば色々な方法を取り入れなくてもいいのかも。