Flex-layout: Performance Problems

[projectX21]

I'm learning Angular2 at the moment. In AngularJS i was used to bootstrap with the grid-layout. Now i'm trying to get a fitting layout with flex-layout.

But here starts my problem.

Setup:

I have a collection of 500 Items. I want to display them in tabular form on tablet and desktop devices but in column style on smartphones. For that reason i use the fxLayout="row" and fxLayout.xs="column".

But It seems that the inital loading of the grid takes much longer when the window is sized to mobile display. On bigger screensizes (sm and bigger) it takes just about 2-3 seconds. On the mobile screensizes it takes roughly 7 seconds.

It would be great if someone has some good tips for me how to solve these performance problems.

I created a plunkr where you can see the problem. If the screensize is changed that the divs will be displayed in columns and you change something in the code to force a reload, the page reload will take much longer than on bigger screensizes (where the divs are displayed in rows).

This plunkr can be found here: https://plnkr.co/edit/s0Hkx4S9Xc830Kzoj48V?p=preview

Kind Regards

[ThomasBurleson]

@projectX21 - I updated your Plunkr above to demonstrate use of Flex-Layout using two (2) different approaches:

• use fxLayout + fxFlex to apply flexbox stylings inline to each element
• use class.xs to apply CSS classes defined in style sheets

    .column { flex-direction: column;   -webkit-box-orient: vertical;  height:100px; margin-bottom: 20px;   }
    .row    { flex-direction: row;      -webkit-box-orient: horizontal;   }

    .row     .item_40 {  max-width: 40%; }
    .row     .item_20 {  max-width: 20%; }

    .column  .item_40 {   max-height: 40%; }
    .column  .item_20 {  max-height: 20%; }

This Plunkr nicely demonstrates that a performance issue definitely exists; but only when initially creating large numbers of Angular components using fxLayout > fxFlex in column mode.

• View construction in row-mode does not seem to have a performance impact.
• After construction, switching between column and row modes does not seem to have any significant performance issues.

Best Practices

The updated Plunkr shows how the Responsive API for class can be used. This solution demonstrates how large items (e.g. table rows) should use Class-based layouts instead of inline-styling layouts.

    <div *ngFor="let obj of data" class="flow row" class.xs="flow column">
      <div class="item_40" style="background-color: #ccdeee">{{obj.origin}}</div>
      <div class="item_40" style="background-color: #aaddaa">{{obj.destination}}</div>
      <div class="item_20" style="background-color: #ddaadd">{{obj.price}}</div>
    </div>  
  ```
```css  
.flow { 
  display: flex;  
  box-sizing: border-box;   
  -webkit-box-direction: normal;   

  .row { 
    flex-direction: row;      
    -webkit-box-orient: horizontal;   
  }

  .column { 
     flex-direction: column;   
     -webkit-box-orient: vertical;  
     height:100px;       /*  important for sizing of row heights */
     margin-bottom: 20px;   
  }
}

.item_40, .item_20 {  
  flex: 1 1 100%;   
  box-sizing: border-box;   
  -webkit-box-flex: 1; 
}

.row     .item_40 {  max-width: 40%; }
.row     .item_20 {  max-width: 20%; }

.column  .item_40 {   max-height: 40%; }
.column  .item_20 {  max-height: 20%; }

This solution is not unexpected as class-based layouts will use stylesheets and the fxFlex-approach will need to assign inline styles to EACH element in the table/list.

[ThomasBurleson]

Your issue does, however, highlight the need to document these two different approaches in a Best-Practices section.

[projectX21]

Good Morning Thomas,

thank you very much for your detailed answer.

In my new plunker (based on my initial example) I found out, that the rendering of fxLayout="column" will be much faster, if we replace:

fxLayout="row" fxLayout.xs="column"

with the following:

fxLayout="column"

That means however, that the rendering of the "column"-layout is quite fast, but if we combine it with the "fxLayout.[...]" it is much way slower?!

[ThomasBurleson]

Todo - investigate performance concern with initial rendering. See last comment ^.

[silsal]

Hi guys!
Do you have any update about this issue?
we cannot progress in our project for a performance issue and we are worried that this might be due to our wrong usage of flexLayout and we would like to have some advice from you guys.
we have tables with large amount of columns that we would like to hide as the screen gets smaller, in order to make sure that the table fits all the screen size.
We achieved this by applying flex layout in all the single rows of the table (see example below), but this slowed down massively our page loading (2 seconds in Chrome and 4 second in IE vs < 1 sec in all the browsers without flex). We try to solve the issue, by applying the flexLayout style to the columns rather than rows, but using this system the columns width is not respected.
Do you have any suggestion in this regards? Do we need to use lists rather than tables?

[jotatoledo]

Im almost sure that Im experiencing performance issues related to the flex-layout inline properties. I will confirm this during the next week.

Update: I can confirm that removing inline properties from different components along a component hierarchy notoriously improved the render times

[ThomasBurleson]

@jotatoledo, @silsal - Does this Performance Considerations wiki provide insight?

[jotatoledo]

Hey @ThomasBurleson thanks for the reply. Sadly the mentioned points does not apply to my use case.

Currently I have the following:

<div fxLayout="row" fxLayoutWrap>

    <wama-batch 
        *ngFor="let batch of batches" 

        [movingCodes]="movingCodes" 
        [dispatchCodes]="dispatchCodes" 
        [supermarketCodes]="supermarketCodes" 
        [productionCodes]="productionCodes" 
        [batch]="batch" 

        fxFlex="100" 
        fxFlex.gt-sm="50" 
        fxFlex.gt-md="25" >

    </wama-batch>

</div>

The batch component will then render a card, which contains a row aligned variable number of SVGelements with fixed size bounded to object properties.

The components in this hierarchy are configured with changeDetection.OnPush btw.

If I remove the fxFlexproperties on the previous template, the render speed increases notoriously.

[ThomasBurleson]

@jotatoledo - Please open a new issue with a working Plunkr demo that demonstrates this.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}