网页浏览器的渲染和Angular的变化检测

研究Web框架和HTML绘图的机制之间的关系。

React.js 是一个 JavaScript 库，它使用虚拟 DOM。

虚拟DOM

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

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

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

仮想DOMは単なるjavascript のオブジェクト。
realDOMとの間の相互作用を起こさないので、更新が速い。
そこから前後の状態を比較して realDOM に反映させている。
用語

(ツリーの)トラバース： 走査のこと。
Mutation Observer API: javascript が、リアルDOMツリーの変化を知るためのAPI。

React.jsのVirtualDOMについて

react.js

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

角度

• Angular は仮想DOMを使ってない。

• Zone

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

变化检测 huà cè)

• 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 And Its Detection In JavaScript Frameworks

工具

Tracing

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