Improving (identify) render performance

Solution 1:

Reduce your throttle threshhold to a small number (like 5).
If you still fill lagging while scrolling, try use transform to replace scrollLeft, and add will-change to hints browsers how an element is expected to change.

function Grid(parentNode){
    this.ready = false;
    
    this.parentNode = typeof parentNode === 'string' ? document.getElementById(parentNode) : parentNode;
    if (!this.parentNode) {
        console.error('Exception - Grid','Cannot find parentnode');
        return;
    }
    
    // quick n dirty references (normally created when rendering the grid)
    this.gridContent = this.parentNode.querySelector(".gridcontent");
    this.gridHeaderContent = this.parentNode.querySelector(".gridheadercontent");
    this.gridHeaderWrapper = this.parentNode.querySelector(".gridheaderwrapper");   
    this.gridTable = this.parentNode.querySelector(".gridheadertable");
    this.Init();
}
Grid.prototype = {
    Init: function() {
        //this.gridContent.addEventListener('scroll',this.Scroll.bind(this));  
        this.gridContent.addEventListener('scroll', Throttle(5, this.Scroll.bind(this)));
    },
    Scroll: function () {
        let scrollbarWidth = this.GetScrollbarWidth();
        
        let scrollLeft = event.srcElement.scrollLeft;
        this.gridTable.style.transform = `translateX(-${scrollLeft}px)`;
    },
    GetScrollbarWidth: function () {
        return this.gridContent.offsetWidth - this.gridContent.clientWidth;
    }
}

// manage the scroll event spam, resulting in too many redraws
function Throttle(ms, callback) {
    let lastCall = 0;

    return function () {
        let now = new Date().getTime(),
        diff = now - lastCall;
        if (diff >= ms) {
            lastCall = now;
            callback.apply(this, arguments);
        }
    };
}

new Grid("grid");

.component.grid {
     position: relative;
     border-color: #dee2e6;
     overflow: hidden;
     height: 100%;
}
 .component.grid .gridheaderwrapper {
     overflow: hidden;
     border: 1px solid lightgrey;
}
 .component.grid .gridheaderwrapper .gridheadercontent {
     overflow: hidden;
     border-right: 1px solid lightgrey;
}
 .component.grid .gridheaderwrapper .gridheadercontent .gridheadertable {
     border-collapse: collapse;
     table-layout: fixed;
     will-change: transform;
}
 .component.grid .gridcontentwrapper {
     overflow: hidden;
     vertical-align: middle;
     background-color: #fff;
     height: 50%;
}
 .component.grid .gridcontentwrapper .gridcontent {
     position: relative;
     overflow: auto;
     height: 100%;
}
 .component.grid .gridcontentwrapper .gridcontent .gridcontenttable {
     border-collapse: collapse;
     table-layout: fixed;
}
 .component.grid th {
     text-align: left;
     white-space: nowrap;
     padding: 10px 8px;
}
 .component.grid th[rowspan] {
     vertical-align: bottom;
}
 .component.grid td {
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
     padding: 10px 8px;
}

<div id="grid" style="padding: 10px;">
    <div class="component grid" id="51177476-273f-4277-954c-dd7e576c5c9d">
        <div class="gridheaderwrapper">
            <div class="gridheadercontent">
                <table class="gridheadertable" style="width: 1177px;">
                    <colgroup>
                        <col style="width: 55px;" />
                        <col style="width: 113px;" />
                        <col style="width: 80px;" />
                        <col style="width: 95px;" />
                        <col style="width: 93px;" />
                        <col style="width: 136px;" />
                        <col style="width: 61px;" />
                        <col style="width: 292px;" />
                        <col style="width: 88px;" />
                        <col style="width: 89px;" />
                        <col style="width: 75px;" />
                    </colgroup>
                    <thead>
                        <tr>
                            <th>
                                <p>
                                    <label><input type="checkbox" class="filled-in" /><span>&nbsp;</span></label>
                                </p>
                            </th>
                            <th>Name</th>
                            <th>DataType</th>
                            <th>PrimaryKey</th>
                            <th>ForeignKey</th>
                            <th>DataAnalysisType</th>
                            <th>Visible</th>
                            <th>Id</th>
                            <th>Created</th>
                            <th>Modified</th>
                            <th>Selected</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
        <div class="gridcontentwrapper">
            <div class="gridcontent">
                <table class="gridcontenttable" style="width: 1177px;">
                    <colgroup>
                        <col style="width: 55px;" />
                        <col style="width: 113px;" />
                        <col style="width: 80px;" />
                        <col style="width: 95px;" />
                        <col style="width: 93px;" />
                        <col style="width: 136px;" />
                        <col style="width: 61px;" />
                        <col style="width: 292px;" />
                        <col style="width: 88px;" />
                        <col style="width: 89px;" />
                        <col style="width: 75px;" />
                    </colgroup>
                    <tbody>
                        <tr id="daa93d55-bdd5-4a20-9bef-2567efe75971">
                            <td>
                                <p>
                                    <label><input type="checkbox" class="filled-in" /><span>&nbsp;</span></label>
                                </p>
                            </td>
                            <td>CategoryID</td>
                            <td>int</td>
                            <td>true</td>
                            <td>false</td>
                            <td>2</td>
                            <td>true</td>
                            <td>daa93d55-bdd5-4a20-9bef-2567efe75971</td>
                            <td>01/01/0001</td>
                            <td>01/01/0001</td>
                            <td>false</td>
                        </tr>
                       
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

Improving (identify) render performance

Solution 1:

Related

Recent Posts