42
44

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

staticな要素は$watchから外してdigest loopを高速化

Last updated at Posted at 2014-06-29

ng-bind, ng-classなどにbindすると、scopeのwatchに登録され、digest loopが走る毎に変更があったか否かがチェックされる。
watchに紐づく要素が僅かであれば問題ないが、数百数千のオーダーになるとパフォーマンスが低下しラグが発生する。キー入力系のイベントのように、入力する度にdigest loopが走る場合、画面がフリーズした様な感覚になる。

bindonceはこの問題を解決するdirectiveで、最初のbind以降はwatch対象から外すことで無駄なチェックを省いてくれる

Pasvaz/bindonce
https://github.com/Pasvaz/bindonce

基本的には、ng-*をbo-*に置き換えるだけでOKで気軽に使える
絶対に変更しないであろう文言や画像パスなどはbo-*に置き換えていけばよい
ng-repeatの時はbindonceを指定する必要があるので注意

<ul>
    <li bindonce ng-repeat="person in Persons">
    ...

類似のプロジェクトとしてangular-once, watchFightersがある

angular-once
https://github.com/tadeuszwojcik/angular-once

watchFighters
https://github.com/abourget/abourget-angular

[参考]
AngularJSのパフォーマンス改善入門
http://qiita.com/zoetro/items/5156aef51222e81dd022

[追記]
Angular1.3から標準で一度だけのbindを実現できる
機能が付くようです。下のzoetroさんのコメントを参照下さい!

42
44
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
42
44

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?