這篇文章主要講解了“javascript中回流是什么”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“javascript中回流是什么”吧！

興隆臺網站制作公司哪家好，找創(chuàng)新互聯公司！從網頁設計、網站建設、微信開發(fā)、APP開發(fā)、自適應網站建設等網站項目制作，到程序開發(fā)，運營維護。創(chuàng)新互聯公司于2013年成立到現在10年的時間，我們擁有了豐富的建站經驗和運維經驗，來保證我們的工作的順利進行。專注于網站建設就選創(chuàng)新互聯公司。

在javascript中，回流也叫做重排，是指當渲染樹中的一部分或全部因為元素的規(guī)模尺寸、布局、隱藏等改變時，瀏覽器重新渲染部分DOM或全部DOM的過程；簡單來說，就是重新排版整個頁面。

本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。

簡單先了解一下瀏覽器的渲染過程（圖片來自于網絡）

瀏覽器生成渲染樹的過程（圖片來自于網絡）

回流

當渲染樹中的一部分或全部因為元素的規(guī)模尺寸、布局、隱藏等改變時，瀏覽器重新渲染部分DOM或全部DOM的過程。

回流也被稱為重排，其實從字面上來看，重排更容易讓人形象易懂（即重新排版整個頁面）。

重繪

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

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

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

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

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

如何減少回流、重繪？

一、 CSS中避免回流、重繪

1.盡可能在DOM樹的最末端改變class
2.避免設置多層內聯樣式
3.動畫效果應用到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.對于復雜動畫效果,使用絕對定位讓其脫離文檔流，否則會引起父元素及后續(xù)元素大量的回流

感謝各位的閱讀，以上就是“javascript中回流是什么”的內容了，經過本文的學習后，相信大家對javascript中回流是什么這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯，小編將為大家推送更多相關知識點的文章，歡迎關注！