2010-03-30 110 views
44

我在迴流之間的差別有點不清楚+重繪(如果有什麼區別的話)迴流焊和重新焊接有什麼區別?

好像迴流可能會被轉移各種DOM元素,其中重繪只是呈現一個新的對象的位置。例如。刪除元素時會發生迴流,並在更改顏色時發生重繪。

這是真的嗎?

回答

55

此公告似乎涵蓋迴流VS重繪性能問題

http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/

至於定義,從該職位:

更改時 到A 重繪發生元素皮膚明顯改變 ,但不影響其佈局的 。

這方面的例子包括 outlinevisibilitybackground, 或color。根據Opera的說法,重畫是 昂貴,因爲瀏覽器必須 驗證DOM樹中所有其他 節點的可見性。

迴流是 甚至性能更重要 ,因爲它涉及的是 影響 頁面(或整頁)的一部分的佈局的變化。

實例引起迴流包括:添加或刪除內容,明確或含蓄地改變widthheightfont-familyfont-size等等。

瞭解哪些CSS-性能的影響重繪和審查在http://csstriggers.com

+0

完美,謝謝! – 2010-04-01 14:28:15

+0

正確的點。謝謝! – 2015-01-23 12:16:55

5

在我看來,重繪只是影響到DOM本身,而是迴流影響了整個頁面。

當某些更改只發生在其皮膚樣式(例如顏色和可見性)時發生重繪。

當DOM的頁面改變其佈局時發生迴流。

最近我發現一個網站可以搜索哪個屬性會觸發重繪或重排。 http://csstriggers.com/

4

這裏是另一個偉大的職位:http://blog.letitialew.com/post/30425074101/repaints-and-reflows-manipulating-the-dom

重繪,或重繪,通過所有的元素進入,並確定它們的可見性,顏色,外形等視覺​​樣式屬性,然後將其更新相關零件的屏幕。

迴流計算頁面的佈局。元素上的迴流會重新計算元素的維度和位置,並且還會觸發該元素的子元素,祖先和DOM元素之後出現的元素的進一步迴流。然後它調用最後的重繪。迴流非常昂貴。

它還引入了迴流時,以及如何最小化迴流。