也許，你們在面試的時候，被問到過，隱藏元素有幾種方法？
我總結了一下，不保證全面，有下列幾種方法：
- visibility: hidden; 這個屬性只是簡單的隱藏某個元素，但是元素佔用的空間任然存在
- opacity: 0; CSS3 屬性，設置 0 可以使一個元素完全透明
- position: absolute; 設置一個很大的 left 負值定位，使元素定位在可見區域之外
- display: none; 元素會變得不可見，並且不會再佔用文檔的空間。
- transform: scale(0); 將一個元素設置爲縮放無限小，元素將不可見，元素原來所在的位置將被保留
-
HTML5 屬性,效果和 display:none;相同，但這個屬性用於記錄一個元素的狀態
- height: 0; 將元素高度設爲 0 ，並消除邊框
- filter: opacity(0%); CSS3 屬性，將一個元素的透明程度設置爲 0
站在面試官的角度（沒當過，我瞎想的），
首先，考察你對CSS屬性的瞭解
其次，進一步詢問它們的區別，考察你對頁面結構的理解
最後，頁面結構改變會影響什麼，重排和重繪啊。
渲染機制
簡單看一下渲染機制，瞭解下重排和重繪。
- 渲染引擎解析HTML文檔，並將各標記轉化成DOMTree上的DOM節點
- 同時進行解析外部CSS以及樣式內部的樣式數據，形成Style Rules
- DOMTree和Style Rules合併在一起創建另一種樹結構 Render Tree
- Render Tree構建完成後，進入Layout，也就是爲每個節點分配一個出現在屏幕上的確切座標
- 最後進入Painting，最後遍歷一遍Render Tree，根據樣式規則將節點繪製到確定座標上
- 呈現在屏幕上
重排（也稱迴流）
一些改變導致DOM Tree的變化，需要重新計算每個節點在屏幕上的位置，這就是Reflow（重排），同時重排一定導致重繪。
一些會導致重排的操作：
- ADM DOM節點，會導致Reflow或Repaint
- 移動DOM位置
- 修改CSS樣式，改變大小，激活僞類
- Resize窗口或者滾動
- 修改默認字體（代價很大）
- 一些常用且會導致迴流的屬性和方法：
clientWidth、clientHeight、clientTop、clientLeft
offsetWidth、offsetHeight、offsetTop、offsetLeft
scrollWidth、scrollHeight、scrollTop、scrollLeft
scrollIntoView()、scrollIntoViewIfNeeded()
getComputedStyle()
getBoundingClientRect()
scrollTo()
重繪
當頁面中元素樣式的改變並不影響它在文檔流中的位置時（例如：color、background-color、visibility等），瀏覽器會將新樣式賦予給元素並重新繪製它，這個過程稱爲Repaint（重繪）。
一些會導致重繪的操作：
- DOM改動（Reflow一定引起Repaint）
- CSS改動
如何減少重排重繪
重排重繪在大部分時候是不可避免的，在性能消耗方面，重繪還好，重排較大，尤其頁面元素過多後，會造成更大的性能損耗。所以減少重排重繪是很有必要。
CSS:
- 避免使用table佈局，對Render Tree的計算通常只需要遍歷一次就可以完成，但table及其內部元素除外，他們可能需要多次計算，通常要花3倍於同等元素的時間，這也是爲什麼要避免使用table佈局的原因之一。
- 避免使用CSS表達式，calc，涉及計算
- 使用position：absolute|fixed 或者float 佈局要操作的元素脫離文檔流
- Flex佈局，不明白什麼原理，但是測試過，發現是可以減少重排的
JavaScript:
- 避免多次操作樣式，一次性寫入style，或者修改class
- 避免多次操作DOM，可以多使用documentFragment
- 避免頻繁讀取會引發迴流重繪的屬性，獲取及時保存吧
- 進行動畫時，使用transform 動畫由GPU線程控制，不佔用用來渲染和執行JS的主線程，支持硬件加速
這些方法的區別和各自影響
visibility: hidden、opacity: 0、filter: opacity(0%)這幾個屬性都將元素隱藏，但它佔的位置還在那裏，所以不涉及重排
display: none、 height: 0改變元素的佈局，會造成重排
position: absolute; 設置一個很大的 left 負值定位，使元素定位在可見區域之外，這可以只會造成absolut佈局內的元素重排而不是整體， 減少重排
transform: scale(0) 由GPU線程控制，支持硬件加速
比較推後面兩種隱藏方式。
請大家一定保持批判思維觀看，網上的信息不一定完全正確，畢竟你永遠不知道在寫文章的人是兔子還是鹹魚！
