codex-team / editor.js

A block-style editor with clean JSON output
https://editorjs.io
Apache License 2.0
28.66k stars 2.08k forks source link

Dynamic loading/unloading of off screen DOM elements #1039

Open ktsuttlemyre opened 4 years ago

ktsuttlemyre commented 4 years ago

When the editor.js block list gets to be pretty large it can start to lag. I am proposing an implementation of dynamic loading/unloading logic of DOM elements based on their presence within or outside of the browser viewport. This reduces the number of DOM elements the browser has to render. Increasing memory, increasing performance, and increases the perceived size of the grid/list.

Examples of some projects that implement this technique are: http://slickgrid.net/ https://airbnb.io/infinity/ https://github.com/roeierez/infinite-list

I'd like to hear your feedback and encourage the implementation of this technique.

neSpecc commented 4 years ago

For now, you can use blocks.insert() API method to implement it by your side.

MaherAzzabi commented 1 year ago

Hi @ktsuttlemyre, did you managed to do the dynamic loading/unloading implementation ? could you share a snippet code for it 🔥? Thanks