大批量DOM操作如何提升性能

Question

START

Q:很简单的一个业务，用JS实现一个通讯录的列表显示。

具体描述：

1.A-Z+#，一共27个DOM对象，假设有1000条数据，我要根据数据中的姓名往这27个DOM对象中添加，请问如何可以最高效的实现，头像可以后加载因此这里不考虑。

2.拒绝setTimeout来实现

3.因为要分别往多个DOM对象中进行DOM操作，所以除了创建多个DocumentFragment来实现外，是否有其他方法来提高性能。

4.个人尝试使用Promise来实现，然而并没有起到想要的结果。

5.代码如下：

var index = "ABCDEFGHIJKLMNOPQRSTUVWXYZ#";

for (var i in data) {

    if (index.indexOf(data[i].per_allpinyin[0].toUpperCase()) >= 0) {

        document.getElementById(data[i].per_allpinyin[0].toUpperCase()).appendChild(dataname(i));

    } else

        document.getElementById("#").appendChild(dataname(i));

}

6.因为DOM的操作永远是同步渲染的，因此在数据>1000的时候，页面的渲染会有些卡顿，因此寻求帮助。

END

first ADD：

感谢几个大大关于分批次的建议，不过我之前忘记补充了。

7.因为右侧有一个快捷侧边栏，可以实现用户点击首字母马上跳转，因此分批次实现的话就会造成一个很糟糕的用户体验，即用户点击Z侧边栏的时候，却发现Z的数据还没有加载进来，所以处于业务需求，暂时不会考虑分批次。包括按首字母分批次和按数据分批次

Answer 1

这两天又用了各种方法尝试了下1.发现同步操作的话，还是documentfragment效率最高，但是同步加载的情况下，加载过程中渲染的卡顿还是无可避免。2.如果使用setTimeout或者requestAnimateFrame来达到异步实现的话，会造成后面绑定事件的业务变动，而且对于非动画操作，其实两者效率差不多，每秒60帧也已经是极限了。这样的帧数下，用递归实现的话，1000条数据就需要至少20+s才能加载完成，不过DOM的渲染会较为流畅，然而不管是侧边栏和还是用户滚动操作都不符合本业务，所以放弃。3.其实DOM的生成还是较快的，1k+条数据的生成大概在1s-2s之间就可以完成，主要还是后续事件绑定的代码会影响单进程的JS执行，导致页面渲染变慢。END：所以最终DOM上还是采用多documentfragment来实现，而后续事件句柄则采用setTimeout来异步加载，使得界面先生成而事件绑定不影响页面的渲染。PS：最后感谢大家的帮忙，希望我所发现的这个问题可以帮到大家