I’m trying to reduce render count of a very heavy component which renders thousands of spans. I can’t apply virtualization because spans have different size.
<div contenteditable="true">
@foreach (var item in els)
{
<span @key="@item.Key" class="@item.cssClass">@item.String</span>
}
</div>
I made an attempt to replace span by a component which renders span and it works, but initial render time was taking too long.
I can’t do everything via js and disable rerender because root div may contain some other blazor components.
I need to apply some changes via JS without rerender, but at some time rerender happens and render state is corrupted. How can I notify blazor about changes in dom?
Or maybe I need to revert all changes made from js before render?
Change types:
- modify span’s textContent
- split span at some offset
- add span into div
Do I need to use something like node.dispatchEvent(new Event(‘change’))?
Are there any possible problems here?
1