gpt4 book ai didi

angularjs - 无法减少 ng-repeat 中的观察者数量

转载 作者:行者123 更新时间:2023-12-01 01:58:44 26 4
gpt4 key购买 nike

出于性能目的,我想从我的 ng-repeat 中删除双重数据绑定(bind)(因此,相关的观察者)。

它加载了 30 个项目,这些数据在加载后是静态的,因此不需要双重数据绑定(bind)。

问题是,无论我怎么做,该页面上的观察者数量都保持不变。

让我们说:

<div ng-repeat='stuff in stuffs'>
// nothing in here
</div>

观察者数量为 211 (该页面上还有其他绑定(bind),不仅是 ng-repeat)
<div ng-repeat='stuff in ::stuffs'>
// nothing in here
</div>

关注人数仍为 211 (如果我理解正确,应该是 210 ),但请稍等:
<div ng-repeat='stuff in ::stuffs'>
{{stuff.id}}
</div>

观察者数量现在是 241 (好吧,211 个观察者 + 30 个东西 * 1 个观察者 = 241 个观察者)
<div ng-repeat='stuff in ::stuffs'>
{{::stuff.id}}
</div>

关注人数仍为 241 !!!::不应该删除关联的观察者吗?
<div ng-repeat='stuff in ::stuffs'>
{{stuff.id}} {{stuff.name}} {{stuff.desc}}
</div>

还是 241 ...

这些例子确实是在我的应用程序中制作的,所以这些数字也是真实的。

真正的 ng-repeat 比这里的示例复杂得多,我在我的页面上达到了大约 1500 个观察者。如果我删除它的内容(如示例中),我会下降到大约 200 个观察者。那么我该如何优化呢?为什么::似乎不起作用?

谢谢给我解惑...

最佳答案

很难弄清楚您的具体情况的确切问题是什么,也许提供一个孤立的例子是有意义的,以便其他人可以提供帮助。

结果可能取决于您如何计算观察者。我从 here 得到了解决方案.

这里是 a Plunker example按预期工作(在 :: 中添加或删除 ng-repeat ):

HTML

<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js@1.5.6" data-semver="1.5.6" src="https://code.angularjs.org/1.5.6/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="mainCtrl">
<div>{{name}}</div>

<ul>
<li ng-repeat="item in ::items">{{::item.id}} - {{::item.name}}</li>
</ul>

<button id="watchersCountBtn">Show watchers count</button>
<div id="watchersCountLog"></div>
</body>
</html>

JavaScript
angular
.module('app', [])
.controller('mainCtrl', function($scope) {
$scope.name = 'Hello World';

$scope.items = [
{ id: 1, name: 'product 1' },
{ id: 2, name: 'product 2' },
{ id: 3, name: 'product 3' },
{ id: 4, name: 'product 4' },
{ id: 5, name: 'product 5' },
{ id: 6, name: 'product 6' },
{ id: 7, name: 'product 7' },
{ id: 8, name: 'product 8' },
{ id: 9, name: 'product 9' },
{ id: 10, name: 'product 10' }
];
});

function getWatchers(root) {
root = angular.element(root || document.documentElement);
var watcherCount = 0;

function getElemWatchers(element) {
var isolateWatchers = getWatchersFromScope(element.data().$isolateScope);
var scopeWatchers = getWatchersFromScope(element.data().$scope);
var watchers = scopeWatchers.concat(isolateWatchers);
angular.forEach(element.children(), function (childElement) {
watchers = watchers.concat(getElemWatchers(angular.element(childElement)));
});
return watchers;
}

function getWatchersFromScope(scope) {
if (scope) {
return scope.$$watchers || [];
} else {
return [];
}
}

return getElemWatchers(root);
}

window.onload = function() {
var btn = document.getElementById('watchersCountBtn');
var log = document.getElementById('watchersCountLog');

window.addEventListener('click', function() {
log.innerText = getWatchers().length;
});
};

希望这可以帮助。

关于angularjs - 无法减少 ng-repeat 中的观察者数量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38355450/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com