JQuery 动画滞后于第一个 运行

Question

我正在解决 UI 中的一个错误，第一次打开菜单时速度很慢。 1-3 秒的任何时间。随后的开张速度与您预期的一样快。

下面您将看到代码，然后是一些 javascript 配置文件。您会注意到每个第一个 运行（在页面加载后）(program) 位于顶部并且占用了超过 500 毫秒的总时间。在随后的 运行 秒（第二、第三）中，您将在顶部看到 (idle)，而 (program) 只需要 40-90 毫秒。

尽管我只在下面提供了 5 个数据点，但我已经 运行 这几十次了，而且非常一致。

谁能解释一下，或者至少给我一些关于如何进一步排除故障的提示？

编辑：我应该注意，下面的性能配置文件在 Chrome Canary 中。 Coherent中的实际代码运行sUI在Unity中延迟成倍增加

---

代码：

function openPane(callback) {
    console.profile('openPane');
    if (!$pane.is(':visible')) {
        $pane.css('display', 'block');
    }

    if (typeof $slideinc.length !== 'undefined') {
        for (i = 0; i < $slideinc.length; i++) {
            // This element has been configured to slide with the pane element
            if ($dir == "left") {
                $($slideinc[i]).animate({
                    left: convertPXtoVW((parseFloat($slideorigins[i].left) + parseFloat($pane.outerWidth(true)) +
                                         parseFloat($paneorigin.left)).toString())
                }, function() {
                });
            } else {
                $($slideinc[i]).animate({
                    right: convertPXtoVW((parseFloat($slideorigins[i].right) + parseFloat($pane.outerWidth(true)) +
                                        parseFloat($paneorigin.right)).toString())
                }, function() {
                });
            }
        }
    }

    // Depending on the configured direction animate left or right
    if ($dir == "left") {
        $pane.animate({ left: convertPXtoVW($paneorigin.left) }, function () {
            console.profileEnd();
        });
    } else {
        $pane.animate({ right: convertPXtoVW($paneorigin.right) }, function () {
            console.profileEnd();
        });
    }
    // Attribute added to determine when pane is opened
    $pane.attr('data-pane-open', true);
}

---

配置文件（第一页加载）

第一个运行:

第二个运行:

---

配置文件（第二页加载）

---

第一个运行:

第二个运行:

第三个运行:

Answer 1

原来是几个缩略图没有正确调整大小。它们是 4k 纹理，每个大约 40 兆。适当调整大小后，性能问题就消失了。