Question

我正在使用 Laravel 和 AngularJS ，我在JavaScript对象中有大量的汽车品牌数据，我想将该对象加载到控制器，所以首先我将数组作为分隔文件包含在标题中，然后注入范围：

标题

<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('CarsController',  function($scope) {
    $scope.brands = brands;
.....
...

一切都很好，没有性能问题。

但我们更改了结构，将品牌数组包含在全局window.App数组中，例如：

标题

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
....
..
]); ?>

在angularJS控制器中，我确实喜欢：

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

然后性能下降，页面需要很长时间才能加载。

我想知道为什么？是不是一样？是否有任何解决方案来保持第二种结构但提高性能？

感谢。

Answer 1

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.

Answer 2

假设两个数组都包含相同的数据，我可以看到为什么第二种情况需要更长时间才能加载的唯一原因是你需要三次解析JSON。后端从JSON到PHP对象，从PHP对象到text / html，然后从text / html到Javascript的前端两次。当你获取页面时，这肯定会减慢速度。而且，它只是浪费大量资源。要么只是将JSON与Angular应用程序一起提供，要么重写PHP以便它：

1）没有从JSON读入。将其作为PHP数组本地存储，或者让PHP发送JSON而不将其解析为PHP对象，只需将其作为文本发送。

2）在渲染你的Angular应用程序时不会注入数组。相反，将它作为您的Angular应用程序进行Ajax调用的端点。这样页面可以在没有数组的情况下加载，然后可以在需要时异步获取它。

angularJS $ scope.value =影响性能的巨大阵列数据

2 个答案:

Supplement