.hide（）。show（）在單個事件中導致重新渲染？

突擊問題。如果我在單個click事件中撥打element.hide(); ....something...... element.show();，它會執行任何操作嗎？我的意思是，不必要的閃爍，沉重的計算等等？爲什麼我需要這個？因爲在我的代碼中隱藏所有內容並決定顯示的內容非常優雅。.hide（）。show（）在單個事件中導致重新渲染？

UPDATE：

好吧，夥計們，昨天我看着jQuery的源自己和發現（如@Msencenb說）隱藏/顯示僅僅是display:none的包裝。

所以我更新我的問題：請問瀏覽器上做一些display:block立即重新描繪和display:none重新計算，然後立即重新渲染和重新計算在一個.click(function() { ... })？或者它檢測到click函數後沒有任何變化，並且什麼都不做？

來源

2014-11-24 Denis

找出這樣的事情的最好方法是嘗試一下：http://jsfiddle.net/rud9j0h7/ – dshapiro 2014-11-24 20:21:41

.hide（）事件只是添加'display'：'none'css屬性的一個包裝。從性能角度來看，這意味着瀏覽器只需要在內容再次可見時重繪它，這將高度依賴於您實際渲染的內容。 Chrome dev tools has some really cool stuff for profiling.

就不必要的閃爍而言，您應該查看回調。大多數jQuery的函數採用可選的回調函數，該函數在函數完成後運行。

$(function() { 
    $(".toggle").click(function() { 
     $(".hideme").hide(function() { 
     $(".hideme").show(); 
     }); 
    }); 
});

Here's a simple example using hide/show

來源

2014-11-25 00:09:27 Msencenb

謝謝你的信息，我更新了我的問題。 – Denis 2014-11-25 11:40:53

AFAIK瀏覽器不會重新繪製，直到它完成當前代碼的執行。這看起來很合理，因爲你可能會單獨設置各種樣式屬性，並且不希望瀏覽器在所有這些中重新繪製。但是，我無法在短時間內找到任何支持此索賠的文檔。

編輯：您可能想要細讀this question。

來源

2014-11-25 12:00:12 hon2a

.hide（）。show（）在單個事件中導致重新渲染？

回答

相關問題