dom操作的三类问题
1访问和修改dom元素
2修改don元素的样式会导致重绘和重排
3dom事件处理与用户的交互

把DOM与ECMAScript各自想象成一个岛屿，用收费桥梁连接，ECMAScript每次访问DOM，都要经过桥，缴纳过路费，访问次数越高，费用越贵，应减少过桥次数，留在岛上处理完毕再过桥

最坏的情况是在循环中修改访问元素

function innerHTMLLoop1(){
                for(var i = 0;i < 15000;i++){
                    document.getElementById("here").innerHTML +='v'; 
                }
            }

不好的方式，但是在浏览器里还是蛮快的，需要访问并修改DOM

HTML集合是包含了DOM节点引用的类数组对象

document.getElementsByTagName();
document.getElementsByClassName();
document.getElementsByName();

提供了一个类似数组中的length属性，可以以数字索引的方式访问列表中的元素

意外的死循环

var alldivs = document.getElementsByTagName('div');
            for(var i = 0;i < alldivs.length; i++){
                document.body.appendChild(document.createElement('div'));
            }

可以将类数组集合拷贝到数组，来进行读取
（1）重绘与回流

频繁促发重绘与回流，会导致UI频繁渲染，阻塞线程，导致JS执行变慢

回流.PNG

重绘.PNG