Patterns for Memory Efficient DOM Manipulation with Modern Vanilla JavaScript – Frontend Masters Boost
Patterns for Memory Efficient DOM Manipulation with Modern Vanilla JavaScript July 29, 2024 I’ll discuss best practices to avoid excess memory usage when managing updating the DOM to make your apps blazingly fast™️. DOM: Document Object Model – A Brief OverviewWhen you render HTML, the live view of those rendered elements in the browser is called the DOM. This is what you’ll see in your developer
HTML attributes vs DOM properties
Attributes and properties are fundamentally different things. You can have an attribute and property of the same name set to different values. For example: <div foo="bar">…</div> <script> const div = document.querySelector('div[foo=bar]'); console.log(div.getAttribute('foo')); // 'bar' console.log(div.foo); // undefined div.foo = 'hello world'; console.log(div.getAttribute('foo')); // 'bar' consol
ResizeObserver による変更検知と Element Query | blog.jxck.io
Intro ResizeObserver の ship が進みつつある。 この仕様の解説および、 ElementQuery / ContainerQuery について解説する。 Resize Observer 1 ResizeObserver ResizeObserver は、最近増えつつある ObserverFamily の 1 つであり、要素のリサイズを検知するインタフェースである。 リサイズを検知したい要素をターゲットに observe() すると、ターゲットと矩形情報が取得できる。 const resizeObserver = new ResizeObserver((entries) => { entries.forEach(({target, contentRect}) => { console.log(target) const {x, y, width, height, to
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - LavaMoat/LavaDome: Secure DOM trees isolation and encapsulation leveraging ShadowDOM
HTML Standard
The Future of Native HTML Templating and Data Binding
GitHub - capricorn86/happy-dom: A JavaScript implementation of a web browser without its graphical user interface
Style scoping versus shadow DOM: which is fastest?
GitHub - WebReflection/lighterhtml: The hyperHTML strength & experience without its complexity 🎉
RE:DOM
GitHub - Shopify/draggable: The JavaScript Drag & Drop library your grandparents warned you about.
GitHub - mozilla/fathom: A framework for extracting meaning from web pages
GitHub - tsayen/dom-to-image: Generates an image from a DOM node using HTML5 canvas
GitHub - patrick-steele-idem/morphdom: Fast and lightweight DOM diffing/patching (no virtual DOM needed)
GitHub - jsdom/jsdom: A JavaScript implementation of the WHATWG DOM and HTML standards, for use with node.js