javascript - jQuery 的交换方法时间成本

Question

我在 firebug 中运行分析器，发现 UI 中运行时间成本最高的函数是 jQuery 的 .swap()。我可以看到这必须与 .css() 方法相关联。

这是我的分析器的图像:

显然，为了提高这里的速度，我需要减少调用 .css()，但这确实是一个项目，因为我用它来设置和纠正不同元素的样式，这些元素必须是完全动态的。

有没有更好的方法来加快速度？

我正在使用jquery.1.4.2。我无法继续使用 1.4.4，因为它出于某种原因破坏了我的很多脚本。将交换方法从 1.4.4 扩展到 1.4.2 有好处吗？或者这会带来更多的不兼容性？

什么是交换方法以及为什么它如此耗时？

Answer 1

从 jQuery UI 代码中可以看出，.swap() 并不是直接被调用的，这是 jQuery 框架本身中唯一使用 .swap() 的地方 直接是检索元素的计算高度/宽度时的 .height() 和 .width() 调用。

当无法直接从浏览器获取大小时，它的作用是暂时将样式替换为以下样式:

cssShow = { position: "absolute", visibility: "hidden", display: "block" };

然后在更改后的样式状态下执行通常的内部 getWH() 函数，并恢复。

借用jQuery的部分代码:

jQuery.each(["height", "width"], function( i, name ) {
    jQuery.cssHooks[ name ] = {
        get: function( elem, computed, extra ) {
            var val;

            if ( computed ) {
                if ( elem.offsetWidth !== 0 ) {
                    val = getWH( elem, name, extra );

                } else {
                    jQuery.swap( elem, cssShow, function() {
                        val = getWH( elem, name, extra );
                    });
                }

                   // etc.

jQuery UI 到处都使用 height() 和 width() 函数，因此 .swap() 函数的出现也就不足为奇了在个人资料中占有很高的地位。