Patterns for Memory Efficient DOM Manipulation with Modern Vanilla JavaScript – Frontend Masters Blog
Patterns for Memory Efficient DOM Manipulation with Modern Vanilla JavaScript 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 Overview When 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 tools “Elemen
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, top
GitHub - patrick-steele-idem/morphdom: Fast and lightweight DOM diffing/patching (no virtual DOM needed)
Lightweight module for morphing an existing DOM node tree to match a target DOM node tree. It's fast and works with the real DOM—no virtual DOM needed! This module was created to solve the problem of updating the DOM in response to a UI component or page being rerendered. One way to update the DOM is to simply toss away the existing DOM tree and replace it with a new DOM tree (e.g., myContainer.in
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
MSEdgeExplainers/EventPhases/explainer.md at main · MicrosoftEdge/MSEdgeExplainers
GitHub - WebReflection/linkedom: A triple-linked lists based DOM implementation.
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 - jsdom/jsdom: A JavaScript implementation of the WHATWG DOM and HTML standards, for use with node.js