Tree performance with 3 state checkboxes

Webix JS
#1

I have a large tree with 3-state checkboxes, and certain actions on the tree take a while to process.

https://snippet.webix.com/vwu0v9ou

If you check the first node, it takes a while to process and I see “[Violation] Forced reflow while executing JavaScript took 30511ms” in my chrome console logs.

When profiling the performance, I see repeated triggers of layout that look like they’re caused by this function, which looks like it’s setting the width for the same element over and over:

Jf: function() {
    if (-1 != this.s.scroll.toString().indexOf("x")) {
        var t = this.y.scrollWidth;
        t && (this.y.style.width = "100%",
        this.y.style.width = this.y.scrollWidth + "px")
    }

Is this a bug?

#2

Also if there are any recommended workarounds, would appreciate the help. Thanks!

#3

Hello,

The code above is executed if scroll:“x” is enabled for a Tree, which is true by default - and it refreshes the scroll body on tree refresh.

If you don’t need a horizontal scrollbar for your Tree, you can set scroll:"y" explicitely, and the performance will improve greately: Code Snippet

It’s just a workaround, however, we will check the TreeCheckBox code to get rid of unnecessary scroll updates.

#4

Thanks Helga. Can you let us know when the workaround is no longer necessary?