javascript - 空白 : pre-wrap with word-break: break-all recently became very slow in Chrome

Question

切换到带有 <div> 的 jQuery UI 选项卡包含需要换行的行和以下 CSS:

.console {
  white-space: pre-wrap;
  word-break: break-all;
}

最近在 Chrome 中变得非常慢。这开始于过去 3 个月内的 Chrome 更新或(我目前使用的是 Chrome 49)- 相同的示例在 IE 11 和 Firefox 44 中仍然运行得非常快(均在 Windows 7 上测试)

看下面的jsFiddle https://jsfiddle.net/7f7btvb6/3/举个例子。

Tab1 和Tab2 都有white-space: pre-wrap;和 word-break: break-all;属性集。 Tab1 有 20000 行，速度相当快(切换到它时只有轻微延迟。)Tab2 有 2000 行，但它们需要换行，这需要很长时间才能在 Chrome 中显示 - 在我的电脑上大约需要 30 秒。

Tab3和Tab4的数据和Tab2一样，但是在Tab3中white-space设置为 pre而不是 pre-wrap , 并且在 Tab4 word-break未设置，并且这两个选项卡显示得相当快(在我的计算机上大约 1 秒。)

这是最新版本的 Chrome 的一些问题，还是 jQuery UI 和最新的 Chrome 版本之间的一些交互？还是我遗漏了什么或做错了什么？

如有任何帮助或建议，我们将不胜感激!

编辑:我用 Tab5 更新了 fiddle ，它使用 word-wrap: break-word;而不是 word-break: break-all;如下所示，我还在示例文本中添加了一些破折号，以显示不同的环绕行为。 Tab5 确实与 Tab3 和 Tab4 一样快，但不像 Tab2 那样在行尾换行，这正是我的用例更喜欢的理想情况。但我现在会使用它，因为这种包装方式仍然比 30 秒以上的延迟更可取。谢谢!

Edit2:我认为这与 jQuery 甚至 JavaScript 根本无关 - 这里 https://jsfiddle.net/edpq5qcy/3/是一个新的 jsFiddle，它被简化为 word-break: break-all; 的基本用法- 在 Chrome 中运行它需要 30 多秒，2000 行，而在 Firefox 中它是 <1 秒。调整窗口大小会触发自动换行重新计算，在 Chrome 中又会延迟 30 秒，但在 Firefox 等中几乎是即时的。我觉得这一定是某种 Chrome 错误。

Edit3:仅供引用，此问题已在 Canary 版本 52.0.2712.0 中得到修复(请参阅 here)- 它有望在 2016 年 7 月底之前进入稳定的 Chrome 版本。

Answer 1

使用此 css 运行速度更快:

.console {
  white-space: pre-wrap;
  word-wrap: break-word;
}

演示:jsfiddle.