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 上给星星。