dom渲染方面的優化淺談

　　今天分享一個面試經驗，上週面試中一位印象很深的面試官（主要長得很帥），問我了一個我至今印象很深入的問題，固然不是什麼你以後的職業規劃啊，你工做中遇到過哪些問題啊之類的。原起於一道面試題，小夥伴們能夠想一想這題，當時我給出的答案是，li+=完了以後，一次性渲染，不要在for循環中屢次渲染。我認爲我已經回答到點上了，然鵝。。。。。我要是能懂面試官，我如今也不會在寫博客找工做了，當時這位面試官看到個人答案以後，可能認爲我說的比較籠統，問了我爲何一次渲染要比屢次渲染性能更優呢？？wtf！！這什麼問題？？點在哪裏？我該怎麼說？這問題當時問的我，就像有人問你，1+1爲何等於2同樣，固然我並非說這面試官問的很差，或者故意刁難，只是當時我沒有get到他問我這個點在哪裏，後來查閱了資料發現，其實這位面試官，真正想讓我回答的是，關於頁面重排與重繪。

　　接下來就是很關鍵的一句話，dom操做很昂貴！正由於這句話，頁面元素優化方面，基本從這個點出發。那麼什麼是dom重排，什麼又是dom重繪呢？這就要從dom樹提及了。

　　瀏覽器下載完頁面中的全部組件——HTML標記、JavaScript、CSS、圖片以後會解析生成兩個內部數據結構——DOM樹和渲染樹。

在文檔初次加載時，瀏覽器引擎經過解析 html文檔 構建一棵DOM樹，以後根據DOM元素的幾何屬性構建一棵用於展現渲染的渲染樹。渲染樹中的節點被稱爲「幀」或「盒",符合CSS模型的定義，可理解爲（包括理解頁面元素爲一個具備大小，填充，邊距，邊框和位置的盒子）。因爲隱藏元素不須要顯示，渲染樹中並不包含DOM樹中隱藏的元素（知道這點有用）。 當渲染樹構建完成，瀏覽器把每個元素放到正確的位置上，而後再根據每個元素的其餘樣式，繪製頁面。

因爲瀏覽器的流佈局，對渲染樹的計算一般只須要遍歷一次就能夠完成。但table及其內部元素除外，它可能須要屢次計算才能肯定好其在渲染樹中節點的屬性，一般要花3倍於同等元素的時間。這也是爲何咱們要避免使用table作佈局的一個緣由。

　　重繪：是一個元素外觀的改變所觸發的瀏覽器行爲，例如改變visibility、outline、背景色等屬性（上面說到的其餘屬性）。瀏覽器會根據元素的新屬性從新繪製，使元素呈現新的外觀。重繪不會帶來從新佈局，並不必定伴隨重排。

　　重排：當DOM的變化影響了元素的幾何屬性（寬或高），瀏覽器須要從新計算元素的幾何屬性，一樣其餘元素的幾何屬性和位置也會所以受到影響。瀏覽器會使渲染樹中受到影響的部分失效，並從新構造渲染樹。這個過程稱爲重排。重排必定伴隨着重繪。