Javascript 为什么实现更快:使用offsetWidth和offsetHeight隐藏?

Javascript 为什么实现更快:使用offsetWidth和offsetHeight隐藏?,javascript,jquery,performance,dom,Javascript,Jquery,Performance,Dom,所以我翻阅了一些旧的jquery发行说明,发现了这个 This is how the logic has changed: * In jQuery 1.3.1 (and older) an element was visible if its CSS “display” was not “none”, its CSS “visibility” was not “hidden”, and its type (if it was an input) was not “hidden”. * I

所以我翻阅了一些旧的jquery发行说明,发现了这个

    This is how the logic has changed:
* In jQuery 1.3.1 (and older) an element was visible if its CSS “display” was not “none”, its CSS “visibility” was not “hidden”, and its type (if it was an input) was not “hidden”.
* In jQuery 1.3.2 an element is visible if its browser-reported offsetWidth or offsetHeight is greater than 0.
在发行说明中,他们这样做是出于性能原因

为什么以这种方式更改实现会带来这样的性能优势

您可以在中看到性能差异


嗯,他们基本上减少了支票的数量

v 1.3.1正在检查
样式.可见性
样式.显示
类型

v1.3.2只检查了
offsetWidth
offsetHeight
属性(我认为,这些属性在DOM实现中以某种方式被“缓存”)

v 1.3.1:

Sizzle.selectors.filters.hidden = function(elem){
    return "hidden" === elem.type ||
    jQuery.css(elem, "display") === "none" ||
    jQuery.css(elem, "visibility") === "hidden";
};

Sizzle.selectors.filters.visible = function(elem){
return "hidden" !== elem.type &&
    jQuery.css(elem, "display") !== "none" &&
    jQuery.css(elem, "visibility") !== "hidden";
};
v 1.3.2

Sizzle.selectors.filters.hidden = function(elem){
    return elem.offsetWidth === 0 || elem.offsetHeight === 0;
};

Sizzle.selectors.filters.visible = function(elem){
    return elem.offsetWidth > 0 || elem.offsetHeight > 0;
};