前端优化-代码层面

不同dom操作性能比较

<ul id="list"> </ul>
<script type="text/javascript">
    console.time(`test`)
    var len = 100
    var ul = document.getElementById('list')
    for (var i = 0; i < len; i++) {
        var li = document.createElement('li')
        ul.innerHTML += `<li>${i}</li>`
    }
    
    console.timeEnd(`test`)
    ul.innerHTML = ''
    
    console.time(`test1`)
    var str = ''
    var ul = document.getElementById('list')
    for (var i = 0; i < len; i++) {
        str += `<li>${i}</li>`
    }
    ul.innerHTML += str
    console.timeEnd(`test1`)
</script>

执行结果如下：相差巨大