DOM迴流跟重繪問題

什麼是DOM的迴流
DOM迴流(reflows)和DOM重繪(repaints)
迴流：當頁面上的結構發生改變，瀏覽器會從新的渲染我們的頁面，迴流是比較消耗性能的
迴流產生的情況
1、添加或者刪除可見的DOM元素；
2、元素位置改變；
3、元素尺寸改變——邊距、填充、邊框、寬度和高度
4、內容改變——比如文本改變或者圖片大小改變而引起的計算值寬度和高度改變；
5、頁面渲染初始化；
6、瀏覽器窗口尺寸改變——resize事件發生時；
什麼是DOM重繪
重繪：當前元素的樣式(背景顏色、字體顏色等)發生改變的時候，我們只需要把改變的元素重新的渲染一下即可
重繪對瀏覽器的性能影響較小，所以 一般不考慮
由於迴流 對瀏覽器的影響比較大，所以我們一般是用文檔碎片的方式去解決這個問題的，當我們需要給DOM中添加新的元素的時候，先將其放在一個容器中，然後統一添加，這樣就只產生了一次迴流

 var frg = document.createDocumentFragment();//創建了一個文檔碎片:相當於一個容器，把動態創建的li先放到容器中,最後一起添加到頁面中(只引發一次迴流)
    for (var i = 0; i < 10; i++) {
        var oLi = document.createElement("li");
        oLi.onmouseover = function () {
            this.style.backgroundColor = "#22b909";
        }
        oLi.onmouseout = function () {
            this.style.backgroundColor = "";
        }
        frg.appendChild(oLi);
    }
    oUl.appendChild(frg);