SOURCE

window.onload = function() {
    var container = document.getElementById('container');
    var btn_normal = document.getElementById('btn_normal');
    var btn_frag = document.getElementById('btn_frag');

    btn_normal.addEventListener('click', normalAdd);
    btn_frag.addEventListener('click', fragmentAdd);
}


function normalAdd() {
    container.innerHTML = '';
    const t1 = new Date().valueOf();
    for (let i = 0; i < 50000; i++) {
        const elm = document.createElement('div');
        elm.innerHTML = 'hello world';  
        elm.classList.add('show');   
        const style = window.getComputedStyle(elm);
        container.appendChild(elm);
    };
    console.log('normal',new Date().valueOf() - t1);
};

function fragmentAdd() {
    container.innerHTML = '';
    const t1 = new Date().valueOf();
    const fragment = document.createDocumentFragment();
    for (let i = 0; i < 50000; i++) {
        const elm = document.createElement('div');
        elm.innerHTML = 'hello world';     
        elm.classList.add('show');   
        const style = window.getComputedStyle(elm);
        fragment.appendChild(elm);
    };
    container.appendChild(fragment);
    console.log('frag',new Date().valueOf() - t1);
};

<button id="btn_normal">普通</button>
<button id="btn_frag">使用Fragment</button>
<div id="container">

</div>

.show {
    box-shadow: 0px 0px 5px #ddd;
}