Tree performance with 3 state checkboxes

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?

Comments

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

  • edited August 2018

    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: https://snippet.webix.com/74yvk7mv

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

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

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!