琴線探査

昨日書いた記事 「 琴線探査: Dr. GlebのAngularアプリ最適化TIPSまとめ 」 に、try-catchがあるとV8では最適化されないため処理が遅くなると書いた。 今日は自分で書いたアプリをプロファイルしてみた。このように、$apply()や$digest()に相当な時間がかかっていることが分かった。 これは予想通りだったが、驚いたのは$apply()や$digest()でtry-catchを使っているらしいことだ。 「Not optimized: TryCatch Statement」とツールチップが出ている。ひょっとすると、これが$apply()や$digest()が低速な理由のひとつなのかもしれない。 だとすると、かなり根本的なレベルで高速化できていないことになる…内部的にtry-catchを使わないようにできないのかなぁ(´・ω・`)

Dr. Glebのブログ記事 Improving Angular web app performance example. | Better world by better software を簡単にまとめておこうと思う。 try-catchはできるだけ使わない V8ではtry-catchを使った処理は最適化されないので、特にループ処理ではできるだけ使わないようにする。Primesの例ではtry-catchを無くしただけで全体の処理は2倍以上、メソッド単体では200倍近く高速化している。 追記15.08.26 ：$apply()や$digest()でtry-catchが使われていることが判明(ﾉ∀`) 琴線探査: これがAngularJSの$apply()や$digest()が低速な理由のひとつか？ ダイジェストサイクルをできるだけ速くする $scope.$apply()した時のあれ。ダイジェストサイクルはフレームレートと同じで、長くなるほどUIが固まってしまうことになる。短くする方法は色々ある。 バインドさせる変数をできるだけ少なくする ng-modelとか$scope.valueとか。バインドさせる変数の数だけダイジェストサイクルは遅くなる。 filterはできるだけ使わない filterはダイジェストサイクルを遅くさせる。「{{ "index" | lowercase }}」的な無駄なフィルターはもってのほか。 one-time-bindingを使う サーバーから持ってくるデータは大抵の場合は大量だ。これをページにレンダリングするために2wayバインディングを使ってしまうとダイジェストサイクルが大幅に遅くなる。 そこでAngular1.3から導入されたone-time-bindingを使う。これを使えば、始めだけはバインディングするのでダイジェストサイクルに影響するが、その後は影響が無くなる。 例えば「{{name}}」としている所を「{{::name}}」とするだけでone-time-bindingになる。 AngularJS: Developer Guide: Expressions React的なレンダリング方法に変更する 特にtableの中身などの反復...

あるWEBアプリを AngularMaterial を使って実装しているが、最近 Polymer が1.0になったので、実験的にUI部分をPolymerで実装し直して比較してみることにした。 ここに分かったことをまとめておこうと思う。 UIコンポーネントの数 AngularMaterialの方がベーシックに使えるものが多い。最近では FAB Speed Dial などのコンポーネントが増え、益々充実してきている。 Polymerにもgoogle-mapなどのコンポーネント が増えてはいる。 UIの動作速度 Polymerの方が速い。Polymerはアニメーションに WebAnimation を使用しているが、AngularMaterialはngAnimateに依存しているからだと思われ。 レイアウトのしやすさ Polymerの方が分かりやすい。 Polymerではvertical, horizontal とするところを、 AngularMaterialではrow、column となっている。 レイアウト処理の軽さ Polymerの方が軽いのではないかと思われる。Polymerではレイアウト関連の指定は「class="layout horizontal"」のように全てCSSのclassだが、AngularMaterialでは「layout="row"」のようにタグのアトリビュートで行われるので内部でカスタムタグの処理をしているだろうから。 ライブラリとしての扱いやすさ AngularMaterialの方が扱いやすい。ngAnimate、ngAria、ngMaterialの各モジュールとCSSをひとつ読み込むだけでたくさんのUIコンポーネントを使うことができる。逆に言えばムダが多い。bowerのコンポーネントの数で言えば３つだ。 一方、PolymerはHTML importの仕組みによって必要なコンポーネントを必要なだけ組み込めるようになっているのでムダが少ないが、小さいファイルをたくさん読み込む必要がある。例えばFAB一つ使うだけでもbowerのコンポーネントは３つでは済まない。 起動速度 AngularMaterialの方が速い。参考までに、今回のアプリでは1...

CSSのtranslate3dは例えば translate3d(5, -10, 0) のような文字列になっているが、このままでは計算するのに使いにくい。 そこで、これをパースして数字の配列にするにはどうすればいいだろう。例えば、このような正規表現を使うというのはどうでしょう？ /** * CSSのtranslate3d文字列を数字の配列に変換して返す */ function parseTranslate3d(string) { var array = string.replace('translate3d', '').match(/-?[\d\.]+/g); for (var i = 0; i