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的数据还没有加载进来，所以处于业务需求，暂时不会考虑分批次。包括按首字母分批次和按数据分批次