JavaScript。如何為行創建極快的多執行緒資料網格。部分：使用 DOM 的細微差別

示範 | GitHub

圖 1. 具有 1,000,000 行的資料網格

快速資料網格功能：

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

嘗試捲動並搜尋 1,000,000 行 - 快速資料網格。

在本文中，我將列出使用 DOM 的細微差別。關於多線程下一篇文章。

DOM 越小越好。更改 DIV 的內容比刪除 DIV 並創建新 DIV 更快。

瀏覽器渲染大型 DOM 樹的速度很慢。瀏覽器完全不會渲染 1,000,000 行 20 px 高度 - Chrome 中 DIV 的最大高度為 15,000,000 px。 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 px，則行 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 top 更快

滾動時，透過變換平移設定位置。 CSS 轉換翻譯比 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/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。壞的。導致佈局顛簸。

過度重新計算Layout稱為「layout thrashing」。

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

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

自我推銷

我做的最方便的流程圖編輯器DGRM.net。
也是對企業來說最方便的服務：Excel業務流程圖。

在 GitHub 上給星星。