Binding.scala：避免过多 dom-树更新的策略

Question

在我的项目中 scala-adapters 我显示通过 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，使用 for comprehension 而不是直接绑定，以避免更新整个列表。当您使用 += 修改 Vars 的内容时， Binding.scala "patches" 内部列表，但是如果您在 Vars 实例上执行 .bind直接获取整个列表，框架无法为您做任何优化。

这是更新后的 ScalaFiddle：https://scalafiddle.io/sf/kzr28tq/3

Binding.scala：避免过多 dom-树更新的策略

Binding.scala: Strategy to avoid too many dom-tree updates

scala

scala.js

binding.scala