为什么在Chrome中有很多输入时Bootstrap会增加这么多的输入延迟？

Question

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

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

带Bootstrap的简单React应用程序,可创建1500个输入(~415ms/char):https://jsfiddle.net/nwt6ou9L/20/

没有Bootstrap的简单React app 创建了1500个输入(~30ms/char):https: //jsfiddle.net/nwt6ou9L/21/

带Bootstrap的简单React应用程序,仅创建300个输入(~30ms/char):https: //jsfiddle.net/nwt6ou9L/44/

加载了Bootstrap但没有使用任何Bootstrap标签的简单React应用程序(~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事件之后呈现输入所需的毫秒数.

并且非常清楚,我不是在问一个页面上是否有大量的输入是好的用户体验,我在问这个输入延迟来自何处

编辑:我一直在研究这个问题,它似乎可能只是一个Chrome问题.Firefox(版本:58.0.2(64位))似乎没有此输入滞后开销.它可以在~40ms内将字符渲染到输入字段中:

Answer 1

您使用的是 Bootstrap 4 alpha，与最新稳定版本 4.2.1 相差甚远...

我一时兴起尝试将其替换为最新版本，问题要么完全消失，要么大大减少。