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

2024-02-01

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

它加载 30 个项目,并且这些数据一旦加载就是静态的,因此不需要双重数据绑定。

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

让我们说:


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

观察者数量为211(该页面上还有其他绑定,不仅仅是 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>

Still 241...


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

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

谢谢你给我解惑...


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

结果可能取决于您如何计算观察者。我从中获取了解决方案here https://medium.com/@kentcdodds/counting-angularjs-watchers-11c5134dc2ef.

Here is 一个笨蛋的例子 http://plnkr.co/edit/LBNxtyYuQuj9bKcxBryC按预期工作(添加或删除:: in ng-repeat):

HTML

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <script data-require="[email protected] /cdn-cgi/l/email-protection" 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;
  });
};

希望这可以帮助。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

无法减少 ng-repeat 中的观察者数量 的相关文章

  • Ionic 3 更新后 WebpackJsonp 丢失

    我最近从 2 升级到 ionic 3 我可以为 iOS 构建应用程序 但 ionic 服务现在失败并出现以下错误 在为 iOS 构建之前 我必须手动将 main prod ts 和 main dev ts 替换为 main ts 您需要更多
  • Oracle Many OR 与 IN () 的 SQL 性能调优 [重复]

    这个问题在这里已经有答案了 我手头没有 解释计划 您能帮忙判断以下哪一个更有效吗 选项1 select from VIEW ABC where STRING COL AA OR STRING COL BB OR STRING COL BB
  • $http.get 、 $http.post 、$http.put 、 $http.delete $http.head 和 $http.jsonp 之间的区别

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我是 Angular JS 和 Web 开发的新手 请帮我 今天我读到了有关 Angular JS 中的 http 的内容 但我只知道
  • 我应该增强客户端上的 Jquery Mobile 元素还是发送带有 data-enhance="false" 的增强标记?

    我有一个产品搜索 我正在发送回结果 每个结果都包含两个按钮 JQM 控制组 我一次发送 24 条记录 因此需要增强 24 个控制组 如下所示 div class submitButton linkBox div
  • 如何读取 GPU 负载?

    我正在编写一个程序 用于监控计算机的各种资源 例如CPU使用率等 我还想监控 GPU 使用情况 GPU 负载 而不是温度 using System using System Collections Generic using System
  • C# 的快速线程安全随机数生成器

    我需要在多个正在运行的线程中快速生成随机浮点数 我尝试过使用System Random 但它对于我的需求来说太慢了 并且它在多个线程中返回相同的数字 当我在单线程中运行应用程序时 它工作正常 此外 我需要确保生成的数字在 0 到 100 之
  • 如何为 CUDA 内核选择网格和块尺寸?

    这是一个关于如何确定CUDA网格 块和线程大小的问题 这是对已发布问题的附加问题here https stackoverflow com a 5643838 1292251 通过此链接 talonmies 的答案包含一个代码片段 见下文 我
  • 哪个更快:堆栈分配或堆分配

    这个问题听起来可能相当简单 但这是我与另一位合作的开发人员进行的辩论 我小心翼翼地在可能的地方进行堆栈分配 而不是堆分配它们 他一边跟我说话 一边看着我 并评论说没有必要 因为他们的表现是一样的 我总是有这样的印象 堆栈的增长是恒定的时间
  • setInterval() 如何影响性能?

    我们正在使用 Twitter Bootstrap 作为框架构建一个 Web 应用程序 但在显示 隐藏工具提示时遇到问题 除了尝试找到实际问题的解决方案之外 我还有一个关于我们同时使用的解决方法的问题 从性能角度来看 使用 setInterv
  • Xcode“使用性能工具运行”被禁用?

    我正在尝试从我的 Xcode 项目中查找内存泄漏 我不知道发生了什么 我无法选择任何内容Run gt Run with performance tool 事物列表被禁用 请帮助我 我是初学者 问题是我已经删除了构建文件夹并尝试使用性能工具运
  • 子查询与连接

    我重构了从另一家公司继承的应用程序的一个缓慢部分 以使用内部联接而不是子查询 例如 WHERE id IN SELECT id FROM 重构后的查询运行速度提高了约 100 倍 50 秒到 0 3 我预计会有改进 但谁能解释为什么它如此剧
  • 路线过渡之间滑动 AngularJS

    我只使用 Angular 大约一周时间 所以如果我的代码很糟糕 我深表歉意 我正在尝试在路线转换之间创建滑动操作 我可以在幻灯片中创建效果 但不能在路线转换之间创建效果 无论如何 代码如下 导航 li a class intro curre
  • 当我在控制器中使用 state.go 时,离子滑动菜单不会出现

    大家好 我正在使用 ionic 来构建我的应用程序 并且我放置了幻灯片菜单 问题是当我使用 stage go 更改视图时 此工作正常 但幻灯片菜单失败 那么我该如何解决这个问题 路由器 use strict var app angular
  • Angular JS,量角器定位器,获取元素的直接子元素

    我有一个网格 我想从中选择所有行 但不选择行内的任何元素 这些行只是 div 没有类等 类似这样 为简洁起见 删除了内部内容 div class grid div div div div div div div div div div di
  • 渲染 ThreeJS 应用程序第一帧时的性能问题

    目前 当我渲染以下内容时 我的 ThreeJS 应用程序的性能受到很大影响第一帧 它会导致 Edge 和 IE 11 浏览器冻结 5 秒 并弹出窗口指示 此窗口没有响应 这可能会吓到我的用户 使用 Chrome 的性能分析器 问题似乎来自几
  • 有效地生成所有排列

    我需要尽快生成所有排列 https en wikipedia org wiki Permutation整数的0 1 2 n 1并得到结果作为NumPy https numpy org 形状数组 factorial n n 或者迭代此类数组的
  • AngularJS orderBy 不能与 ngOptions 中的 track by 一起使用?

    我正在尝试排序ngOptions with track by 这是我的模板
  • 如何在 Angular 单元测试中模拟/触发 $routeChangeSuccess?

    给定一个附加到 routeChangeSuccess 事件的处理程序来更新 rootScope 上的 title 属性 rootScope on routeChangeSuccess function event current previ
  • Angularjs - 将 True/False 显示为 Yes/No

    有没有一种简单的方法可以将真 假值显示为是 否 我正在从数据库检索包含以下内容的 JSON 对象 对象 WithCertification true 这是 HTML 有认证 elem WithCertification 正在显示这个 认证真
  • 优化 CSS 交付 - Google 的建议

    谷歌建议在 head 中使用非常重要的 CSS 内联 并在内部使用其他 CSS

随机推荐

  • Android 清单错误清单文件不以最终换行符结尾

    Error 清单文件不以最终换行符结尾 检查清单文件是否以最终换行符结尾 根据 JAR 规范的要求 预期的 这是 AndroidManifest
  • 为什么我会收到此错误? AttributeError:“str”对象没有属性“decode”

    我正在尝试创建一个带有电子邮件验证的注册页面 我是 Python Dajngo Web 开发的新手 目前我使用 Python 3 6 Django 2 2 4 Postgresql 11 和 Ubuntu 操作系统 但我有一个问题 无法弄清
  • 无法在android中设置推送通知声音

    我已经创建了推送通知应用程序 我从 GCM 服务获取消息 但推送通知声音不起作用 当我收到通知时 我需要播放声音 我已在下面发布了我的代码 任何人都可以帮助我 receiver class import android app Activi
  • React-Native Bundle Error 未计算文件的 SHA-1

    我在创建反应本机应用程序包时遇到此错误 我正在执行命令React Native Bundle dev false entry file index js bundle output ios main jsbundle platform io
  • 如何使用discord.js获取特定会员用户名

    我想在嵌入消息中添加一个特定的会员信息 用户名 头像 有人知道该怎么做吗 const feedback new discord RichEmbed setColor 0 0 255 setFooter Bot created by mess
  • 是否可以在 Kubernetes 复制控制器中设置主机名?

    我需要在 Kubernetes 复制控制器中设置静态主机名 Docker 通过一些运行时标志来支持它 但是 Kubernetes 复制控制器似乎不支持它 环境 操作系统 CentOS 6 6 使用 sysctl 更改变量 kernel ho
  • CSRF 攻击适用于 API 吗?

    我正在编写一个 Django RESTful API 来支持 iOS 应用程序 每当我编写处理 POST 请求的方法时 我都会遇到 Django 的 CSRF 保护 我的理解是 iOS 管理的 cookie 不会被应用程序共享 这意味着我的
  • 如何通过请求使用转换流?

    基本上 我想在使用转换流将http响应发送到客户端之前更改它 但是下面的代码抛出一个错误 错误 结束后写入 有关的文档http nodejs org api stream html stream writable end chunk enc
  • 提升和变量范围

    有人可以帮助解释为什么下面的两个代码片段打印出不同的结果吗 区别在于条件语句内部 第一个例子中 有一个局部变量 Jack 分配给 name 并且条件为 true 意味着 name 的计算结果为 true 在第二个例子中 相同的名称 Jack
  • ASP.NET MVC 成员角色

    我需要对 ASP NET 会员资格进行一些说明 请帮助我 我正在使用 ASP NET MCV 3 框架 并打算使用 ASP NET 成员身份通过 LDAP 或 SQL 进行用户和身份验证管理 对于我到目前为止所理解的 ASP NET 会员资
  • 将科学计数法的字符串转换为 XPath 中的数字格式

    我有这个字符串 8 1161E 002 这个字符串实际上是计算的结果 不幸的是结果被转换为字符串并且我无法更改它 那么我怎样才能将这个字符串转换为类似的格式00 081 我正在查看 XPath 参考 但找不到format 例如函数 有没有办
  • std::函数向量

    我想要一个 std vector 包含一些函数 并且可以实时向其中添加更多函数 所有的函数都会有一个这样的原型 无效名称 SDL Event 事件 我知道如何创建函数数组 但是如何创建函数的 std vector 我试过这个 std vec
  • Android:仅旋转相机预览上的覆盖按钮

    我有一个 Android 应用程序 使用 LinearLayout 作为主要布局 并使用相机预览填充 SurfaceView 在此 我用三个按钮和一个自定义 TextView 填充另一个 LinearLayout 我希望相机预览始终保持横向
  • 为什么 Process.WorkingSet > Process.MaxWorkingSet?

    闲着的好奇心 我正在查看当前进程的一些属性 using Process p Process GetCurrentProcess Inspect properties p MaxWorkingSet 1 413 120 p MinWorkin
  • 在 matplotlib 表中换行文本

    我需要使用 matplotlib 从字典列表中创建一个表 为此 我使用以下函数 我在该网站的另一个答案中找到了该函数 import matplotlib pyplot as plt from matplotlib externals imp
  • 为什么会有相互冲突的变量?

    我在 facebook javascript SDK 和 python requesthandler 变量之间得到了冲突的结果 Javascript SDK 表示我的用户未登录 这是正确的 而来自基本请求处理程序的模板变量表示我的用户已登录
  • 如何打开 .hxs 文件?

    我知道 hxs 文件是编译后的帮助文件 是 chm 文件的替代品 但我似乎无法打开它们 我读到您使用此处找到的帮助资源管理器 dexplore exe 来阅读它们 C Program Files Common Files microsoft
  • 设置自定义字体时出现文本对齐问题

    当我为分段控件设置自定义字体时 它会更改垂直文本对齐方式 我正在使用下面的代码来设置字体 I dont think these lines are creating any issue but just wanted to paste al
  • IE 11 开发人员工具问题 - window.onload 中出现异常

    I installed Internet Explorer 11 on my Windows 7 machine and it s not building the DOM in DOM Explorer Does any one know
  • 无法减少 ng-repeat 中的观察者数量

    出于性能目的 我想从我的 ng repeat 中删除双重数据绑定 因此 相关的观察者 它加载 30 个项目 并且这些数据一旦加载就是静态的 因此不需要双重数据绑定 问题是 无论我怎么做 该页面上的观看者数量都保持不变 让我们说 div no