如何在不牺牲可用性的情况下修改DOM中的大量元素?

时间:2015-01-05 07:34:57

标签: javascript dom

我有一个包含很多元素的列表(每个元素都是一个嵌套的div)。每个元素都有一个自定义的onclick处理程序。

JS每秒多次更新列表,这可能会导致:

  • 添加或删除一些元素
  • 更改某些元素中的文字
  • 更改某些元素中的样式
  • 更改某些元素的高度

大多数情况下,更新会对大多数元素进行少量更改。

为了最大程度地减少回流,我应该从DOM中删除列表,进行更改并将其追加。我使用这种方法的问题是,当用户选择一些文本时,下一次更新将重置选择。 (并且下一次更新会在一秒钟内完成)如果用户单击按钮,如果mose_down和mouse_up之间有更新,则他的点击可能无法注册。

我理解选择何时重置已更改的文本。这说得通。但是使用这种方法此列表中的任何选项都将重置。

有没有更好的方法呢?你会如何实现这样的清单?

此列表完全由JS生成。如果我无论如何都要从DOM中删除它,修改它而不是从头重新创建它有什么好处吗?每次重新创建都需要更少的代码。

1 个答案:

答案 0 :(得分:0)

这听起来像双向数据绑定,这里有几个很好的自定义数据绑定解答解决方案:Handy stack link。或者,backbone.js和knockout.js在很多其他框架(角等)中都有很好的技术。

此外,如果您想自己使用pop(我强烈建议您更好地了解它),您可以使用建议的“Object Observe”功能。这里有一些方便的文档,其中有一些关于如何在Mozilla处理这个问题的例子。以及The trusty HTML5 Rocks,这是一个关于使用新的Object.Observe功能的简单教程,非常值得一读。

希望这有帮助!