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

我使用的是Laravel和AngularJS，我在一个JavaScript对象中有一个庞大的汽车品牌数据数组，我想将该对象加载到控制器，因此首先我将数组作为一个单独的文件包含在标题中，然后注入范围：

标题

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

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

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

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

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控制器

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

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

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

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

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

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

但我们改变了结构，将品牌数组包含在一个全局

窗口中。App

数组中，如：

标题

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

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

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

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

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

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

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

---

谢谢。

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

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

---

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

在我看来，这实际上不是一个性能问题，只是一个可见性问题

在第一个场景中：

标题

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

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

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

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

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

您正在异步加载数据，因为浏览器在后台下载JS文件，所以页面被加载，而数据被加载在一起，所以页面似乎被加载

标题

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

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

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

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

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

但是后来性能下降了，页面占用了很长时间 装载

正如我所说，在整个数据完成之前，页面不会加载，而在第一个选项中，页面被加载，数据在后台加载

不一样吗

没有

有没有办法保持第二种结构，但要改进 表演

不，这也是坏习惯。 “正确”的方法是将数据移动到API中，并在JS代码中使用AJAX调用它，使用某种分页可能更好

补充 在阅读了评论之后，我认为问题在于页面加载时间少了，但页面的响应性差了，这是由于您正在生成一个非常大的HTML文件，并将JSON编码到页面中。

---

浏览器本身无法处理太大的html文件，添加了angularjs框架，不断扫描/更改DOM，这只会带来糟糕的性能

事实上，这不完全一样。在第二个示例中，您现在使用PHP构建、编码并解析数组，这需要时间。与第一个已经构建并呈现为JS文件的数组相同。当有很多Entries时会有巨大的差异不，缓慢的过程不是来自PHP，我已经在这两种情况下添加了PHP行，当我使用

$scope.brands=App.brands时，它是缓慢的这没有任何意义。为什么在这两种情况下都要添加PHP？你会改变你的问题来显示两种方法的确切区别吗？显示这两种情况下的确切标题。看看代码，我从常量数组中获取数据，或者在特殊情况下从数据库中获取数据，所以这并不重要，php数组在页面加载时作为标题中的对象呈现，眨眼之间，问题就不存在了，这是在将变量引用到
window
@Pop-A-Stash时，我认为他指的是与浏览器相关的性能问题（UI操作变慢，浏览器可能崩溃）