使用Jquery的Firefox、javascript和iFrame性能

我有一点jquery javascript性能问题，特别是与Firefox相关的问题

我们有一组vimeo嵌入，ID通过json文件拉入。每次单击都会显示一个新的视频。播放视频后，移除容器并将标题云放回。经过一定数量的轮次之后，Firefox的性能严重下降，您会得到无响应的脚本错误。这在任何其他浏览器上都不会发生。此外，FF中的分析器似乎并没有指出经济放缓的根本原因

我相信这是由于iframe性能差以及FF如何处理iframe造成的，但我不能完全确定这一点。我正在做的其他事情都是一样的，主要是库存jquery函数，如empty、remove、prepend等

我已经实现了一个点击计数器，它将在一定数量的点击后刷新页面。这解决了问题，但这是一个我非常不喜欢的老套解决方案。我很想了解这一问题的根本原因，以及如何解决这一问题的建议

以下是指向该站点的链接和提到的特定部分：

这不是全部代码，但这是每次单击都会调用的部分

此外，我还尝试在iframe中替换src=，但性能仍然会下降

编辑：我可以确认这不是内存泄漏，我使用了大约：内存，并且在安全模式下禁用了插件，我得到了合理的内存使用率：

359.11 MB── 私有的 361.25 MB── 居民 725.54 MB── vsize

vimeo嵌入中的某些东西正在减慢javascript引擎的速度，但这不是内存泄漏。另外，我可以通过刷新页面来解决这个问题，这也证实了这一点。如果是内存泄漏，我将不得不完全关闭FF

function getIframeContent(vid) {
    mangle_vid_id = vid;
    return '<div class="vimeoContainerflex"><div class="vimeoContainer"><iframe class="vimeo" style="z-index:1;" width="100%" height="100%" frameborder="0" allowfullscreen="" mozallowfullscreen=""                  webkitallowfullscreen="" src="//player.vimeo.com/video/' + mangle_vid_id + '?api=1&title=0&color=89ff18&amp;byline=0&amp;portrait=0&amp;autoplay=1"></iframe></div></div>';
}

function show_titles() {
    $('.mangle-btn').hide();
    $('.vimeoContainerflex').remove();
    $('span.mangle').hide();
    if ($('#mangle-titles').length < 1) {
        $('#wongdoody').prepend(wd_titles_content);
    }

    $('#arrow').show();

    if (clicks > 12) {
        location.reload();
    }

    $('#mangle-titles span').click(function() {
        clicks = clicks + 1;
        $('#mangle-wrapper').remove();
        var vidID = $(this).attr('data-id');
        if ($('.vimeoContainer').length < 1) {
            if (vidID == "home") {
                $('#wongdoody').prepend(getIframeContent(getRandom()));
            } else {
                $('#wongdoody').prepend(getIframeContent(vidID));
            }
        }
        $('#arrow').hide();
        vimeoAPI();
    });

    $('#mangle-titles span').not('noscale').each(function() {
        var _this = $(this);
        var classname = _this.attr('class');
        var scaleNum = classname.substr(classname.length - 2);
        var upscale = parseInt(scaleNum);
        var addition = upscale + 5;
        var string = addition.toString();

        _this.hover(
            function() {
                _this.addClass('scale' + string);
            },
            function() {
                _this.removeClass('scale' + string);
            }
        );
    });
}

function vimeoAPI() {
    var player = $('iframe');
    var url = window.location.protocol + player.attr('src').split('?')[0];
    var status = $('.status');

    // Listen for messages from the player
    if (window.addEventListener) {
        window.addEventListener('message', onMessageReceived, false);
    } else {
        window.attachEvent('onmessage', onMessageReceived, false);
    }

    // Handle messages received from the player
    function onMessageReceived(e) {
        var data = JSON.parse(e.data);

        switch (data.event) {
            case 'ready':
                onReady();
                break;
            case 'finish':
                onFinish();
                break;
        }
    }

    // Helper function for sending a message to the player
    function post(action, value) {
        var data = {
            method: action
        };

        if (value) {
            data.value = value;
        }

        var message = JSON.stringify(data);
        if (player[0].contentWindow != null) player[0].contentWindow.postMessage(data, url);
    }

    function onReady() {
        post('addEventListener', 'finish');
    }

    function onFinish() {
        setTimeout(show_titles, 500);
    }
}

---

我建议尝试重新使用iframe，而不是擦拭和重新添加。如果做不到这一点，我想你可能会走运。关闭iFrame的方法很好；您运行的浏览器不是。

问题的一部分可能是您不断向跨距中添加越来越多的单击处理程序。在每部电影结束后，onFinish函数再次调用show_titles，这将向$'mangle-titles span'跨度附加一个新的=附加的单击处理程序。jQuery不会删除以前附加的处理程序

尝试将show_titles函数拆分为两个。初始标题只能调用一次：

function init_titles() {
    if ($('#mangle-titles').length < 1) {
        $('#wongdoody').prepend(wd_titles_content);
    }

    $('#mangle-titles span').click(function() {
        $('#mangle-wrapper').remove();
        var vidID = $(this).attr('data-id');
        if ($('.vimeoContainer').length < 1) {
            if (vidID == "home") {
                $('#wongdoody').prepend(getIframeContent(getRandom()));
            } else {
                $('#wongdoody').prepend(getIframeContent(vidID));
            }
        }
        $('#arrow').hide();
        vimeoAPI();
    });

    $('#mangle-titles span').not('noscale').each(function() {
        var _this = $(this);
        var classname = _this.attr('class');
        var scaleNum = classname.substr(classname.length - 2);
        var upscale = parseInt(scaleNum);
        var addition = upscale + 5;
        var string = addition.toString();

        _this.hover(
            function() {
                _this.addClass('scale' + string);
            },
            function() {
                _this.removeClass('scale' + string);
            }
        );
    });
}

function show_titles() {
    $('.mangle-btn').hide();
    $('.vimeoContainerflex').remove();
    $('span.mangle').hide();
    $('#arrow').show();
}

---

您正在使用eventListeners重载窗口。每次用户单击视频时，您都会将一个事件附加到窗口，该窗口在您每次收到消息时都会触发

您可以通过添加console.logFire！，例如，在onMessageReceived的开头。您将看到，在用户对视频执行了一些单击之后，该函数会被触发很多次

这肯定会对绩效产生影响

---

希望这能有所帮助。

当您禁用firebug时会发生吗？是的，在大多数版本的firefox上，osx和windows上都会发生这种情况。我认为这与FF javascript引擎和垃圾收集有关。我认为你的假设也是正确的。可能是FF内存泄漏导致了这种情况。这就是我在很多月前改用Chrome浏览器的原因——没那么糟糕：幸运的是，这是一个面向公众的网站，并告诉最终用户，他们不能使用像Firefox这样的主流浏览器，因为该网站不会很受欢迎。希望更新版本的FF能够解决这个问题。如果其他人有任何想法，我愿意接受建议。到目前为止，点击后重新加载页面的解决方法还不错，但不是一个理想的解决方案。谢谢我现在可以确认这不是内存泄漏，我禁用了所有加载项，在安全模式下启动并完成了步骤。关于：内存显示：359.11 MB── 私人361.25 MB── 常驻725.54 MB── vsize和taskmgr对此进行了确认。这是一个JS引擎性能问题，但不是FF内存泄漏。不幸的是，我已经尝试了该解决方案，但没有解决问题。到目前为止，经过一定的点击，它只是刷新页面，这似乎解决了问题。但仍然非常不幸……这就是答案，当我将所有内容更改为bind并将其放在init函数中时，性能问题就消失了。谢谢你的帮助，真是个愚蠢的错误。