構(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；
