Jiahonzheng's Blog

# 面试：页面加载海量数据

2018/04/26 Share

## 题目

10w 条记录的数组，一次性渲染到页面上，如何处理可以不冻结UI？

## 分析

### DocumentFragment

The DocumentFragment interface represents a minimal document object that has no parent. It is used as a lightweight version of Document 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 reflow, or incur any performance impact that can occur when changes are made.

MDN 的介绍中，我们知道可以通过 DocumentFragment 的使用，减少 DOM 操作次数，降低回流对性能的影响。

### 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.