Patterns for Memory Efficient DOM Manipulation
通常フレームワークを使う場合において効率的なDOM操作を意識する必要はないが、必要な場面が出てくる
例としてはパフォーマンスを求められるVSCodeの例が挙げられている（VSCodeはVanilla JS）
code:signal.js
let controller = new AbortController();
const { signal } = controller;
button.addEventListener('click', () => console.log('clicked!'), { signal });
window.addEventListener('resize', () => console.log('resized!'), { signal });
document.addEventListener('keyup', () => console.log('pressed!'), { signal });
// Remove all listeners at once:
controller.abort();
端的には以下:
1. Prefer modifying existing elements over creating new ones when possible.
新しい要素作成より既存要素の変更がよい
2. Use efficient methods like textContent, insertAdjacentHTML, and appendChild.
効果的なメソッドを使う
3. Manage references carefully, leveraging WeakMap and WeakRef to avoid memory leaks.
GCされやすいように弱い参照を使う
tkdn.icon this.el = null とかよくやってた気がする
4. Clean up event listeners properly to prevent unnecessary overhead.
5. Consider techniques like event delegation for more efficient event handling.
6. Use tools like AbortController for easier management of multiple event listeners. 7. Employ DocumentFragments for batch insertions and understand concepts like the virtual DOM for broader optimization strategies.