# 100000个DOM元素怎么渲染

性能优化的一条就是减少dom的渲染，因为dom渲染会造成页面的阻塞.

# 正常的渲染

<ul></ul>
<script>
    var ul1 = document.getElementById('ul1');
    for (var i = 0; i < 100000; i++) {
        var li = document.createElement('li');
        li.innerHTML = i + 1;
        ul.appendChild(li);
    }
</script>

这种渲染，非常的耗时，每一次对文档的插入都会造成重新渲染，一次appendChild会使浏览器进行一次渲染.

# 使用字符串

<ul></ul>
<script>
    var ul1 = document.getElementById('ul1');
    var str = '';
    for (var i = 0; i < 100000; i++) {
        var li = document.createElement('li');
        li.innerHTML = i + 1;
        str += `<li>${i + 1}</li>`;
    }
    ul.innerHTML(str);
</script>

使用字符串，来接受十万次的 li，然后统一进行一次渲染。利用浏览器对 innerHTML 的解析要插入要快的多。

问题：使用这种方法使得字符串灵活性很差。很难创建各种各样的 dom 元素.

# 文档碎片

减少页面的渲染来提高DOM操作的效率。

    var ul1 = document.getElementById('ul1');
    var fragment = document.createDocumentFragment('li');
    for (var i = 0; i < 100000; i++) {
        var li = document.createElement('li');
        li.innerHTML = i + 1;
        fragment.appendChild(li)
    }
    ul1.appendChild(d);

利用 createDocumentFragment 可以进行一次性渲染。就会简单的多的。

文档碎片是存在与内容当中的，不会存在与 dom 中，就不会引起页面回流。可以优化。

DocumentFragment 是没有父节点的最小的文档对象，继承自 Node，它拥有 Node 的所有属性和方法。所以它可以使用 appendChild 这些方法。

document.createDocumentFragment() 和new Fragment() 都可以用来创建，但是第一种的兼容性更好。

# 懒加载

# 虚拟滚动

← 常用的DOM操作