切换到全屏时 Javascript/jQuery 减速答案

【问题标题】：Javascript/jQuery slowdown when switching to full screen切换到全屏时 Javascript/jQuery 减速
【发布时间】：2013-11-07 12:46:48
【问题描述】：

我有一些来自 Firefox 的奇怪行为，我正在构建一个单页作品集，作为一名平面设计师，编码一直很困难。我想平滑地控制导航，然后为所有元素添加缩放（最初为 1920x1080 全屏设计）。讲师丢了一个炸弹，它也需要垂直滚动，我正在尝试让垂直导航工作。

问题是当我切换到全屏时，大多数导航代码似乎在执行之前需要很长时间。这只发生在我切换到全屏时。如果我切换并刷新，那就没问题了。我真的很想知道是什么让整个事情变慢了。

我尝试过没有插件的安全模式。我正在使用带有 Firebug 的 Firefox 24.0 来解决问题。

我创建了一个代码小提琴（我的第一个，它已经坏了）： http://jsfiddle.net/jeffreyknipe/xfjmC/1/

滚动的代码如下：

    function navTo(horizontal, vertical) {
        browserWidth = $(window).innerWidth();
        browserHeight = $(window).innerHeight();
        newRatio = browserWidth / 1920;

        $('html body div#full_site section#pages_section').animate({
            marginLeft: '-' + browserWidth * horizontal,
            marginTop: (browserWidth / 16 * 9) * vertical
        }, 1000);
        if (horizontal == 0) {
            $('#menuspace #floating_topbar #menuzone').animate({
                marginRight: 0
            });
        } else {
            $('#menuspace #floating_topbar #menuzone').animate({
                marginRight: (newRatio * (-340))
            });
        };
    };

我知道那里的编码人员会为代码效率低下而皱眉，但我们将不胜感激任何建议。最大的就是全屏代码变慢了。

谢谢。

【问题讨论】：

您可以尝试加快速度的一件事是摆脱选择器上的html 和body，因为所有元素都将它们作为父元素。然后，您可以尝试摆脱 div#full_site 中的 div 和 section#pages_section 中的 section，因为 ID 是唯一的，并且您不需要更具体（除非您有意增加其特异性）。出于同样的原因，您应该能够摆脱#full_site 和#menuspace #floating_topbar 的两个实例，除非您专门针对不同的页面。这应该会减少他们需要的检查数量。

标签： javascript jquery css animation fullscreen

【解决方案1】：

在全屏切换时为项目或位置的更改设置动画时出现问题。我切换到使用 .css 而不是 .animate 设置新值（我确实希望它动画到新位置）但由于这里的动画不是一个交易破坏者，它解决了我是一个快乐的露营者的问题。

我不得不假设它想要动画，但是在更改过程中，java 脚本引擎或 Firefox 中的某些东西太忙了，这几乎是一个错误，但我无法隔离脚本卡住时发生的事情，所以我可以'举报吧。

【讨论】：