JavaScript. Cara Membuat Grid Data Berbilang Benang Yang Sangat Pantas untuk Baris. Bahagian : Nuansa Bekerja dengan DOM

Demo | GitHub

Rajah 1. Grid Data dengan 1,000,000 baris

Ciri Grid Data Pantas:

• Sangat Cepat
• Berbilang benang
• Hanya 523 Baris Kod
• Tiada Ketergantungan
• JavaScript Vanila

Cuba tatal dan cari melalui 1,000,000 baris - Grid Data Pantas.

Dalam artikel ini saya akan menyenaraikan nuansa bekerja dengan DOM. Mengenai multithreading dalam artikel seterusnya.

Lebih kecil DOM, lebih baik. Menukar kandungan DIV adalah lebih pantas daripada memadam DIV dan mencipta yang baharu.

Pelayar lambat dalam memaparkan pokok DOM yang besar. Penyemak imbas tidak akan memaparkan 1,000,000 baris dengan ketinggian 20 px sama sekali - ketinggian maksimum DIV dalam Chrome ialah 15,000,000 px. Lebih sedikit elemen HTML, lebih baik.

Grid Data Pantas menambah seberapa banyak baris pada DOM yang sesuai pada skrin.

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

Penyenaraian 1. Mengira bilangan baris muat pada skrin

Apabila data baharu perlu dikeluarkan, DIV baris digunakan semula. Data baharu ditulis kepada DIV yang sama. Menukar kandungan DIV adalah lebih pantas daripada memadam DIV dan mencipta yang baharu.

Apabila menatal, kedudukan baris DIV dikira menggunakan JavaScript.

Ketinggian DIV maksimum ialah 15,000,000 px

Untuk membuat tatal berfungsi, Grid Data Pantas membuat DIV yang besar. Acara skrol dilampirkan pada DIV ini. Pengendali acara tatal mengira kedudukan DIV baris.

Rajah 2. DIV besar untuk menatal

Jika jumlah ketinggian baris adalah lebih daripada 15,000,000 px, maka DIV baris harus menatal lebih cepat daripada DIV besar. Apabila DIV besar menatal ke hujung -> DIV baris juga harus tatal ke penghujung.

Apabila menatal baris DIV, pekali mesti digunakan.

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)`;
});

Penyenaraian 2. Menggunakan pekali semasa menatal

Terjemahan transformasi CSS adalah lebih pantas daripada CSS atas

Apabila menatal, kedudukan ditetapkan melalui terjemah transformasi. Terjemahan transformasi CSS lebih pantas daripada CSS atas.

<!-- 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);

Penyenaraian 4. Mengubah suai DOM sebelum membaca DOM. teruk. Membawa kepada perebutan reka letak.

Pengiraan semula Susun Atur yang berlebihan dipanggil "meletakkan susun atur".

Demonstrasi visual tentang cara mengubah suai DOM sebelum membaca memperlahankan penyemak imbas:
https://wilsonpage.github.io/fastdom/examples/animation.html

Artikel hebat mengenai topik:
Elakkan reka letak yang besar dan kompleks dan perebutan reka letak | Artikel | web.dev.

Kenaikan pangkat diri

Saya membuat editor carta alir yang paling mudah iaitu DGRM.net.
Ia juga merupakan perkhidmatan yang paling mudah untuk perniagaan: Gambar rajah proses perniagaan Excel.

Berikan bintang di GitHub.