構(gòu)建件豌、渲染
1、構(gòu)建DOM樹（parse）：渲染引擎解析HTML文檔控嗜，首先將標(biāo)簽轉(zhuǎn)換成DOM樹中的DOM node（包括js生成的標(biāo)簽）生成內(nèi)容樹（Content Tree/DOM Tree）茧彤；
2、構(gòu)建渲染樹（construct）：解析對(duì)應(yīng)的CSS樣式文件信息（包括js生成的樣式和外部css文件）疆栏，而這些文件信息以及HTML中可見的指令（如<b></b>）曾掂，構(gòu)建渲染樹（Rendering Tree/Frame Tree）；
3壁顶、布局渲染樹（reflow/layout）：從根節(jié)點(diǎn)遞歸調(diào)用珠洗，計(jì)算每一個(gè)元素的大小、位置等若专，給出每個(gè)節(jié)點(diǎn)所應(yīng)該在屏幕上出現(xiàn)的精確坐標(biāo)许蓖；
4、繪制渲染樹（paint/repaint）：遍歷渲染樹调衰，使用UI后端層來繪制每個(gè)節(jié)點(diǎn)膊爪。
重排必定引起重繪，重繪不一定是重排引起的嚎莉。
不影響位置大小的米酬，單純?yōu)橹乩L即可 比如修改color 等。
優(yōu)化
（1）直接改變?cè)氐腸lassName
（2）display：none趋箩；先設(shè)置元素為display：none淮逻；然后進(jìn)行頁面布局等操作琼懊；設(shè)置完成后將元素設(shè)置為display：block；這樣的話就只引發(fā)兩次重繪和重排爬早；
（3）不要經(jīng)常訪問瀏覽器的flush隊(duì)列屬性哼丈；如果一定要訪問，可以利用緩存筛严。將訪問的值存儲(chǔ)起來醉旦，接下來使用就不會(huì)再引發(fā)回流；
（4）使用cloneNode(true or false) 和 replaceChild 技術(shù)桨啃，引發(fā)一次回流和重繪车胡；
（5）將需要多次重排的元素，position屬性設(shè)為absolute或fixed照瘾，元素脫離了文檔流匈棘，它的變化不會(huì)影響到其他元素；
（6）如果需要?jiǎng)?chuàng)建多個(gè)DOM節(jié)點(diǎn)析命，可以使用DocumentFragment創(chuàng)建完后一次性的加入document主卫；
