Question

我一直在努力理解为什么当页面上有很多文本输入时，Bootstrap会为字符输入增加如此多的开销。

这是我在尝试重新编译，调试和解决此问题时创建的几个jsfiddles：

简单的React app with Bootstrap ，可创建1500个输入（~415ms / char）： https://jsfiddle.net/nwt6ou9L/20/

简单的React app 没有Bootstrap ，可创建1500个输入（~30ms / char）： https://jsfiddle.net/nwt6ou9L/21/

Simple React app with Bootstrap ，仅创建300个输入（~30ms / char）： https://jsfiddle.net/nwt6ou9L/44/

简单的React app 加载了Bootstrap 但未使用任何Bootstrap标记（~415ms / char）： https://jsfiddle.net/nwt6ou9L/24/

No React 仅Bootstrap 1500输入（~415ms / char）： https://jsfiddle.net/nwt6ou9L/49/

我觉得非常有趣的是你将输入字段的样式更改为：

.text-input-column {
    position: relative !important
}

或

.text-input-column {
    all: unset;
}

输入延迟消失。

考虑到Bootstrap渲染1500个输入需要多长时间，我预计渲染300将接近1/5时间（约83ms）。但根据我的经验，渲染300输入更多在~20-22ms的范围内。所以肯定会有一些非线性缩放。

此外，如果您使用Chrove Dev工具进行一些分析，您会看到“更新层树”占用了大部分时间来显示帧。如何在输入字段中添加单个字符可以在层树中引起如此多的工作？ Bootstrap做什么导致如此长时间的更新？ 在Chrome版本63.0.3239.132（官方版本）（64位）

（ms / char）是指在我的机器上输入单个字符的onChange事件后呈现输入所需的毫秒数。

非常清楚，我不是在问一个页面上是否有大量的输入是好的用户体验，我在问这个输入延迟来自哪里 < / p>

编辑：我一直在研究这个问题，看起来它可能只是Chrome的一个问题。 Firefox（版本：58.0.2（64位））似乎没有此输入滞后开销。它可以在~40ms内将字符渲染到输入字段中：

Answer 1

您使用的是Bootstrap 4 alpha，而不是最新的稳定版本4.2.1 ...

百灵鸟，我尝试用最新版本替换它，问题已完全消失或大大减少。