页面上需要生成1000多个input，怎么提高输出效率？

Question

项目需要，一个HTML页面上需要生成出来将近1000个input输入框。直接输出，每次都会等待3秒上下的时间，请问有没有什么办法能提高下输出效率？

Answer 1

虚拟化，原则上来讲你渲染了太多的内容导致速度变慢。所以只要渲染少部分数据就可以。那就只渲染视口内的数据即可。

如果你不考虑改这个，然后你又觉得一次3s太恐怖了，那么你可以分批渲染，一次只渲染一部分（50个100个），这样看到一开始的内容不会太慢。当然这个方案最后还是会出现瓶颈的。

Answer 2

我觉得首先要排查一下是代码执行效率的问题还是一次性渲染DOM过多导致的问题。

1.如果这1000个input是你for循环写出来的，有可能是你这个for循环里面做的事影响了效率。
2.如果不是代码执行效率问题，而是一次性渲染的DOM太多太重了，导致的线程阻塞，可以考虑优化渲染方式。具体可以参考：

• 分帧渲染，即每一帧渲染一部分DOM，在人眼可接受的范围内实现最大化的无卡顿加载。
• 懒加载，屏幕范围内的DOM才加载，屏幕范围外的不加载。1000个input可能首次在屏幕展现的只有100个，那就只渲染这100个，当滚动到下面再加载下面的。

Answer 3

<div id="container"></div>
        <script>
            const inputsStr = '<div><input /></div>'.repeat(1000);
            document.querySelector('#container').innerHTML = inputsStr;
        </script>

几百毫秒的事啊 你的3s应该是其他地方导致的吧