angularJS $scope.value = HUGE ARRAY DATA affecting performance

tinyCoder Source

I am using Laravel and AngularJS, I have a huge array of Car Brands data in a JavaScript objects, I want to load that object to the controller so first I was including the array in the header as a separated file, and then inject to the scope:

header

<script src="<?= asset('app/lib/database.js') ?>"></script>

database.js

var brands = {"3":[{"model_id":"90","brand_name":"ALFA ROMEO","model_name":"156 1.9 JTD"},{"model_id":"1001","brand_name ....

angularJS controller

.controller('CarsController',  function($scope) {
    $scope.brands = brands;
.....
...

Everything was good and there is no performance issue.

But we changed the structure to include the brands array in a global window.App array, like:

header

window.App = <?php echo json_encode(['TIMEZONE' => $timezone,
'USERNAME'=> Auth::user()->name,
'USERID'=> Auth::user()->id,
'CSRF_TOKEN' => csrf_token(),
'BRANDS' => json_encode(Config::get('constants.brands')) <-- same brands array loaded here
....
..
]); ?>

And in angularJS controller, I did like:

.controller('CarsController',  function($scope) {
    $scope.brands = App.BRANDS;
.....
...

but then the performance went down and the page is taking a long time to load.

I am wondering why? isn't it the same? and is there any solution to keep the second structure but improve the performance?

Thanks.

angularjs

Answers

answered 3 months ago Adrian Smith #1

Assuming both arrays contain the same data, the only reason I can see as to why the second case would take longer to load is that you are essentaily parsing the JSON three times. Twice on the backend from JSON to PHP object and from PHP object to text/html, and then on the frontend from text/html to Javascript. This is definitely going to slow things down when you fetch the page. Also, it's just a huge waste of resources. Either just serve the JSON along with the Angular app or rewrite your PHP so that it:

1) Doesn't read in from JSON. Store it as a PHP array natively, or else have PHP send the JSON without parsing it into a PHP object, just send it as text.

2) Doesn't inject the array on rendering your Angular app. Instead, have it as an endpoint that your Angular app makes an Ajax call to. That way the page can load without the array, and then it can be fetched asynchronously when it is needed.

answered 3 months ago Ziv Weissman #2

It is not really a performance issue the way I see it, just a matter of visibility.

On your first scenario:

header

<script src="<?= asset('app/lib/database.js') ?>"></script>

database.js

var brands = {"3":[{"model_id":"90","brand_name":"ALFA ROMEO","model_name":"156 1.9 JTD"},{"model_id":"1001","brand_name ....

You are loading the data asynchronously, because the browser downloads JS files in the background, so the page is loaded, while the data is being loaded together, so it seems that the page is loaded.

header

window.App = <?php echo json_encode(['TIMEZONE' => $timezone,
'USERNAME'=> Auth::user()->name,
'USERID'=> Auth::user()->id,
'CSRF_TOKEN' => csrf_token(),
'BRANDS' => json_encode(Config::get('constants.brands')) <-- same brands array loaded here
....
..
]); ?>

On the other hand, on your second scenario, you are using php to encode the data into the page, and it is being loaded as part of the page, so the page is NOT loaded until the entire data finishes.

Also, the 2nd scenario will take more time because the php will need time to evaluate "json.encode" while in the JS file the data is already in JSON format.

And in angularJS controller, I did like:

.controller('CarsController',  function($scope) {
    $scope.brands = App.BRANDS;
.....
...

but then the performance went down and the page is taking a long time to load.

So as I said, the page will not load, until the entire data is finish, while on the first option, the page is loaded and data is loading in the background.

isn't it the same?

No.

and is there any solution to keep the second structure but improve the performance?

No, it is also bad practice. The "right" way to do it is move the data to an API and call it with AJAX in your JS code, probably better to use some sort of paging also.

Supplement

After reading comments, I believe the issue is less page load time but responsiveness of page, this is due to a very large HTML file you are producing with the encoding of the JSON into the page. The browser itself can't handle too big html files, adding the angularjs framework that constantly scanning/changing the DOM you are just inviting bad performance.

comments powered by Disqus