今天就跟大家聊聊有關(guān)JavaScript中回流（重排）與重繪的含義及使用，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)是專業(yè)的桂東網(wǎng)站建設(shè)公司，桂東接單;提供成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行桂東網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

簡單先了解一下瀏覽器的渲染過程（圖片來自于網(wǎng)絡(luò)）

瀏覽器生成渲染樹的過程（圖片來自于網(wǎng)絡(luò)）

回流

回流當render tree中的一部分或全部因為元素的規(guī)模尺寸、布局、隱藏等改變時，瀏覽器重新渲染部分DOM或全部DOM的過程。回流也被稱為重排，其實從字面上來看，重排更容易讓人形象易懂（即重新排版整個頁面）。

重繪

當頁面元素樣式改變不影響元素在文檔流中的位置時（如background-color，border-color，visibility），瀏覽器只會將新樣式賦予元素并進行重新繪制操作。

什么時候會觸發(fā)回流或重繪？

有大量的用戶行為以及潛在的DHTML改變會觸發(fā)回流。例如，改變?yōu)g覽器窗口的大小，使用一些JavaScript方法，包括計算樣式，對DOM進行元素的添加或刪除，或是改變元素的class等。

添加或者刪除可見的DOM元素；
元素位置改變；
元素尺寸改變——邊距、填充、邊框、寬度和高度；
內(nèi)容變化，比如用戶在input框中輸入文字，文本或者圖片大小改變而引起的計算值寬度和高度改變；
頁面渲染初始化；
瀏覽器窗口尺寸改變，resize事件發(fā)生時；
計算offsetWidth和offsetHeight屬性；
設(shè)置style屬性的值；

回流必將引起重繪，而重繪不一定會引起回流。

如何減少回流、重繪？

一、 CSS中避免回流、重繪

1.盡可能在DOM樹的最末端改變class
2.避免設(shè)置多層內(nèi)聯(lián)樣式
3.動畫效果應(yīng)用到position屬性為absolute或fixed的元素上
4.避免使用table布局
5.使用css3硬件加速，可以讓transform、opacity、filters等動畫效果不會引起回流重繪

二、 JS操作避免回流、重繪

1.避免使用JS一個樣式修改完接著改下一個樣式，最好一次性更改CSS樣式，或者將樣式列表定義為class的名稱
2.避免頻繁操作DOM，使用文檔片段創(chuàng)建一個子樹，然后再拷貝到文檔中
3.先隱藏元素，進行修改后再顯示該元素，因為display:none上的DOM操作不會引發(fā)回流和重繪
4.避免循環(huán)讀取offsetLeft等屬性，在循環(huán)之前把它們存起來
5.對于復(fù)雜動畫效果,使用絕對定位讓其脫離文檔流，否則會引起父元素及后續(xù)元素大量的回流

總結(jié)：

回流在瀏覽器中屬于一種用戶主導(dǎo)的操作，所以知道如何去改進回流時間以及知道各種文檔屬性（DOM節(jié)點深度，css的渲染效率，各種各樣的樣式改變）對回流時間的影響對于前端開發(fā)來講是很有幫助的。有時即便是回流一個單一的元素，也可能要求它的父元素以及任何跟隨它的元素也產(chǎn)生回流。例如需要改變某個元素的背景，這就不涉及該元素的屬性，所以只發(fā)生重繪。

看完上述內(nèi)容，你們對JavaScript中回流（重排）與重繪的含義及使用有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

新聞名稱：JavaScript中回流（重排）與重繪的含義及使用-創(chuàng)新互聯(lián)
文章出自：http://chinadenli.net/article48/hphhp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動網(wǎng)站建設(shè)、做網(wǎng)站、搜索引擎優(yōu)化、用戶體驗、定制網(wǎng)站、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)