DocumentFragment 接口表示文档的一部分（或一段）。更确切地说，它表示一个或多个邻接的 Document 节点和它们的所有子孙节点。
DocumentFragment 节点不属于文档树，继承的 parentNode 属性总是 null。
不过它有一种特殊的行为，该行为使得它非常有用，即当请求把一个 DocumentFragment 节点插入文档树时，插入的不是 DocumentFragment 自身，而是它的所有子孙节点。这使得 DocumentFragment 成了有用的占位符，暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操作。
----W3CSCHOLL
requestAniminationFrame
The window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint. The method takes a callback as an argument to be invoked before the repaint.
------JAVASCRIPT MDN
上个月我们接到一个需求，需要在前端根据当前位置为列表之中的数据排序并展示出来。在这个需求之前，这个列表展示页面是采用分页，用户下拉滚动更新数据的，但是需要使用前端排序，显然不能在使用分页了。当时，我是直接获取了110+的数据排序后一股脑塞到容器里了。。。定位+计算距离+排序+渲染，表现是需要约3秒才能展现页面。幸运的是---测试没反应这个问题。
今天在 掘金 上看到了 这篇 文章，醍醐灌顶。
脱离文章，口述：
为了解决一次性大量的循环dom操作，渲染时，先创建一个DocumentFragment，里边放置可视区域应有的条数，塞到容器里，先渲染；余下的数据在页面向下滚动---页面重绘的时候重复上一次的操作，直到数据渲染完。requestAnimationFrame是页面重新绘制的时候会自动触发的window自带函数，无论是初始从零的渲染，还是滚动当前屏数据重绘。
看了之后也不是什么黑科技，就是我基础还是差，没想到这玩意是这么用的。