Poor data performance in LWC applications

[bmblb]

Reported here: https://www.bryntum.com/forum/viewtopic.php?f=51&t=15916&p=79421

We have noticed some performance issues when using the Grid in a Salesforce LWC with high volumes of data. Specifically, loading in 5000 records into the grid is taking roughly 20 seconds.

Our investigations have shown that this issue will occur when the data being set on the Grid is a proxied array from the Lightning Locker Service. This is due to a limitation with how proxied arrays are implemented in the Salesforce Lightning Locker Service. We have identified that when you access a single element from a proxied array, then the whole array is iterated over. This means that if you implement a standard

Code: Select all

for (let i = 0; i < count; i++)

loop over an array, then the total number of operations is count * count. For an array with 5000 elements, this results in 25,000,000 operations.

It is therefore much more efficient to iterate over arrays using other methods such as forEach() or map().

[bmblb]

Potential workaround: clone data, provided by Salesforce, to a simple array of objects without side effects, using effective forEach, and then provide that data to the grid.

const data = [];
this.array.forEach(x => data.push(cloneRecord(x)))

new Grid({
  data : data
})

[bmblb]

There are suggestions to replace data loading loop with a for..of. In case problem is only in iterating the incoming array, that could do the trick. Need to decide if for..of performance loss is tolerable, forEach loss is surely not. Ideally this would be an LWC specific override.

[bmblb]

UPD: Salesforce cannot fix the for loop:

Salesforce responded that they have been able to replicate the performance issue on their end but due to the fundamental design of their data proxying feature they are not going to do anything to fix it