可見性：隱藏和顯示之間的性能差異：無

Question

我想簡化我的 jQuery Backbone.js Web 應用程序中的事情。 一種這樣的簡化是我的菜單和對話框小部件的行為。

以前我在開始時創建了菜單的 div 框並使用display: none; opacity:0;隱藏它們display: none; opacity:0; display: none; opacity:0; . 當我需要菜單時，我將其樣式更改為display:block然后使用 jQuery ui position 實用程序來定位 div 框（因為無法定位帶有display:none元素），完成后，最終將其樣式更改為opacity:1 .

現在我只想用visibility:visible visibility:hidden隱藏它們，當我需要一個時，我使用位置實用程序，然后將樣式更改為visibility:visible 。 當我開始使用這種新方法時，我將在整個 Web 應用程序會話中擁有大約 10 個隱藏但占用空間的 div 框，這與之前使用display:none隱藏的 div 框形成對比。

我的新方法有什么影響？ 它會在任何方面影響瀏覽器性能嗎？

Answer 1

display:none; 元素不在渲染樹 all 中，因此它們的表面價值會更好。

我懷疑您是否會因此而遇到任何真正可見的性能問題。 如果您需要opacity: 0或visibility: hidden因為它們的功能，那么就使用它們。 如果您不需要該功能，請使用display: none;

Answer 2

如果您通過 javascript 在可見和不可見狀態之間切換，那么可見性：隱藏應該是更好的表現。 因為它在可見和隱藏狀態下總是占用相同的空間，所以每次讓它看起來消失時，它不會導致它下面的元素回流。 對於 display:none ，您將它從文檔流中刪除，然后當您將其設置為 display:block 時，您正在重新渲染它並將該元素下方的所有內容向下推，基本上將所有內容重新放置。

但是，如果您正在執行諸如在按下按鈕時切換可見狀態之類的操作，那么您確實應該使用適合您需求的方式而不是性能更好的方式，因為在這種情況下性能差異可以忽略不計。 當您以每秒 20 次左右的速度使用 dom 進行動畫處理時，您可能會擔心可見性的性能：隱藏與顯示：無。

Answer 3

visibility: hidden不會導致文檔重排，而display: none 。

display: none ：HTML 引擎將完全忽略該元素及其子元素。 引擎不會忽略標記為visibility: hidden元素，它將對元素及其子元素進行所有計算，唯一的例外是元素不會呈現到視口。

如果需要位置和尺寸屬性的值，則必須使用visibility: hidden ，並且您必須處理視口中的空白區域，通常是將該元素包裝在另一個寬度和高度為 0 且“溢出：隱藏”的元素中。

display:none將從文檔的正常流中刪除元素，並將元素及其子元素的位置/高度/寬度值設置為 0。 當元素display屬性更改為none以外的其他值時，它會觸發完整的文檔重流，這對於大文檔來說可能是一個問題 - 有時在功能有限的硬件上呈現不太大的文檔。

display: none是在視口上隱藏元素時使用的自然和合乎邏輯的解決方案， visibility: hidden應該在需要的地方/時間用作后備。

編輯：正如@Juan 所指出的，當您需要向 DOM 樹添加許多元素時，可以選擇display: none 。 visibility: hidden將觸發添加到樹中的每個元素的重新流，而display: none則不會。

Answer 4

我不知道display:none和visibility:hidden之間有任何性能差異 - 即使有，對於少至 10 個元素，它也完全可以忽略不計。 正如您所說，您的主要關注點應該是您是否希望元素保留在文檔流中，在這種情況下， visibility是更好的選擇，因為它維護了元素的框模型。

Answer 5

好吧， display: block和visibility: hidden之間的主要性能區別在於，如果您有一個包含100000 個元素的列表，那么visibility: hidden不會使您免於DOM 掛起，因為它不會從DOM 中刪除元素。 visibility: hidden行為就像opacity: 0 + pointer-events: none 。 display: none作用類似於Element.remove() 。

實例： https : //jsfiddle.net/u2dou58r/10/

Answer 6

根據個人經驗，在一個簡單的靜態頁面上嘗試了這兩種方法，其中一個表單位於“隱藏”按鈕下方， visibility: hidden表現完美，而display: none導致可點擊按鈕在點擊時輕微跳躍，就好像它試圖顯示隱藏按鈕一樣一毫秒。

Answer 7

好吧，可見性：無仍然使用 div 的空間。 所以你可以跳過定位部分，因為它的位置已經分配（這樣可以獲得更好的性能）。

但是我以某種方式猜測您需要使用 display:none 方法在觸發“顯示”事件時正確分配空間。

Answer 8

我認為這可能與這個問題有某種關系： CSS Properties: Display vs. Visibility

我只引用有趣的部分：

該元素永遠不會從 DOM 層次結構中刪除。 使用 display:none 時，所有塊級顯示“樣式”都完全“隱藏”，而使用可見性：隱藏； 元素本身是隱藏的，但它仍然占據 DOM 中的視覺空間。

所以在瀏覽器性能方面應該沒有真正的區別，因為兩個版本仍然在 DOM 層次結構中。 這些屬性只影響一個元素是如何顯示的問候的DOM。