A markdown-it renderer plugin by using Incremental DOM. Say goodbye innerHTML!
- markdown-it could receive better rendering performance powered by Incremental DOM.
- API is compatible with existing render method.
- It can use with other markdown-it plugins. (Of course incrementalize!)
Refer below for the examples and usages.
Element.innerHTML is the simplest way to update HTML. But it triggers repainting the whole passed HTML.
This is the visualization of repainting in innerHTML, and repainted area will be colorful. As you see, The whole markdown is always repainted.
It means the rendering performance would slow in large markdown if innerHTML would be called many times in a short time. (e.g. live rendering feature)
Google's Incremental DOM can update DOMs by in-place. In other words, elements that have not changed contents or arguments are not changed on rendered DOM too.
As you see above, repainting is triggered to the differences only. So it would expect to reduce the impact of repainting to the minimum by using Incremental DOM.
In this page, you can switch rendering method of markdown: innerHTML and Incremental DOM.
If you wanna confirm the behavior of repainting, turn on paint flashing in developer tools of your browser.
Yuki Hattori (@yhatt)
markdown-it-incremental-dom is the sub-project of Marp.