Why does Bootstrap add so much input lag when there's many inputs in Chrome?

Question

I've been struggling to understand why Bootstrap adds so much overhead for character input when there's many text inputs on a page.

Here's a couple jsfiddles I created while I was trying to repro, debug, and troubleshoot this issue:

Simple React app with Bootstrap that creates 1500 inputs (~415ms/char): https://jsfiddle.net/nwt6ou9L/20/

Simple React app without Bootstrap that creates 1500 inputs (~30ms/char): https://jsfiddle.net/nwt6ou9L/21/

Simple React app with Bootstrap that creates only 300 inputs (~30ms/char): https://jsfiddle.net/nwt6ou9L/44/

Simple React app with Bootstrap loaded but not using any Bootstrap tags (~415ms/char): https://jsfiddle.net/nwt6ou9L/24/

No React only Bootstrap 1500 inputs (~415ms/char): https://jsfiddle.net/nwt6ou9L/49/

Something that I found quite interesting is if you change the styling of the input field to something such as:

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

or

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

The input lag disappears.

Given how long Bootstrap takes to render 1500 inputs, I would expect that rendering 300 would be close to 1/5th the time (About 83ms). But from my experience rendering 300 inputs is more within the range of ~20-22ms. So there's definitely some non-linear scaling going on.

Also, if you use Chrove Dev tools to do some profiling, you'll see that the 'Update Layer Tree' takes up most of the time for displaying a frame. How is it that adding a single character to an input field can cause so much work in the Layer Tree? What is Bootstrap doing to cause such a long update? On Chrome Version 63.0.3239.132 (Official Build) (64-bit)

---

(ms/char) refers to the milliseconds it takes to render the input after the onChange event of entering a single character on my machine.

And to be extremely clear, I'm not asking about whether or not having a ton of inputs on a page is the good UX, I'm asking about where this input lag comes from

EDIT: I've continued to look into this issue and it appears it might be a Chrome only issue. Firefox (version: 58.0.2 (64-bit)) does not seem to have this input lag overhead. It can render a character into the input field in ~40ms:

Answer 1

You're using the Bootstrap 4 alpha, not anywhere close to the latest stable version 4.2.1...

On a lark, I tried replacing it with the latest version, and the issue is either entirely gone or greatly reduced.