Significant performance degradation when loading large number of components

@jcorradino wrote:

Hey all!

We are looking into building out a component similar to Ember-Light-Table and hit a bit of a snag. This component utilizes component contextualization to improve on flexibility and implementation.

An example setup:

{{#my-table model=dataModel as |table|}}
    {{table.column name="Column 1" property="dataAttribute"}}
    {{table.column name="Column 2" property="dataAttribute"}} 
    {{#table.column name="Column 3" property="dataAttribute" as |column|}} 
        {{some-helper column.data}}
    {{/table.column}}
{{/my-table}}

To put in place a cleaner, more “modern web” UI, we are looking to set up a table without pagination. Or, if need be, setting the threshold high enough that most users never see it.

The catch: this needs to be ADA compliant, removing solutions like Vertical Collections - unfortunately, Infinite scrolling just does not work very well with screen readers.

With a reasonable number of records, there is no issue… but you start encountering long running script errors in IE at around 250 records.

Using Ember Concurrency, we’ve managed to suppress these errors… though the records still take a significant amount of time to load, lagging the UI a bit in the process.

Gathering some metrics, I’ve found that Ember components take around 1ms to render. This means that a table of six columns and 400 rows takes - as a baseline - 2.4 seconds without any overhead. With computed properties and such, I’m seeing about double that number.

Has anyone run into an issue like this one? (rendering a large number of elements takes a massive amount of time)

If so, how did you solve for it? Do you know of a way to streamline the render? From what I am seeing, it looks as if a significant amount of time is spent drawing to the screen. This being the case, a potential fix would entail some kind of “buffer”. That is, instead of many small changes to the DOM, buffer the changes and write them all at once. (or in chunks)

Let me know what you think.

Thanks for the help!

Posts: 5

Participants: 2

Read full topic