Question

突袭问题。如果我在单个element.hide(); ....something...... element.show();事件中致电click，它会做什么吗？我的意思是，不必要的闪烁，沉重的计算等？为什么我需要这个？因为在我的代码中隐藏所有内容并决定要显示的内容是非常优雅的。

更新

好的，伙计们，昨天我自己研究了jQuery资源，并发现（正如@Msencenb所说）hide / show只是display:none的包装。

所以我更新了我的问题：浏览器会在display:none上立即重新渲染和重新计算，然后立即在display:block .click(function() { ... })重新渲染和重新计算吗？或者它检测到click功能后没有任何变化，什么都不做？

Answer 1

.hide（）事件只是添加＆＃39;显示＆＃39;的一个包装。：＆＃39;无＆＃39; 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

Answer 2

AFAIK浏览器在完成当前代码的执行之前不会重新绘制。这看起来很合乎逻辑，因为您可能会单独设置各种样式属性，并且不希望浏览器在所有这些中间重新绘制。但是，我无法在短时间内找到任何支持此声明的文档。

修改：您可能希望仔细阅读this question。

单个事件中的.hide（）。show（）导致重新渲染？

2 个答案: