Javascript AngularJS：具有不同高度的行的虚拟重复

我正在使用ionic和AngularJS（AngularJS材质）构建一个混合应用程序。这个应用程序还有一个内置Node.js和socket.io的集成聊天功能

我现在的问题是，由于只有200条消息，应用程序加载所有消息的速度变得非常慢（浏览器中为200毫秒->应用程序中为4秒，即使是人行横道和track by message.id），并且在文本区域输入消息的速度也会减慢

我有两种解决方案：

虚拟重复（md虚拟重复）

无限卷轴（离子无限卷轴）

1） 我认为虚拟重复是最好的解决方案（我已经在另一个页面上实现了它，它可以像一个符咒一样滚动1500个项目），但问题是消息可以根据其长度有不同的高度，md虚拟重复要求所有元素必须具有相同的高度才能工作

2） 因此，也许我们可以转向无限滚动方法，但现在的问题是，使用ion Infinite Scroll指令进行此操作有点棘手，因为聊天需要在到达顶部而不是底部时触发loadMore（）

---

因此，我的问题是：有没有人有办法在聊天室中使用平滑/快速ng repeat或虚拟repeat指令（可以处理不同的高度）或在顶部工作的无限滚动条？您有没有将React.js作为解决方案？它使用虚拟DOM，这使得更新长列表更加高效

GitHub上有一个开源的repo，它混合了Angular和React，称为ngReact

概述：

文件：

回购：

---

希望这能有所帮助。

使用单独的粘合剂（如铆钉）可能是一个很好的解决方案，它易于集成，并且每个都有rv循环

我认为离子指令可能是您想要的

集合重复允许一个应用程序显示大量的物品列表 表现比重复更出色。它只渲染到DOM中尽可能多的对象 当前可见的项目。这意味着在手机屏幕上 可以容纳八个项目，只有与当前滚动匹配的八个项目 位置将被渲染

---

有几件事你可以试着加快速度

一种是使用类似quick ng repeat的东西，而不是内置的角度js ng repeat

另一种方法是尽可能使用

一次性绑定

，以防止angular在每个摘要周期中不断寻找变化：

当然，如果可能的话，可以尝试使用chrome的开发者工具配置文件选项来找出哪些功能正在减慢应用程序的速度；）

---

PS：可能值得查看此线程以了解如何实现反向无限滚动：

高效滚动列表，如

md virtual repeat

或

collection repeat

需要知道每个项目的高度才能工作。这是因为他们需要知道滚动位置，例如显示滚动条或能够跳过帧以快速向下滑动。只有当您知道已经滚动了多少（我们需要上面元素的高度）以及还有多少要滚动（我们需要下面元素的高度）时，才能找到滚动位置本身

您可以做的是，在将每个元素注入循环之前，使用工厂计算每个元素的高度。这可以通过创建一个与目标容器具有相同属性的容器（例如CSS类）、附加新加载的元素、计算它们的高度（使用

element.offsetHeight

）以及在之后移除容器来实现

---

请注意，这相当沉重，可能会导致一个小的滞后峰值。

查看角度与重复

演示：

我使用线条长度来计算项目的高度

这是一种非常近似的方法。在我们的应用程序中，我们知道，一个字体大小为15px的英文字符的宽度约为6.7px（如果您使用单空格字体，这很好，但不是我们的情况）。此外，我们总是知道每个段的宽度和一个文本行的高度。 itemHeight=通信长度/线宽+填充项目；

---

此外，断线梯架也会影响您的计算。一般来说，我们有一个不错的方法来计算大约8000个文本段落的高度。

我个人不知道React，也从未使用过它。如果这是最好的解决方案，你认为学习它需要多少时间？我是一名自由职业者，我需要与时间赛跑来谋生。这取决于你对工作的满意度。如果你对Angular有很好的掌握，那么选择这个应该不会太难。你能详细说明一下吗（可能有一个链接）？请参考这个，它是一个轻量级和相对快速的活页夹，它可能对你有帮助，它支持纯Javascript双向绑定，如何使用在这里“如果未提供项目高度和项目宽度属性，则将假定列表中的每个项目都与第一个项目具有相同的维度。"-我的情况有点问题o你认为它可以修复吗？我现在已经尝试过了，但是如果第一条消息很小，而我放了一条大的文本，那么消息气泡就会缩小，反之，如果第一条消息是big@Smile如果您将“item text wrap”类添加到message-item中，应用程序可能会工作。但这不是标准行为聊天信息文本已包装。。。它应该显示全文lenght@SmileApplications项目文本换行不会剪切文本，它仍然使用换行符显示完整的文本，因此它应该动态更改项目高度。是的，我也考虑过这一点，但是，因为我在页面上没有任何缓慢的问题（因为我使用了按id跟踪）但是第一次呈现消息只需要花费很多时间，你认为这种方法真的会有所改进吗？如果你加载<30项（消息），它肯定会比

ng repeat

有所改进