0

I am using angular to show render a bigger dataset. In data.data there are several keys and to each key corresponds an array with around 3000 lines. When the user first open the page all of showraw[key]-s are set to false, so they actuall on get a list of the possible keys in panel-heading-s and when they click on the heading is when they actually get to see the data. Before I added this part the page loaded very fast, now it takes considerable time (few seconds, and it is not because of fetching the data, as the whole dataset was fetched previously also, I just didn't show it all). As far as I can tell, angular basically renders everything even though its not shown (although I guess it might not store it, because every time I click one of the heading to show the data, it still takes a second or two for it to appear).

<div class="panel panel-default">
    <div class="panel-heading"><h2>Raw data</h2></div>
    <span ng-repeat="(key,val) in data.data">
    <div class="panel-heading" ng-click="showraw[key] = ! showraw[key]"><b>{{key}}</b></div>
      <table class="table table-striped table-hover table-responsive" ng-show="showraw[key]">

        <tbody>
          <tr ng-repeat="line in val track by $index" ><td ng-repeat="l in line.split(' ') track by $index">{{l}} </td></tr>

        </tbody>
      </table>
    </span>
</div>

My question is the following: what would be the best practice in speeding up page loads? I do not wish to make the user wait for rendering of data that is not shown to her.

fbence
  • 2,025
  • 2
  • 19
  • 42
  • 1
    Read the documentation of ng-show and ng-if, and understand their crucial difference. But even with ng-if, showing 3000 rows at once is too much to have decent times. Especially if every line must be split every time it's displayed. You should at least do that in the controller, once, and render the result. – JB Nizet May 09 '17 at 19:46
  • 1
    I'd guess it's not an issue of page load speed, but page rendering speed. Having a big complex DOM with many watchers will slow down your webpage. Try doing all of your filtering in your controller first, and then rendering the already filtered model in your view. – tavnab May 09 '17 at 19:47
  • Also, take a look at http://stackoverflow.com/q/17348058/3149036 – tavnab May 09 '17 at 19:50
  • Although `ng-if` answers my questions (and for now it's okay), thanks for the additional points raised! Does this mean doing it in the controller is inherently faster (besides of course, for the ability to do the splitting once, instead of every time)? – fbence May 09 '17 at 20:08
  • If you do it in the template, every time you show or hide the data for a key, angular needs to split every displayed line again to show them, or to compare the result to the previous result. If you know the lines never change, splitting them once in the controller is faster. – JB Nizet May 10 '17 at 09:18

0 Answers0