ブラウザの地獄を這い抜けて辿り着いた解決策

元React CoreおよびMidjourney エンジニアのCheng Louが、ブラウザのレイアウトリフローを一切発生させずにテキストを計測する純粋TypeScriptライブラリ「Pretext」をリリースした。

• PretextはブラウザのレイアウトリフローをDOMに触れずに完全に回避し、テキスト重視のUI描画で最も高コストな処理をなくす。
• Canvas APIを使ってDOM外でピクセル精度の文字列幅計測を行い、リフローコストをゼロに抑える。
• 行高アルゴリズムは反復的に訓練された——LLMが改行ロジックを生成し、複数言語で実際のブラウザに対してテストし、数週間かけて改善を繰り返した。
• Cheng Louは以前、Reactエコシステムで広く使われたアニメーションライブラリ「React Motion」を開発している。
• 1万件以上のアイテムを持つ仮想リストが、「描画してから計測する」ハックや高さの推測なしに実現可能になった。
• Pretext APIは2つの呼び出しで構成される：prepare（セグメント分割と幅のキャッシュ）とlayout（合計高さと行数を返す）。
• デモアプリでは、文字ごとの輝度をマッピングして動画フレームをASCIIアートとして描画している——DOMに触れずに各文字の正確な位置を把握できるPretextがあって初めて実現できる機能だ。

2026-04-02 · YouTubeで視聴する

英語版: He just crawled through hell to fix the browser… · Watch on YouTube