dirty check について調べてみた

はじめに

自分は普段 Backbone.js や Angular.js を書く機会はあまりありません。

Backbone.js、Angular.js についてはかじった程度、Ember.js についてはほとんど知りません。

なので理解不足な部分があると思います。よろしければツッコミをお願いします。

この記事の対象となる Angular.js のバージョンは最新の安定版 v1.2.16 です。

この記事の大部分は Angular.js について書かれていますが、基本的に Node.js や JavaScript Engine v8 についての興味から書かれたものです。

tl; dr

ざっくり言うと

dirty check とは object の状態を記録して、特定のキッカケを元に変更をチェックする仕組みである
パフォーマンスの懸念もあるが、人間の体感速度などを加味し、Angular.js では dirty check を選んだ
しかしながら現実的にパフォーマンス問題は存在する
Object.observe を利用することで問題を解決したい

ということのようです。

なぜ dirty check が気になったのか

Node.js v0.12 では Promise や Object.observe、WeakMap が使えるようになるらしいです

「こいつはすげー」と思いましたが、「けど Object.observe ってなにが嬉しいの？」と疑問に思い、ちょっと調べてみました。

まずは大津さんの過去のブログからチェックしてみました。

次世代JavaScriptでデータバインディング： Object.observe() を試す - ぼちぼち日記

ここで dirty check という単語にぶつかります。

Accessors vs Dirty-checking

調べてみると以下の記事が見つかりました。

Brendan Graetz • Accessors vs Dirty-checking in Javascript Frameworks

どうやら Angular.js、Ember.js が dirty check を行っているようです。

ご存知の方も多いと思いますが Backbone.js は専用にラップされたオブジェクトのイベントに Listener を登録することで変更を伝搬させています。

対して Angular.js は dirty check と言われる手法で変更を伝搬しており、Ember.js はこの両方を使えるようです。

Angular.js のドキュメントの Scope Life Cycle を見ると

スコープの作成
Watcher の登録
モデルの変更
変化の観察
スコープの破棄

となっていて model の変更時に scope.$apply が呼ばれ(基本的に暗黙的に呼び出される、外部のイベントをハンドリングするには明示的な呼び出しが必要)、scope.$apply の終わりに $digest cycle が実行され、モデルの変化をチェックし、Listener を呼び出します。

https://code.angularjs.org/1.2.16/docs/api/ng/type/$rootScope.Scope#$apply

https://github.com/angular/angular.js/blob/v1.2.16/src/ng/rootScope.js#L581