JavaScript。行用の超高速マルチスレッド データ グリッドを作成する方法。パート : DOM の操作の微妙な違い

デモ | GitHub

図 1. 1,000,000 行のデータ グリッド

高速データグリッド機能:

• 信じられないほど速い
• マルチスレッド
• わずか 523 行のコード
• 依存関係なし
• バニラ JavaScript

1,000,000 行をスクロールして検索してみてください - Fast Data Grid。

この記事では、DOM を使用する際の微妙な違いをリストします。マルチスレッドについては次の記事で説明します。

DOM は小さいほど良いです。 DIV の内容の変更は、DIV を削除して新しい DIV を作成するよりも高速です。

ブラウザは、大きな DOM ツリーのレンダリングが遅くなります。ブラウザーは高さ 20 ピクセルの 1,000,000 行をまったくレンダリングしません。Chrome の DIV の最大高さは 15,000,000 ピクセルです。 HTML 要素は少ないほど良いです。

高速データ グリッドは、画面に収まる限りの行を DOM に追加します。

const rowsCount = Math.ceil(viewPortHeight / rowHeight);

リスト 1. 画面に収まる行数を数える

新しいデータを出力する必要がある場合、行 DIV が再利用されます。新しいデータは同じ DIV に書き込まれます。 DIV の内容の変更は、DIV を削除して新しい DIV を作成するよりも高速です。

スクロールするとき、DIV 行の位置は JavaScript を使用して計算されます。

DIV の最大高さは 15,000,000 ピクセルです

スクロールを機能させるために、Fast Data Grid は大きな DIV を作成します。スクロールイベントはこの DIV に付加されます。スクロール イベント ハンドラーは行 DIV の位置を計算します。

図 2. スクロール用の大きな DIV

行の合計の高さが 15,000,000 ピクセルを超える場合、行 DIV は大きな DIV よりも速くスクロールする必要があります。大きな DIV が最後までスクロールすると ->行 DIV も最後までスクロールする必要があります。

DIV 行をスクロールするときは、係数を適用する必要があります。

const scrollYKoef =
    // if {allRowsHeight} > 15 million -> we have to applay koef on scroll
    // if {allRowsHeight}  {scrollYKoef} = 1
    (allRowsHeight - viewPortHeight) / (scrolHeight - viewPortHeight);


listen(scrollOverlayDiv, 'scroll', /** @param {Event & {target:HTMLDivElement}} evt */ evt => {
    const scrollTop = evt.target.scrollTop * scrollYKoef;
    rowsDiv.style.transform = `translateY(${scrollTop}px)`;
});

リスト 2. スクロール時の係数の使用

CSS トランスフォーム トランスレートは CSS トップよりも高速です

スクロールするとき、位置は変換変換によって設定されます。 CSS トランスフォーム トランスレートは CSS トップよりも高速です。

<!-- transform faster-->
<div>

<p><br>
<em>Listing 3. CSS transform translate is faster than CSS top</em></p>
<h2>
  
  
  Read DOM first, then modify DOM. It's bad to read DOM after modification
</h2>

<p>The browser displays frames on the monitor like this:<br>
First, JavaScript is processed, then styles are calculated, then layout, then rendering.</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173464994174788.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="JavaScript. How to Make a Blazingly Fast Multithreaded Data Grid for  Rows. Part : The Nuances of Working with DOM"><em>Figure 3. Standard order of operations when outputting a frame to the monitor</em></p>

<p>If the standard order is not violated, the browser will render the frame as quickly as possible.</p>

<p>At the beginning of the cycle, the DOM parameters are already calculated and correspond to the parameters of the previous frame. For example, box.offsetHeight is already calculated at the beginning of the cycle. But if you change the DOM and then read the DOM -> the browser will have to break the standard order. It will be necessary to calculate the layout again.<br>
</p>

<pre class="brush:php;toolbar:false">box.classList.add('super-big');

// Gets the height of the box in pixels and logs it out:
console.log(box.offsetHeight);

リスト 4. DOM を読み取る前に DOM を変更する。悪い。レイアウトのスラッシングにつながります。

レイアウトの過剰な再計算を「レイアウトスラッシング」と呼びます。

読み取り前に DOM を変更するとブラウザの速度がどのように低下​​するかを示す視覚的なデモンストレーション:
https://wilsonpage.github.io/fastdom/examples/animation.html

このトピックに関する素晴らしい記事:
大規模で複雑なレイアウトとレイアウトのスラッシングを回避する | 記事 | web.dev.

自己PR

最も便利なフローチャートエディタ DGRM.net を作ります。
ビジネスにとって最も便利なサービスである Excel 業務プロセス図

GitHub でスターを付けます。