4 ms·
Glide Grid is an amazing achievement I have to say! You can have a fast DOM without canvas, but it requires creative thinking. DataGridXL also renders millions
by robbiejs 3y ago
Glide Grid is an amazing achievement I have to say!
You can have a fast DOM without canvas, but it requires creative thinking. DataGridXL also renders millions of cells, but it does not use canvas as its main renderer (https://www.datagridxl.com/demos/one-million-cells https://www.datagridxl.com/demos/one-million-cells).
The way it works: only columns are their own DOM nodes. For browsers it's just too much to ask to re-render let's say (20rows*10cols) 200 DOM nodes while keeping scrolling at 60fps.
- spankalee 3y ago> it's just too much to ask to re-render let's say (20rows*10cols) 200 DOM I don't think this is true with modern browsers and CSS. For a table, every cell and parents of the cells as much as possible, should be styled `contain: strict` and if possible, absolutely positioned.
- robbiejs 3y agoIt's still true. You might be able to get decent performance on a Macbook 3000 (doubtful even) but anything less than that, nope. That's why many grid components use canvas rendering. It would have been a lot easier for all these grid devs to work with DOM nodes if they could.
- spankalee 3y ago> That's why many grid components use canvas rendering Many grid components were developed many years before modern compositors and the `contain` property.
- exceptione 3y agoOut of curiosity: What browsers did you test? Firefox performs magnitudes better in css benchmarks than Chrome, and I thought it is also better in handling large DOMs in general.
- robbiejs 3y agoDataGridXL is used by 10 million end users. It's tested on all kinds of devices and browser combinations. Browsers can handle AND update really large DOMs, but they still choke on doing all of these actions (repaint, reflow) WHILE SCROLLING, which is a different game.