knockout.jsでコンポーネントの同期非同期Loading のコントロール
knockout.jsでコンポーネントを作成する時にそのコンポーネントの呼び出しを同期的に行うのかそれとも非同期で行うのかということを指定できるオプションがある。
ko.components.register('my-component', {
viewModel: { ... anything ... },
template: { ... anything ... },
synchronous: true // ←こいつのこと
});
何も書かなければデフォルトは false になる。
ではなぜ通常コンポーネント読み込みは非同期になるのか。
常に非同期のポリシーは他の言語でも確立されていて慣習的に行われている。
開発者が典型的な非同期プロセスが時に同期的に完了したりまたその逆の場合について考慮しないことによって潜在的なバグの可能性を軽減する。
つまりそのように書くことで全体としてバグになる可能性を下げているという認識。
なぜ同期のローディングを有効にする場合があるのか
特定のコンポーネントのコピーの長いリストを注入しようとして(例えばforeachバインディングの内部で)、そしてコンポーネントの定義がそれまでの使用によって既にメモリ内に存在している場合、全ての新しいコピーは同期的に注入され、単一のDOMの再構築のみを引き起こすので特にモバイルでのパフォーマンスのために適している.
非同期でコンポーネントのロードが行われると要素それぞれに対してDOMの再構築が行われ、メモリーを圧迫したり不要な読み込みが行われたりするためパフォーマンスが下がる恐れがある。
そのような時は意図的に同期的な読み込みに設定する。