哪些操作會(huì)引起頁(yè)面回流（Reflow）
談?wù)勚乩L和回流
比如我們?cè)鰟hDOM節(jié)點(diǎn)，修改一個(gè)元素的寬高，頁(yè)面布局發(fā)生變化，DOM樹結(jié)構(gòu)發(fā)生變化，那么肯定要重新構(gòu)建DOM樹，而DOM樹與渲染樹是緊密相連的，DOM樹構(gòu)建完，渲染樹也會(huì)隨之對(duì)頁(yè)面進(jìn)行再次渲染，這個(gè)過(guò)程就叫回流。當(dāng)你給一個(gè)元素更換顏色，這樣的行為是不會(huì)影響頁(yè)面布局的，DOM樹不會(huì)變化，但顏色變了，渲染樹得重新渲染頁(yè)面，這就是重匯
你應(yīng)該能感覺到，回流的代價(jià)要遠(yuǎn)大于重繪。且回流必然會(huì)造成重繪，但重繪不一定會(huì)造成回流。
1.由于display為none的元素在頁(yè)面不需要渲染，渲染樹構(gòu)建不會(huì)包括這些節(jié)點(diǎn)；但visibility為hidden的元素會(huì)在渲染樹中。因?yàn)閐isplay為none會(huì)脫離文檔流，visibility為hidden雖然看不到，但類似與透明度為0，其實(shí)還在文檔流中，還是有渲染的過(guò)程。
2.盡量避免使用表格布局，當(dāng)我們不為表格td添加固定寬度時(shí)，一列的td的寬度會(huì)以最寬td的寬作為渲染標(biāo)準(zhǔn)，假設(shè)前幾行td在渲染時(shí)都渲染好了，結(jié)果下面某行的一個(gè)td特別寬，table為了統(tǒng)一寬，前幾行的td會(huì)回流重新計(jì)算寬度，這是個(gè)很耗時(shí)的事情。
結(jié)合上面的解釋，引起DOM樹結(jié)構(gòu)變化，頁(yè)面布局變化的行為叫回流，且回流一定伴隨重繪。只是樣式的變化，不會(huì)引起DOM樹變化，頁(yè)面布局變化的行為叫重繪，且重繪不一定會(huì)便隨回流。
documentFragment是一個(gè)保存多個(gè)element的容器對(duì)象（保存在內(nèi)存）當(dāng)更新其中的一個(gè)或者多個(gè)element時(shí)，頁(yè)面不會(huì)更新。只有當(dāng)documentFragment容器中保存的所有element更新后再將其插入到頁(yè)面中才能更新頁(yè)面。documentFragment用來(lái)批量更新。
