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>  

.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?!