【プログラマーなら知っていたい】ng-bindと{{}}、パフォーマンスの違いとその理由

Angularを学習する際、補完は避けては通れない重要な要素です。定番のHello Worldも、基本的な補完を使ってHello, {{ $ctrl.name }}のように作ります。

しかし、ある程度学習が進むと今度はng-bindというものに遭遇します。使い方を見れば、これも補完であると分かるでしょう。Hello Worldをng-bindを使って作ると、こうなります。

なぜ{{}}とng-bindの2つが存在しているのでしょうか？

片方だけで済むのではないでしょうか？これからその理由をご紹介します。

元々の理由

Angularがテンプレートのコンパイルに取りかかる前に、一瞬ソースの状態が見えることがあります。

{{}}を使っていると時々起こるのですが、これはAngularがDOMを横断してこれらの補完を見つけ、その後で補完するための正し値を計算しているためです。事情を知らない一般ユーザーには、何かエラーが起こったように見えてしまい、よろしくありません。

一方ng-bindではこの現象は発生しません。またng-cloakなどの手法を使っても問題を回避することは可能ですが、これはこれで苦労させられることになるでしょう。

真の理由はパフォーマンスにあり

Hello Worldではパフォーマンスの違いはわからないかもしれません。しかし、しっかりと違いが存在しています。

ポイントは、補完される値の追跡にあります。Angularはdigestサイクルのたびに式の再評価を継続して行います。そして表示される文字列に全く変更がなくとも、再びレンダリングを行うのです。

これはng-bindとは逆です。ng-bindでは、Angularは値が変更された場合にのみレンダリングを行います。そのため、アプリのパフォーマンスに大きな差が出ることがあるのです。

計測したベンチマークでは、ng-bindを使うことで2倍の速さになります。補完とng-bind両方の例を用意しましたので、興味があればご覧ください。式が複雑になればなるほど、差は広がるでしょう。

※本稿は 「The Performance Difference Between ng-bind and {{}}」を翻訳・再編集したものです。