I have a web application that shows a log in real-time. That means, the log is still being written, and I'd like to update the UI accordingly.
我有一个Web应用程序,可以实时显示日志。这意味着,日志仍在编写中,我想相应地更新UI。
At the moment, I solved it by using an array and showing it using ng-repeat. I don't need two-way bindings, it's just showing a simple list, but - as said - with updates. The updates don't always happen at the very start or very end of the list, but may also happen in between (don't ask why, it's just the way it is).
目前,我通过使用数组并使用ng-repeat显示它来解决它。我不需要双向绑定,它只是显示一个简单的列表,但 - 正如所说 - 更新。更新并不总是发生在列表的开头或结尾,但也可能发生在两者之间(不要问为什么,这就是它的方式)。
Basically, my approach works - but once we have a few hundred log messages, the app starts to get very, very slow.
基本上,我的方法有效 - 但是一旦我们有几百条日志消息,应用程序开始变得非常非常慢。
How could I deal with this issue?
我怎么能处理这个问题?
Of course, I could write my own directive which just takes the array, concatenates it and writes it to the HTML, but this wouldn't reflect changes in real-time, would it?
当然,我可以编写自己的指令,它只接受数组,连接并将其写入HTML,但这不会反映实时的变化,是吗?
1 个解决方案
#1
2
Two ways I've dealt with this in the past. One easy, and one hard.
我过去曾经处理过这两种方式。一个简单,一个难。
The easy way:
简单的方法:
Write a filter and have your ng-repeat grab it's entries from it.
写一个过滤器,让你的ng-repeat从中抓取它的条目。
<div data-ng-repeat="object in objects | myFilter:amount"></div>
In the filter have it send back just the latest based on an amount (so if you have 1000, and the amount is 50, send back the latest 50). If you need the whole thing wire up a button that toggles the amount to everything (or zero, or whatever). Downside is you won't see everything, and when you do need to is when you'll see the load.
在过滤器中,它根据金额发回最新信息(因此,如果您有1000,金额为50,则发回最新的50)。如果你需要整个东西连接一个按钮,将数量切换到一切(或零,或其他)。缺点是你不会看到所有东西,当你需要时,你会看到负荷。
The hard way:
困难的方式:
You'd have to write a directive that takes your entries. Based on the scroll position and the height of each log entry (are they all the same (easier)? or dynamic(harder)) have a subset of the elements displayed on the screen offset by the padding of the ones preceding them. This can get very tricky, very fast but I have implemented and have run grid components on tablets with >100,000 entries. Only about 40 are buffered and as you scroll the top ones get knocked off and new ones get in. I put a couple screens worth in there just as backup in case they scroll too fast.
你必须编写一个指令来获取你的参赛作品。基于滚动位置和每个日志条目的高度(它们是否相同(更容易)?或动态(更难)),屏幕上显示的元素的子集由它们之前的填充偏移。这可能会变得非常棘手,速度非常快,但我已经实现并在平板电脑上运行了大于100,000个条目的网格组件。只有大约40个被缓冲,当你滚动顶部的那些被击倒并且新的进入。我把几个屏幕值得在那里作为备份以防它们滚动得太快。
I can't just drop the code in there for how to do that as it's pretty tricky and would have to be tailored to your specific app.
我不能只是删除代码,因为它非常棘手,必须根据您的特定应用程序进行定制。
#1
2
Two ways I've dealt with this in the past. One easy, and one hard.
我过去曾经处理过这两种方式。一个简单,一个难。
The easy way:
简单的方法:
Write a filter and have your ng-repeat grab it's entries from it.
写一个过滤器,让你的ng-repeat从中抓取它的条目。
<div data-ng-repeat="object in objects | myFilter:amount"></div>
In the filter have it send back just the latest based on an amount (so if you have 1000, and the amount is 50, send back the latest 50). If you need the whole thing wire up a button that toggles the amount to everything (or zero, or whatever). Downside is you won't see everything, and when you do need to is when you'll see the load.
在过滤器中,它根据金额发回最新信息(因此,如果您有1000,金额为50,则发回最新的50)。如果你需要整个东西连接一个按钮,将数量切换到一切(或零,或其他)。缺点是你不会看到所有东西,当你需要时,你会看到负荷。
The hard way:
困难的方式:
You'd have to write a directive that takes your entries. Based on the scroll position and the height of each log entry (are they all the same (easier)? or dynamic(harder)) have a subset of the elements displayed on the screen offset by the padding of the ones preceding them. This can get very tricky, very fast but I have implemented and have run grid components on tablets with >100,000 entries. Only about 40 are buffered and as you scroll the top ones get knocked off and new ones get in. I put a couple screens worth in there just as backup in case they scroll too fast.
你必须编写一个指令来获取你的参赛作品。基于滚动位置和每个日志条目的高度(它们是否相同(更容易)?或动态(更难)),屏幕上显示的元素的子集由它们之前的填充偏移。这可能会变得非常棘手,速度非常快,但我已经实现并在平板电脑上运行了大于100,000个条目的网格组件。只有大约40个被缓冲,当你滚动顶部的那些被击倒并且新的进入。我把几个屏幕值得在那里作为备份以防它们滚动得太快。
I can't just drop the code in there for how to do that as it's pretty tricky and would have to be tailored to your specific app.
我不能只是删除代码,因为它非常棘手,必须根据您的特定应用程序进行定制。