為了讓項(xiàng)目的運(yùn)行效率更高，減少開銷，需要對(duì)重排、回流、重繪有一定的了解。

　　重排和回流其實(shí)是一回事。

　　瀏覽器渲染

　　瀏覽器在渲染頁面的時(shí)候，大致是以下幾個(gè)步驟：

　　1. 解析html生成DOM樹，解析css，生成CSSOM樹，將DOM樹和CSSOM樹結(jié)合，生成渲染樹;

　　2. 根據(jù)渲染樹，瀏覽器可以計(jì)算出網(wǎng)頁中有哪些節(jié)點(diǎn)，各節(jié)點(diǎn)的CSS以及從屬關(guān)系 - 回流

　　3. 根據(jù)渲染樹以及回流得到的節(jié)點(diǎn)信息，計(jì)算出每個(gè)節(jié)點(diǎn)在屏幕中的位置 - 重繪

　　4. 最后將得到的節(jié)點(diǎn)位置信息交給瀏覽器的圖形處理程序，讓瀏覽器中顯示頁面

　　回流

　　回流：英文叫reflow，指的是當(dāng)渲染樹中的節(jié)點(diǎn)信息發(fā)生了大小、邊距等問題，需要重新計(jì)算各節(jié)點(diǎn)和css具體的大小和位置。

　　例：在css中對(duì)一個(gè)div修飾的樣式中，使用了寬度50%，此時(shí)需要將50%轉(zhuǎn)換為具體的像素，這個(gè)計(jì)算的過程，就是回流的過程。

　　容易造成回流的操作：

　　1、布局流相關(guān)操作

　　· 盒模型的相關(guān)操作會(huì)觸發(fā)重新布局

　　· 定位相關(guān)操作會(huì)觸發(fā)重新布局

　　· 浮動(dòng)相關(guān)操作會(huì)觸發(fā)重新布局

　　2、改變節(jié)點(diǎn)內(nèi)的內(nèi)容

　　改變節(jié)點(diǎn)的結(jié)構(gòu)或其中的文本結(jié)構(gòu)會(huì)觸發(fā)重新布局

　　3、css

　　· width

　　· height

　　· padding

　　· border

　　· margin

　　· position

　　· top

　　· left

　　· bottom

　　· right

　　· float

　　· clear

　　· text-align

　　· vertical-align

　　· line-height

　　· font-weight

　　· font-size

　　· font-family

　　· overflow

　　· white-space

　　重繪

　　重繪：英文叫repaint，當(dāng)節(jié)點(diǎn)的部分屬性發(fā)生變化，但不影響布局，只需要重新計(jì)算節(jié)點(diǎn)在屏幕中的絕對(duì)位置并渲染的過程，就叫重繪。比如：改變?cè)氐谋尘邦伾⒆煮w顏色等操作會(huì)造成重繪。

　　回流的過程在重繪的過程前面，所以回流一定會(huì)重繪，但重繪不一定會(huì)引起回流。

　　容易造成重繪操作的css：

　　· color

　　· border-style

　　· border-radius

　　· text-decoration

　　· box-shadow

　　· outline

　　· background

　　每次回流都會(huì)對(duì)瀏覽器造成額外的計(jì)算消耗，所以瀏覽器對(duì)于回流和重繪有一定的優(yōu)化機(jī)制。瀏覽器通常都會(huì)將多次回流操作放入一個(gè)隊(duì)列中，等過了一段時(shí)間或操作達(dá)到了一定的臨界值，然后才會(huì)挨個(gè)執(zhí)行，這樣能節(jié)省一些計(jì)算消耗。但是在獲取布局信息操作的時(shí)候，會(huì)強(qiáng)制將隊(duì)列清空，也就是強(qiáng)制回流，比如訪問或操作以下或方法時(shí)：

　　· offsetTop

　　· offsetLeft

　　· offsetWidth

　　· offsetHeight

　　· scrollTop

　　· scrollLeft

　　· scrollWidth

　　· scrollHeight

　　· clientTop

　　· clientLeft

　　· clientWidth

　　· clientHeight

　　· getComputedStyle()

　　這些屬性或方法都需要得到最新的布局信息，所以瀏覽器必須去回流執(zhí)行。因此，在項(xiàng)目中，盡量避免使用上述屬性或方法，如果非要使用的時(shí)候，也盡量將值緩存起來，而不是一直獲取。

　　減少回流和重繪

　　合并樣式修改

　　減少造成回流的次數(shù)，如果要給一個(gè)節(jié)點(diǎn)操作多個(gè)css屬性，而每一個(gè)都會(huì)造成回流的話，盡量將多次操作合并成一個(gè)，例：

　　操作div的3個(gè)css屬性，分別是padding、border、margin，此時(shí)就可以考慮將多次操作合并為一次。

　　方法一：使用style的cssText：

　　方法二：將這幾個(gè)樣式定義給一個(gè)類名，然后給標(biāo)簽添加類名：

　　批量操作DOM

　　當(dāng)對(duì)DOM有多次操作的時(shí)候，需要使用一些特殊處理減少觸發(fā)回流，其實(shí)就是對(duì)DOM的多次操作，在脫離標(biāo)準(zhǔn)流后，對(duì)元素進(jìn)行的多次操作，不會(huì)觸發(fā)回流，等操作完成后，再將元素放回標(biāo)準(zhǔn)流。

　　脫離標(biāo)準(zhǔn)流的操作有以下3中：

　　1. 隱藏元素

　　2. 使用文檔碎片

　　3. 拷貝節(jié)點(diǎn)

　　例：下面對(duì)DOM節(jié)點(diǎn)的多次操作，每次都會(huì)觸發(fā)回流

　　這樣每次給ul中新增一個(gè)li的操作，每次都會(huì)觸發(fā)回流。

　　方法一：隱藏ul后，給ul添加節(jié)點(diǎn)，添加完成后再將ul顯示

　　此時(shí)，在隱藏ul和顯示ul的時(shí)候，觸發(fā)了兩次回流，給ul添加每個(gè)li的時(shí)候沒有觸發(fā)回流。

　　方法二：創(chuàng)建文檔碎片，將所有l(wèi)i先放在文檔碎片中，等都放進(jìn)去以后，再將文檔碎片放在ul中

　　方法三：將ul拷貝一份，將所有l(wèi)i放在拷貝中，等都放進(jìn)去以后，使用拷貝替換掉ul

　　避免多次觸發(fā)布局

　　如下回到頂部的操作：

　　每隔20毫秒都會(huì)重新獲取滾動(dòng)過的距離，每次都會(huì)觸發(fā)回流，代碼優(yōu)化如下：

　　只獲取一次，每次都讓數(shù)字遞增，避免每次都獲取滾動(dòng)過的距離。

　　對(duì)于頁面中比較復(fù)雜的動(dòng)畫，盡量將元素設(shè)置為絕對(duì)定位，操作元素的定位屬性，這樣只有這一個(gè)元素會(huì)回流，如果不是定位的話，容易引起其父元素以及子元素的回流。

　　更多關(guān)于html5培訓(xùn)的問題，歡迎咨詢千鋒教育在線名師，如果想要了解我們的師資、課程、項(xiàng)目實(shí)操的話可以點(diǎn)擊咨詢課程顧問，獲取試聽資格來試聽我們的課程，在線零距離接觸千鋒教育大咖名師，讓你輕松從入門到精通。