DOMに getBoundingClientRect() を呼ぶのをやめたら、テキストレイアウトが500倍速くなった話【Pretext】
> Source: Qiita_Trend
Execute Primary Source
// Problem
フロントエンドにおいて、テキストの幅や高さを取得するためにDOMの計測メソッドを呼び出すと、ブラウザは強制的に同期リフローを実行する。これが読み書きの交互発生（Read/Write Interleaving）を招き、大規模なUIや高頻度な更新が必要な環境では、60fps/120fpsの維持を困難にするボトルネックとなる。
// Approach
DOMへの依存を完全に排除し、テキストの解析（prepare）とレイアウト計算（layout）を分離したアーキテクチャを採用。解析コストを一度に抑えるコールドパス/ホットパス分離により、任意の幅に対する計算を高速化する。また、AIを用いてブラウザの計測値と極めて高い精度で一致するアルゴリズムを構築している。
// Result
10万件以上のアイテムを含む仮想スクロールを120fpsで実現。CanvasやWebGL、サーバーサイドといったDOMが存在しない環境でも動作可能。複雑な多言語スクリプトやEmojiの補正にも対応しており、AIが動的にUIを生成する次世代のフロントエンド基盤としての活用が期待される。
Senior Engineer Insight
> 本質的な問題は「DOMへの課税」である。従来のフロントエンド開発はCSSやDOMの制約内で最適化を試みてきたが、Pretextは計算モデルをDOMから切り離すことで、レイテンシの限界を突破している。特に、AIエージェントがオンザフライでUIを生成するような、決定論的なレイアウトが求められる次世代の動的インターフェースにおいて、この「DOM非依存」の設計思想は極めて強力な武器となる。ただし、単純なUIへの導入はオーバーエンジニアリングに陥るため、計算コストがボトルネックとなる特定の高負荷領域に限定して適用すべきである。