[B! article][performance][DOM] efclのブックマーク

efcl id:efcl

articleとperformanceとDOMに関するefclのブックマーク (3)

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
efcl 2024/08/03
DOM APIでのDOMの変更を効率的に行う方法について。 `textContent`と`innerText`、`insertAdjacentHTML`と`innerHTML`、DOM Nodeの削除とGC、イベントリスナーのクリーンアップなどについて

DOM

performance

article
リンク
Don't attach tooltips to document.body
TL;DR Instead of attaching tooltips directly to document.body, attach them to a predefined div in document.body. BAD <body>  <div>my tooltip</div> <body> GOOD <body>  <div id="tooltips-container">  <div>my tooltip</div> </div> <bo
efcl 2021/08/16
`document.body`直下にツールチップ表示用の要素を追加すると、多くの要素のスタイル更新処理が行われパフォーマンスの問題となった話。どのようにレイアウト計算の影響を確認したか、ツールチップを表示用の要素をラッ

JavaScript

DOM

CSS

performance

article
リンク
[DOM] Rangeを作りすぎて激重になった話｜TechRacho by BPS株式会社
DOMの規格にはRangeというクラスがあります。ドキュメント上の選択範囲などを表すのに便利なクラスです。ついさっき、このクラスにまつわるパフォーマンス問題を解決したので記事に残そうと思います。 removeChild()が重い？とあるDOM操作を行う処理のパフォーマンスが悪い、というチケットが立てられたのが発端でした。最初にその部分を実装したのが私で、そこまでチューニングをしっかりしていた訳ではなかったのでまあそんなこともあるかな、と思いながらとりあえずパフォーマンス計測を行ってみたところ、appendChild()が実行時間の9割以上を占めているという結果でした。 appendChild()がなんでそんなに遅いんだろう？ appendChild()は親ノードの子のリスト末尾に1個ノードを追加するだけの処理です。普通に考えてこれだけではそこまで遅くなるとは思えない。 appendC
efcl 2020/11/18
DOM RangeはLiveなので開放しないと選択してるDOMのアップデートが重くなる問題

DOM

performance

article
リンク
1