Javascript 空白：用break:break all这个词预包装最近在Chrome中变得非常缓慢

切换到带有

的jQuery UI选项卡，其中包含需要包装的行以及以下CSS：

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

最近在铬方面变得非常缓慢。这是从过去3个月内的Chrome更新开始的，或者（我现在使用的是Chrome 49）——同样的例子在IE 11和Firefox 44（都是在Windows 7上测试的）中运行得非常快

有关示例，请参见下面的JSFIDLE

Tab1和Tab2都有

空白：预换行和
分词：全部分词属性集。Tab1有20000行，速度相当快（切换到它时只有轻微的延迟）。Tab2有2000行，但它们需要包装，这需要很长时间才能在Chrome上显示——在我的计算机上大约30秒

Tab3和Tab4的数据与Tab2相同，但在Tab3中，空白设置为
pre
，而不是
pre-wrap
，在Tab4中，未设置
word-break
，这两个选项卡显示速度相当快（在我的计算机上大约1秒）

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

任何帮助或建议都将不胜感激

编辑：我用Tab5更新了fiddle，它使用了
wordwrap:break-word而不是
断字：全部断字如下所示，我还在示例文本中添加了一些破折号，以显示不同的包装行为。Tab5确实和Tab3和Tab4一样快，但不像Tab2那样在行尾换行，这正是我的用例所希望的。但我现在将使用这种方式，因为这种包装方式仍然比30秒以上的延迟更可取。谢谢

Edit2：我认为这与jQuery甚至JavaScript都没有关系——这里有一个新的JSFIDLE，它被简化为只使用
单词break:break all-在Chrome中运行此功能需要30秒以上的时间，2000行代码，而在Firefox中，使用此css运行速度更快：

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

演示：
一个变通解决方案：只需在字母之间插入
，并去除任何类型的断路器

wbr元素表示换行机会

演示：
在我原来的例子中，我有
wordbreak:breakall
和
wordwrap:breakword
。删除第一行确实会加快速度，但也会更改功能行不再像break all那样始终在末尾换行（框中显示的数据是一个日志文件转储，没有空格，大部分没有实际单词，只有数字和代码，因此如果行仅在末尾换行，效果会更好）这似乎也是最快的选择，因为不需要花哨的包装逻辑。但是谢谢你的建议，我现在可能需要使用这个解决方法。我在谷歌发展论坛上发布了一个bug：关于这个问题的任何新闻。。。与Firefox相比，Chrome仍然非常慢。我有大量的代码要显示，而chrome只是一种痛苦。。。