1. 程式人生 > >display和visibility的區別以及迴流和重繪

display和visibility的區別以及迴流和重繪

display:none會脫離文件流,不佔據頁面空間;

visibility:hidden,只是隱藏內容,並沒有脫離文件流,會佔據頁面的空間。

講述迴流以及重繪之前需要先了解頁面在文件載入完成之後到完全顯示中間的過程:

1.根據文件生成DOM樹(包括display:none的節點)

2.在DOM樹基礎上根據節點的幾何屬性(margin/padding/width/height等)生成render樹(不包括display:none、head節點但會包含visibility:hidden節點)

3.在render樹基礎上進行一步渲染包括color,outline等樣式


reflow:當render樹中的一部分或者全部因為大小邊距等問題發生改變而需要重建的過程叫做迴流。

repaint:當元素的一部分屬性發生變化,如外觀背景色不會引起佈局變化而需要重新渲染的過程叫做重繪。


display:none會引起迴流和重繪,visibility:hidden會引起重繪