JQuery animate 在第一次运行时滞后

Question

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

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

虽然我在下面只提供了 5 个数据点，但我已经运行了数十次，并且非常一致。

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

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

---

代码：

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 兆。正确调整它们的大小后，性能问题就消失了。