日々精進

新しく学んだことを書き留めていきます

Webアプリ、特にExtJSのパフォーマンスチューニング

以下のスレッド
ExtJS: Performance Best Practices
とか

ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール

ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール

とかをまとめました。


高速化の指標となるのはTime To Interact(TTI)。これはユーザがリンクをクリックするなどのアクションを起こしてから次にユーザが作業可能になるまでの時間。
例えば、はてなダイアリーの右上の「記事一覧」をクリックしてから記事一覧ページの上部が表示されるまでの時間とか。ページ全体や画像が読み込まれて無くても作業は開始できる場合が多い。


高速化の方針は主に以下。


○画面の再描画を減らす
・Extを使ってない場合はDocumentFragmentを使ったりする。
・DOMの操作やCSSクラスの操作はbeforeRenderイベントの中でやる。onRenderやafterRenderだと再描画が走って遅くなる。
・Ext.getBody()の代わりにExt.getDetachedBody()をrenderToに設定する。そうすると再描画を避けられる。
・StoreのRecordの値を1カラムずつ変更すると、そのたびに再描画される。beginEdit、endEditを使って全部の変更が終わってから再描画させること。もしくはsetメソッドにオブジェクトを渡して複数のカラムを一気に変更する。
・container.addは実行される度に再描画されるので、要素を配列にするなどして一気に追加すること。
・Ext.suspendLayoutとExt.resumeLayouts(true)を使うと無駄な再描画を抑止できる


○HTTPリクエストを減らす
・Ext.Loaderで非同期読み込みは行わない。JS,CSSファイルはミニファイしてそれぞれ一つのファイルにまとめること。Extのライブラリのうち使っているコードだけをJSファイルに含めること(これはJsBuilderでビルドすればできるはず)。画像はCSSスプライトを使うこと。
・10万レコード以下ぐらいならStoreに全部保存しておき、bufferedRenderingを使う。StoreのbufferedをTrueにすると使える。
・意外とメモリに沢山のレコードを持たせても大丈夫。どんどんメモリにデータをキャッシュしよう


○重い処理を避ける
・DOMは遅い。操作する時は気を付ける
JSONデータをModelオブジェクトに変換するのに時間がかかる。できるだけサーバから貰うデータを減らすこと。出来ればGridの行数・列数を減らす。
・Panelを使いすぎないこと。レイアウトをXTemplateなどで直接タグを生成して作った方がパフォーマンスは良くなる。もしくはdataviewやcontainerを使う。
・Ext.Componentを拡張して独自のコンポーネントを作成する。そのコンポーネントのautoElやtplを使ってタグを定義しておけば複雑なレイアウトをパフォーマンス良く作れる
・onよりmonでイベントハンドラを定義した方がパフォーマンスはいい
・xtypeを使うと遅延インスタンス化が行われるのでパフォーマンスがいいと言われるがそれは間違い。コンポーネントは表示する前から作られる。


○無駄を減らす
・表示されない部分は遅延レンダリングすること。最初表示されていないタブの中身とか
コンストラクタの中でイベントに渡すコールバック関数を定義しない。これをやると、インスタンスが作られる度にコールバック関数もコピーされることになる。関数はコンストラクタの外で定義すること。
・アニメーションを減らす。
・ブラウザの速度によって機能を増減させる。アニメーション、Gridの行数など
・deferredRenderオプションをTrueにすることで遅延レンダリングをさせられる