パフォーマンスの最適化

基本トピック

上級トピック

その他

パフォーマンスの最適化

ページがその機能を実装するために複雑すぎる状況になっているという状況は稀ですが、その場合にMithrilのパフォーマンスを改善する方法はいくつｋもあります。

まず第一に、パフォーマンスの最適化が自分にとって最後の手段であるかどうかを真剣に考えてください。パフォーマンスの最適化でやりがちなこととしては、特殊なケースですぐに成り立たなくなるような思い込みを行い、コードの理解が極めて難しいコードを書いてしまうということがあります。一般的な方針として、他のソリューションがある場合には、絶対にパフォーマンスの最適化を行わないほうが良いでしょう。

もし、数千行の行を持つテーブルの構築を行っていて、そのテンプレートの動作が遅いことが分かったとしても、まずはユーザビリティの観点から表示行数を少なくすることを検討すべきです。だれも数千行のレコードを実際に読み込もうとする人などいないからです。テーブルをページ分割したり、ソートやフィルタ可能にすると、ユーザエクスペリエンスが向上するだけでなく、再描画と初期のページロードの両方のパフォマンスの問題が解決します。

テンプレートのコンパイル

オプションの機能としては、mithril-objectifyを使用すると、m()を使ったテンプレートを事前にコンパイルすることができます。このステップはMithrilを使う上で必須のものではありませんが、コードを一切変更せずにアプリケーション外で簡単にパフォーマンスを少し向上させることができます。

テンプレートをコンパイルすると、ネストされた関数呼び出しを生の仮想DOMツリーに変換します。これはネイティブのJavaScriptオブジェクトの集合体で、m.renderを使って即座にレンダリングできます。コンパイルされたテンプレートを使用する時は、m("div#foo")といった文字列をパースする必要がなく、関数呼び出しのコストは発生しません。

Mithrilでは、ブラウザの再描画の管理やDOMの更新などの、本物のボトルネック以外をあまり気にする必要はありません。Mithirilはトップページのパフォーマンスのセクションで既にお見せしているように、コンパイルなどしなくてもすでに高速です。このオプションのコンパイルツールは、いわば「ケーキの上のデコレーション」です。

このツールは下記のような通常のMithrilのテンプレートを受け取ります:

var view = function() {
    return m("a", {href: "http://google.com"}, "test");
}

このマクロはm()関数の呼び出しを事前に処理してし次のような関数を生成します:

var view = function() {
    return {tag: "a", attrs: {href: "http://google.com"}, children: "test"};
}

このコンパイル済みのテンプレートは自動ビルドプロセスの結果作られたものであって、人間がこのように書くべきという意味ではありません。

インストール

Mithril-objectifyを実行するにはNodeJS環境が必要になります。NodeJSをインストールするには、NodeJSのウェブサイトに行き、提供されているインストーラを使用します。

mithril-objectifyをインストールするのに使うコマンドラインのパッケージマネージャは、NodeJSが提供しています。コマンドラインで次のようにタイプします:

npm install -g mithril-objectify

インストールが終わって、ファイルをコンパイルするには次のようにタイプします:

mithril-objectify ./input-filename.js ./output-filename.js