真实DOM操作和虚拟DOM操作的比较

    <div></div>
    <script>
        let box=document.getElementsByTagName('div');//获取DIV元素
        // time和timeEnd结合使用可以计算中间区域的耗时
        //DOM操作
        console.time('a');
        for (var i=0;i<=10000;i++){//这里操作了10000次DOM元素
           box[0].innerHTML=i;
        }
        console.timeEnd('a');
        //数据操作
        let num=0;
        console.time('b');
        for(let i =0;i<=10000;i++){//这里进行了10000次数据计算
          num=i;
        }
        box[0].innerHTML+=num;//最后将数据给了DOM元素
        console.timeEnd('b');
   </script>