重排（重構(gòu)/回流/reflow）? ? ? ?重繪（repaint/redraw）
一叼旋、瀏覽器運(yùn)行機(jī)制
? ?瀏覽器加載完html后生成 DOM樹 ，這是頁面的結(jié)構(gòu)沦辙，頁面所有元素按這個(gè)結(jié)構(gòu)排列夫植；
? ?在加載完css和js后生成 渲染樹 ，頁面中的元素都有自己的規(guī)模尺寸（寬高）油讯、位置详民、顏色等，按渲染樹將頁面繪制在瀏覽器上撞羽。
重排
? ?1阐斜、當(dāng)頁面中的某些元素的規(guī)模尺寸、布局發(fā)生改變或元素的隱藏等都會觸發(fā)渲染樹重新構(gòu)建诀紊。
? ?每個(gè)頁面至少觸發(fā)一次重排和重繪（瀏覽器第一次加載頁面時(shí)谒出，頁面初始化）
? ? 2隅俘、觸發(fā)重排的情況：
? ? ? ? ?1??頁面的初始化（無法避免）
? ? ? ? ?2??頁面增加、刪除笤喳、隱藏元素
? ? ? ? ?3??改變元素的寬高为居、位置，使用動(dòng)畫
? ? ? ? ?4??瀏覽器窗口尺寸的改變（resize事件）
? ? ? ? ?5??讀取某些元素屬性：（offsetLeft/Top/Height/Width, clientTop/Left/Width/Height, ? scrollTop/Left/Width/Height, width/height, getComputedStyle(), currentStyle(IE) )
重繪
? ?當(dāng)頁面中的元素的顏色或背景色發(fā)生改變時(shí)杀狡，就會觸發(fā)重繪蒙畴。
? ?注意：table及其內(nèi)部元素可能需要多次計(jì)算才能確定好其在渲染樹中節(jié)點(diǎn)的屬性值，比同等元素要多花兩倍時(shí)間呜象，這就是我們盡量避免使用table布局頁面的原因之一膳凝。
重排一定觸發(fā)重繪，重繪不一定觸發(fā)重排恭陡。
重排重繪的代價(jià)：瀏覽器運(yùn)行速度減慢蹬音、耗時(shí)，瀏覽器卡死
二休玩、優(yōu)化
1著淆、瀏覽器自己的優(yōu)化
? ? ?瀏覽器回維護(hù)一個(gè)隊(duì)列，將所有的重排重繪放在這個(gè)隊(duì)列中拴疤，當(dāng)達(dá)到一定的數(shù)量或一定的時(shí)間間隔后再觸發(fā)一次重排重繪永部。（此期間不要訪問DOM元素的offsetleft等屬性）
2、我們的優(yōu)化
1??盡量批次改變元素css屬性
2??將動(dòng)畫的元素設(shè)置position屬性為absolute或fixed呐矾，這樣使元素脫離文本流苔埋，不會影響渲染樹。
3??當(dāng)多個(gè)添加DOM元素時(shí)蜒犯，使用文本碎片fragment（隱藏的元素不再渲染樹中讲坎，）只觸發(fā)一次重排重繪
