なぜ Vue3.0 はそんなに速いのでしょうか?

私も他の人の記事を読んで書きました。
上手に書いた人もいました。なぜ自分で書いているのでしょうか。自分で書いて初めて、より鮮明に思い出すことができます。

diff アルゴリズムの変更

在这先解释一下什么是Diff算法;		
	diff算法是通过循环递归对节点进行比较,比较出节点状态和需要的操作,最后使用vnode进行DOM渲染,
	在次过程中会有俩个DOM树,一个第一次渲染的,一个更新后的渲染的。

1. vue2.0 で diff アルゴリズムを使用すると、すべてのノードがレンダリングされます。ハードコーディングされた div か変更の必要があるかに関係なく、再レンダリングされます 2.
vue3.0 のレンダリング時に、Dom をレンダリングするときに変更の必要があるかどうかに応じて静的マークが追加されます。
ここに画像の説明を挿入

絵はかなり汚いですが、見てください

ホイスト静的静的ホイスト

  1. vue2.0 では、Dom を更新すると、完全に更新されて再作成されます。パフォーマンスを消費する
  2. vue3.0 では、更新されない要素は 1 回だけ作成され、その後の各レンダリングで再利用されます (上の図のハードコードされた div など)。

キャッシュハンドラーイベントリスナーキャッシュ

1. 以前の Onclick は動的バインディングとみなされ、動的バインディングの変更は毎回追跡されますが、同じ機能なので、直接再利用するだけです。

SSRレンダリング

  1. 静的なコンテンツが多い場合はバッファ内に文字列のみが存在しますが、動的に変化するコンテンツであっても、仮想 DOM よりも高速なテンプレート補間方式を使用することもできます。
  2. 静的コンテンツが特定のレベルに達すると、_createStaticVNode メソッドを使用してクライアント上で静的ノードが生成されます。これらの静的ノードは直接 innerHtml になるため、オブジェクトを作成する必要がなく、オブジェクトに従ってレンダリングするため、仮想 dom のプロセスを経る必要がありません。

参考アドレス https://blog.csdn.net/shadowfall/article/details/112385269

おすすめ

転載: blog.csdn.net/weixin_44655037/article/details/120331119