Binding.scala:避免过多的dom-tree更新的策略

Question

在我的项目中，我显示通过websocket发送的日志条目。

由于我无法控制发送多少条目，因此我正在寻找一种策略来避免屏幕冻结。

我创建了一个ScalaFiddle来模拟它：https://scalafiddle.io/sf/kzr28tq

具有这些参数的函数可以完美运行：

setInterval(1000) { // note the absence of () =>
entries.value += (0 to 100).map(_.toString).mkString("")
}

如果间隔变小，字符串变长 - 屏幕冻结，例如：

setInterval(100) { // note the absence of () =>
entries.value += (0 to 10000).map(_.toString).mkString("")
}

是否有解决方案可以在客户端解决此问题 - 或者我必须在服务器端解决此问题？

Answer 1

你可以试试：

@dom
def render = {
<div>
{
for (entry <- entries) yield {
entryDiv(entry).bind
}
}
</div>
}

问题是您过早绑定条目。Binding.scala通过CPS转换来发挥它的魔力，每个.bind都会触发对所有代码的重新评估，所以你应该尽可能晚地绑定一个变量。

对于Vars，用于理解而不是直接绑定，以避免更新整个列表。当你使用+=修改Vars的内容时，Binding.scala 会在内部"修补"列表，但如果你直接在Vars实例上.bind以获取整个列表，框架将无法为你做任何优化。

以下是更新的ScalaFiddle：https://scalafiddle.io/sf/kzr28tq/3