javascript - 减少jQuery DOM操作中的CPU使用率

Question

我可以对这段代码做些什么来使其更高效地使用CPU（现在已达到我的CPU的80％）？我昨天学习了javascript，所以可能只是我没有经验。此代码控制相当大的图块阵列的过渡。鼠标悬停时，图块翻转并在鼠标悬停时翻转。一次将有多个线程运行，我看不到有解决方法。
我之所以使用此脚本，是因为我需要以webkit-transitions不支持的方式精确控制过渡的功能。希望注释足够有意义，以使您对代码有所了解。该功能是实时的，因为在加载页面时会在javascript中创建图块数组。之后，将不再创建图块。

来源可以在这里找到。我还没有工作上载。
wikisend.com/download/811662/test.zip

谢谢。

    //By default, javascript will not complete a hover transition unless the mouse 
remains over the entire duration of the transition. This scrip will force the hover 
transition to completion.
$(document).ready(function() {
    $('.tile').live('mouseenter mouseleave', (function() {

    if (event.type == 'mouseover') {
        var $this = $(this);
        $this.addClass('hover');

        //prevents mouseleave from happening when user re-enters after exiting before time is up
        $this.data('box-hover-hovered', false);
        //tile is not ready for leaving hover state
        $this.data('box-hover-not-ready', true);
        var timeout = setTimeout(function() {
            //box will be ready after time is up
            var state = $this.data('box-hover-hovered');
            if (state) { //this is entered when user exits before
                //time is up
                $this.removeClass('hover');
            }
            $this.data('box-hover-not-ready', false);
            //it's ready
        }, 400); // .1 second
        // Remove previous timeout if it exists
        clearTimeout($this.data('box-hover-timeout'));
        //stores current timer id (current timer hasn't executed yet)
        $this.data('box-hover-timeout', timeout);
    }

    else {
        var $this = $(this);

        // If not not-ready, do nothing
        // By default, the value is `undefined`, !undefined === true
        var not_ready = $this.data('box-hover-not-ready');
        if (!not_ready) {
            //if user remains hovering until time is up.
            $this.removeClass('hover');
        } else {
            //user would not have completed the action
            $this.data('box-hover-hovered', true);
        }
    }
}));
});​

Answer 1

好的，如果您想要做的是确保在悬停之前完成悬停过渡的完成，您可以这样进行：

$(document).ready(function() {
    $(document.body).on('mouseenter mouseleave', '.tile', function(event) {
        var $this = $(this);
        if (event.type == 'mouseenter') {
            $this.data("hovering", true);
            if (!$this.hasClass('hover')) {
                $this.addClass('hover');
                var timeout = setTimeout(function() {
                    $this.removeData("timer");
                    if (!$this.data("hovering")) {
                        $this.removeClass('hover');
                    }
                }, 400);
                $this.data("timer", timeout);
            }
        } else {
            $this.data("hovering", false);
            // if no timer running, then just remove the class now
            // if a timer is running, then the timer firing will clear the hover
            if (!$this.data("timer")) {
                $this.removeClass('hover');
            }
        }
    });
});​

这是一个带有完整代码注释的有效演示： http://jsfiddle.net/jfriend00/rhVcp/

这是有关其工作原理的详细说明：


首先，我切换到 .on()，因为所有版本的jQuery现在都已弃用 .live()。您应该用静态的 document.body对象的最接近祖先替换 .tile。
该对象保留一个 .data("hovering", true/false)项，该项始终告诉我们鼠标是否在该对象上，而与 .hover类状态无关。当计时器启动时，这是必需的，因此我们知道此时需要将真实状态设置为什么。
当发生 mouseenter事件时，我们检查 hover类是否已经存在。如果是这样，则无事可做。如果 hover类不存在，则我们添加它。由于以前不存在，而我们只是添加了它，因此这是 hover过渡的开始。
我们为过渡的长度设置了一个计时器，并在对象上设置了一个 .data("timer", timeout)项目，以便将来的代码可以知道计时器已在运行。
如果在此计时器触发之前获取 mouseleave，我们将看到 .data("timer")存在并且我们将不执行任何操作（因此将完成过渡）。
当计时器触发时，我们执行 .removeData("timer")来摆脱该标记，然后查看是否仍在使用 .data("hovering")进行悬停。如果我们不再悬停（因为 mouseleave在计时器运行时发生），则执行 .removeClass("hover")将对象置于所需状态。如果碰巧仍在悬停，则不执行任何操作，因为我们仍在悬停，因此对象已经处于正确的状态。


简而言之，当我们启动悬停时，我们将设置悬停状态并启动计时器。只要计时器正在运行，我们就不会更改对象的状态。当计时器触发时，我们设置对象的正确状态（悬停或不悬停，具体取决于鼠标的位置）。这保证了悬停状态将至少在过渡时间量内保持打开状态，并且当经过最短时间（以便完成过渡）时，我们将更新对象的状态。

我已经非常小心地没有使用任何全局变量，因此它可以在多个 .tile对象上工作而在它们之间没有任何干扰。

在一个重要的设计点上，您永远不会获得一个以上的计时器，因为只有在不存在悬停类时才设置计时器，而现在我们只是添加它，并且一旦计时器运行，就永远不会删除悬停类，直到计时器完成。因此，一旦一个计时器运行，就没有代码路径可以设置另一个计时器。这简化了逻辑。这也意味着计时器仅从首次应用悬停类时开始运行，这保证了我们仅在首次应用悬停类时才强制执行时间。

至于性能，CSS过渡将占用任何CPU资源-这取决于浏览器的实现，对此我们无能为力。为了最大程度地减少CPU负载，我们所要做的就是确保在每次鼠标移入/移出时都进行尽可能小的操作，并尽可能避免DOM操作，因为它们通常是最慢的操作类型。在这里，我们仅在 hover类尚不存在时添加它，而仅在时间到期且鼠标不再位于其上时才将其删除。其他所有内容只是 .data()操作，它们只是javascript哈希表操作，应该非常快。这仅在需要时才触发浏览器重排，这是我们能做的最好的事情。

选择器性能在这里不应该成为问题。这是委派的事件处理，唯一正在实时检查（在事件发生时）的选择器是 .tile，这是一个非常简单的检查（只需检查 event.target是否具有该类-无需其他任何对象）对性能很重要的一件事是为委托事件绑定选择一个尽可能接近“ .tile”的祖先，因为这样可以在处理事件之前花更少的时间在事件上冒泡，并且您不会最终遇到条件那里有很多委托事件都绑定到同一个对象，这可能很慢，这就是为什么不建议使用 .live()的原因。