プログラミング

プログラミング

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

    918 views

    読了時間 : 約1分28秒

    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 {{}}」を翻訳・再編集したものです。

    おすすめ新着記事

    おすすめタグ