示範(fàn) | GitHub

圖 1. 具有 1,000,000 行的資料網(wǎng)格

快速資料網(wǎng)格功能：

• 難以置信的快
• 多執(zhí)行緒
• 只有 523 行程式碼
• 無依賴性
• 普通 JavaScript

嘗試捲動(dòng)並搜尋 1,000,000 行 - 快速資料網(wǎng)格。

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

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

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

快速資料網(wǎng)格為 DOM 增加盡可能多的行，以適應(yīng)螢?zāi)坏拇笮　?

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

清單 1. 計(jì)算螢?zāi)簧线m合的行數(shù)

當(dāng)需要輸出新資料時(shí)，行DIV會(huì)被重複使用。新資料寫入相同的 DIV。更改 DIV 的內(nèi)容比刪除 DIV 並創(chuàng)建新 DIV 更快。

滾動(dòng)時(shí)，DIV 行的位置是使用 JavaScript 計(jì)算的。

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

為了讓滾動(dòng)正常運(yùn)作，F(xiàn)ast Data Grid 製作了一個(gè)大 DIV。滾動(dòng)事件附加到該 DIV。捲動(dòng)事件處理程序計(jì)算行 DIV 的位置。

圖 2. 用於滾動(dòng)的大 DIV

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

滾動(dòng) DIV 行時(shí)，必須套用係數(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. 滾動(dòng)時(shí)使用係數(shù)

CSS 變換翻譯比 CSS top 更快

滾動(dòng)時(shí)，透過變換平移設(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)致佈局顛簸。

過度重新計(jì)算Layout稱為「layout thrashing」。

在讀取之前修改 DOM 如何減慢瀏覽器速度的直覺式示範(fàn)：
https://wilsonpage.github.io/fastdom/examples/animation.html

關(guān)於該主題的精彩文章：
避免大型、複雜的佈局和佈局顛簸 | 文章 | web.dev.

自我推銷

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

在 GitHub 上給星星。

以上是JavaScript。如何為行創(chuàng)建極快的多執(zhí)行緒資料網(wǎng)格。部分：使用 DOM 的細(xì)微差別的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！