css display vs visibility

手头一个网页碰到一个小小的毛病，网页内有多个div，每个div下有一个包含一些浮动按钮的div，效果就是那种鼠标浮动上去就显示浮动按钮，移开就隐藏

代码很简单(mootools)：

el.addEvents({
    'mouseover': function() {
        buttons.setStyle('display', '');
    },
    'mouseout': function() {
        buttons.setStyle('display', 'none');
    }
});

小毛病就是，用鼠标在这些div上快速晃来晃去，偶尔会出现卡一下的情况，就是延迟一点点时间再显示，或者根本来不及显示，最严重的移动进去都不显示，要重新再进去才恢复正常。但是按照平时操作时候的鼠标移动，不这么极端的干，实际上工作还是正常的

分析一番后猜测，这个毛病是由于dom reflow的毛病，老练的js程序员都应该知道，dom reflow是需要尽量避免的，设置display为none就会引起一次reflow操作，快速的mouseover再mouseout就会发生两次reflow，有可能会出现偶尔卡一下的现象

但是visibility hidden就不会引发reflow，仅仅会repaint一次，相对来说就快速多了

el.addEvents({
    'mouseover': function() {
        buttons.setStyle('visibility', 'visible');
    },
    'mouseout': function() {
        buttons.setStyle('visibility', 'hidden');
    }
});

代码改成这样之后，快速晃动鼠标就再没有出现卡的毛病，以后如果可以用visibility的情况下，尽量用visibility，能省则省，js程序员都是吝啬鬼 ;)