演示 | GitHub

圖 1. 具有 1,000,000 行的數(shù)據(jù)網(wǎng)格

快速數(shù)據(jù)網(wǎng)格功能：

• 難以置信的快
• 多線程
• 只有 523 行代碼
• 無依賴性
• 普通 JavaScript

嘗試滾動并搜索 1,000,000 行 - 快速數(shù)據(jù)網(wǎng)格。

在本文中，我將列出使用 DOM 的細(xì)微差別。關(guān)于多線程下一篇文章。

DOM 越小越好。更改 DIV 的內(nèi)容比刪除 DIV 并創(chuàng)建新 DIV 更快。

瀏覽器渲染大型 DOM 樹的速度很慢。瀏覽器根本不會渲染 1,000,000 行 20 px 高度 - Chrome 中 DIV 的最大高度為 15,000,000 px。 HTML 元素越少越好。

快速數(shù)據(jù)網(wǎng)格向 DOM 添加盡可能多的行，以適應(yīng)屏幕的大小。

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

清單 1. 計算屏幕上適合的行數(shù)

當(dāng)需要輸出新數(shù)據(jù)時，行DIV會被重用。新數(shù)據(jù)寫入相同的 DIV。更改 DIV 的內(nèi)容比刪除 DIV 并創(chuàng)建新 DIV 更快。

滾動時，DIV 行的位置是使用 JavaScript 計算的。

最大 DIV 高度為 15,000,000 像素

為了使?jié)L動正常工作，F(xiàn)ast Data Grid 制作了一個大 DIV。滾動事件附加到該 DIV。滾動事件處理程序計算行 DIV 的位置。

圖 2. 用于滾動的大 DIV

如果行的總高度超過 15,000,000 px，則行 DIV 應(yīng)比大 DIV 滾動得更快。當(dāng)大DIV滾動到最后時->行 DIV 也應(yīng)該滾動到末尾。

滾動 DIV 行時，必須應(yīng)用系數(shù)。

const scrollYKoef =
    // if {allRowsHeight} > 15 million -> we have to applay koef on scroll
    // if {allRowsHeight} <= 15 million -> {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. 滾動時使用系數(shù)

CSS 變換翻譯比 CSS top 更快

滾動時，通過變換平移設(shè)置位置。 CSS 轉(zhuǎn)換翻譯比 CSS top 更快。

<!-- 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/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173464994174788.jpg"  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>


<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。壞的。導(dǎo)致布局顛簸。

過度重新計算Layout稱為“l(fā)ayout thrashing”。

在讀取之前修改 DOM 如何減慢瀏覽器速度的直觀演示：
https://wilsonpage.github.io/fastdom/examples/animation.html

關(guān)于該主題的精彩文章：
避免大型、復(fù)雜的布局和布局顛簸 | 文章 | web.dev.

自我推銷

我做的最方便的流程圖編輯器DGRM.net。
也是對企業(yè)來說最便捷的服務(wù)：Excel業(yè)務(wù)流程圖。

在 GitHub 上給星星。

以上是JavaScript。如何為行創(chuàng)建極快的多線程數(shù)據(jù)網(wǎng)格。部分：使用 DOM 的細(xì)微差別的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！