为什么操作DOM会更耗资源

DOM是js的一个对象，严格的说并不是操作这个对象耗费资源，而是操作这个对象之后会触发浏览器的一些操作（layout（reflow）和paint）耗费资源；

首先我们要说到浏览器是如何呈现一个页面的

1、解析HTML，并生成一颗DOM树

2、解析CSS样式，结合DOM树生成一颗render树

3、对render树的各个节点计算布局信息，比如位置和尺寸

4、根据render树，并利用浏览器的UI层进行绘制

paint是一个耗费资源的事情，但是layout更是一个耗费资源的事，我们要优化前端，那么就得减少layout，我们接下来看一看什么操作会触发layout

1、调整窗口大小

2、改变字体

3、增加、删除样式表

4、添加、删除DOM元素

5、激活伪类

6、修改DOM元素样式，且样式涉及到尺寸的改变

我们来直观感受一下操作DOM有多耗费资源

ab var div = document.getElementById('parent');

        function a(){

            console.time('a')

            for(var i=0;i<5000;i++){

                div.innerHTML +='a';

            }

            console.timeEnd('a');

        }

        function b(){

            console.time('b')

            var re = '';

            for(var i=0;i<5000;i++){

                re+='b';

            }

            div.innerHTML = re;

            console.timeEnd('b');

        }

两个按钮，均是5000次循环，操作DOM在循环内部和外部时间对比