twitter-bootstrap - 当 Chrome 中有很多输入时，为什么 Bootstrap 会增加这么多输入延迟？

Question

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

这是我在尝试重现、调试和解决此问题时创建的几个 jsfiddles:

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

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

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

简单的 React 应用程序 带 Bootstrap 加载但不使用任何 Bootstrap 标签(~415ms/char):
https://jsfiddle.net/nwt6ou9L/24/

没有反应仅 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 时间(大约 83 毫秒)。但根据我的经验，渲染 300 个输入更多的是在 ~20-22ms 的范围内。所以肯定会发生一些非线性缩放。

此外，如果您使用 Chrove Dev 工具进行一些分析，您会看到“更新层树”占用了大部分时间来显示帧。向输入字段添加单个字符会导致层树中的大量工作是如何产生的？ Bootstrap 做了什么导致这么长时间的更新？ 在 Chrome 版本 63.0.3239.132(官方构建)(64 位)上




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

并且非常清楚，我不是在问页面上有大量输入是否是好的用户体验，我在问这个输入滞后来自哪里

编辑:我一直在研究这个问题，看来它可能只是 Chrome 的问题。 Firefox(版本:58.0.2(64 位))似乎没有这种输入滞后开销。它可以在约 40 毫秒内将一个字符渲染到输入字段中:

Answer 1

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

开玩笑，我尝试用最新版本替换它，问题要么完全消失，要么大大减少。