WebブラウザのレンダリングとAngularのchange detectionについて

WebブラウザのレンダリングとAngular の change detection

WebフレームワークとHTML 描画の仕組みの関係を研究する。

react.js と仮想DOM

仮想DOM

• 仮想DOMは本当に“速い”のか？ DOM操作の新しい考え方を、フレームワークを実装して理解しよう

• ブラウザの仕組み: 最新ウェブブラウザの内部構造

• リアルな DOM はなぜ遅いのか

  • 仮想DOMは単なるjavascript のオブジェクト。
    realDOMとの間の相互作用を起こさないので、更新が速い。
    そこから前後の状態を比較して realDOM に反映させている。
  • 用語
    • (ツリーの)トラバース： 走査のこと。
    • Mutation Observer API: javascript が、リアルDOMツリーの変化を知るためのAPI。

• React.jsのVirtualDOMについて

  • react.js
    • DOMの更新検出を高速にする仕組みが、いろいろありそう。
      更新検出のメカニズムを知っておくとよい。

Angular

• Angular は仮想DOMを使ってない。
• Zone
  • Angularチームが開発している非同期処理のユーティリティライブラリです。
  • AngularとZone.jsとテストの話
  • Understanding Zones

change detection

• Angular Change Detection Explained

• 日本語訳：Angular 2 Change Detection Explained

• Angular 2 Change Detection Explained のスライド

  • Angular の Change Detection は、非同期イベントのたびに行われる。
    • 非同期イベント = イベント・XHR・タイマー
  • ChangeDetectionStrategyをいじる。

• Everything you need to know about change detection in Angular

• Angularでイベントから無駄にChange Detectionを走らせないためにすべきこと
  
  NgZone#onMicrotaskEmpty で Change Detection が無駄にやられてるか確認できる。
  
  NgZone#runOutsideAngular をつける。

DOM更新

• The mechanics of DOM updates in Angular

フレームワーク一般

change detection 概論

• Change And Its Detection In JavaScript Frameworks

ツール

• Tracing
  • Cromium のプロファイリングツール