DocumentFragment 

The DocumentFragment interface represents a minimal document object that has no parent. It is used as a lightweight version of that stores a segment of a document structure comprised of nodes just like a standard document. The key difference is that because the document fragment isn't part of the active document tree structure, changes made to the fragment don't affect the document, cause , or incur any performance impact that can occur when changes are made.

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自带函数。

主要就两点：

• DocumentFragment不会引发文档树重绘和回流
• requestAnimationFrame当前帧之前操作DOM，操作完成后渲染。

其中requestAnimationFrame，浏览器新一帧渲染前预知执行方法---666

requestIdleCallback

只有当前帧的运行时间小于16.66ms时，函数fn才会执行。否则，就推迟到下一帧，如果下一帧也没有空闲时间，就推迟到下下一帧，以此类推。

前端页面渲染是逐帧的----第一次是从andriod同事那里听到的，因为他看到我写的H5页面上的图“一排一排”的显示。

它还可以接受第二个参数，表示指定的毫秒数。如果在指定 的这段时间之内，每一帧都没有空闲时间，那么函数fn将会强制执行。

requestIdleCallback(fn, 5000);

requestIdleCallback其他内容附上  黏贴下来也没意思。　　　　　　　　　　　　　　　　　　　

如果哪里不对，请指出，感谢。

DocumentFragment