js 动画优化

2019-09-17 213 阅读1分钟

requestAnimationFrame

防止跳帧，确保均匀执行

window.requestAnimationFrame(function(){
    var dom = document.getElementById('1')
    for(var i =0;i<100;i++){
        var a = document.createElement('li')
        dom.appendChild(a)
    }
})

createDocumentFragment

创建虚拟节点，执行完dom操作再插入进Dom树

window.requestAnimationFrame(function(){
    var dom = document.createDocumentFragment()
    for(var i =0;i<100;i++){
        var a = document.createElement('li')
        dom.appendChild(a)
    }
    document.getElementById('1').appendChild(dom)
})