Javascript内存泄漏-画布HTML5 jQuery

我正在建立一个主要使用画布的网站，但是唯一涉及的cannvas是一条水平绘制的线，这条线大约有13000px长

当用户滚动我的窗口，然后沿m画布路径水平滚动

我注意到在firefox（6.0.2版）上，我的文档无法滚动。在我的控制台中，我接收到一些类似于（NS\u ERROR\u OUT\u MEMORY）的信息

在谷歌搜索后，我发现这可能是一个潜在的内存泄漏？这是如何工作的，是因为我编写代码的方式吗？或者这是一个浏览器/硬件问题

我正在初始化我的窗口调整等功能，我很好奇这是否可能有任何imapct

// Initate the plugin

$(window).resize(function() {
    if(this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function() {
        $(this).trigger('resizeEnd');
    }, 500);
});

$(window).bind('resizeEnd', function() {
    $("#path").scrollPath({drawPath: true, wrapAround: false});
});

$("#path").scrollPath({drawPath: true, wrapAround: false}); 

---

---

你做错了。这种做法只会带来痛苦

我不认为你有漏洞，你只是有一个程序的内存猪。除了内存之外，您还将面临巨大的性能问题。2D画布严重受填充率（绘制的像素数）影响。即使在速度很快的计算机上，绘制这么多像素也会非常慢

---

因此，不要制作巨大的画布，然后在其上滚动窗口/视口。相反，制作一个小画布，只渲染更大物体的可见部分。

你做错了。这种做法只会带来痛苦

我不认为你有漏洞，你只是有一个程序的内存猪。除了内存之外，您还将面临巨大的性能问题。2D画布严重受填充率（绘制的像素数）影响。即使在速度很快的计算机上，绘制这么多像素也会非常慢

---

因此，不要制作巨大的画布，然后在其上滚动窗口/视口。取而代之的是，制作一个小画布，只渲染一个更大东西的可见部分。

好的，现在我在谷歌上搜索了你使用的插件，我知道发生了什么

“线”实际上是一个形状，

scrollPath

正在为此生成一个漂亮的大画布。问题出在

滚动路径中。它会创建太多画布实例或泄漏某些内容

您应该更好地跟踪/记录错误，并将其报告给作者

从单个DOM元素创建路径的建议是无效的，因为我们知道您不是指一条直线。我不知道你的目标是什么，但是你可以用
来实现。好了，现在我在谷歌上搜索了你使用的插件，我知道发生了什么


“线”实际上是一个形状，
scrollPath
正在为此生成一个漂亮的大画布。问题出在
滚动路径中。它会创建太多画布实例或泄漏某些内容

您应该更好地跟踪/记录错误，并将其报告给作者

从单个DOM元素创建路径的建议是无效的，因为我们知道您不是指一条直线。我不知道你的目标到底是什么，但你也许可以通过
来实现。我不得不问：为什么你需要画布来画一条13000像素长的线？我正在创建一个基于角色的网站，当用户滚动角色时，角色从左向右走，然后上电梯到其他楼层等。我在画布上的经验是不存在的，但是：你为什么不做一个更小的画布，然后滚动背景呢？我们有很多方法可以建立这个网站，但对于我所需要的，画布路径似乎是当时最好的解决方案，这对我来说也是一个实验，所以我可以看到它的功能等，并想出类似这样的东西。我想尝试一下，但这应该已经告诉您，一个带有
边框顶部的html标记将是一个更好的解决方案。至于内存问题，您没有发布足够的代码让我们能够找出问题所在。您可能会在不知情的情况下创建大量画布，但更有可能的是，FF团队中的某个人并不希望画布不适合任何现有屏幕。画布不应该以这种方式使用。我必须问：为什么你需要画布来画一条13000像素长的线？我正在创建一个基于角色的网站，当用户滚动角色时，角色从左向右走，然后上电梯到其他楼层等。我在画布方面的经验是不存在的，但是：你为什么不做一个更小的画布，然后滚动背景呢？我们有很多方法可以建立这个网站，但对于我所需要的，画布路径似乎是当时最好的解决方案，这对我来说也是一个实验，所以我可以看到它的功能等，并想出类似这样的东西。我想尝试一下，但这应该已经告诉您，一个带有
边框顶部的html标记将是一个更好的解决方案。至于内存问题，您没有发布足够的代码让我们能够找出问题所在。您可能会在不知情的情况下创建大量画布，但更有可能的是，FF团队中的某个人并不希望画布不适合任何现有屏幕。Canvas不应该以这种方式使用。我完全同意，但如果这里有一个分析内存问题的答案，这样人们就可以知道Canvas是否可以处理13000px。这就是为什么我决定现在还不投票。[背景：]在我从事的一个软件项目中，我曾经创建了一个bug，它渲染了9000x2000像素的画布，并在绘制了一些内容后使整个画面变得模糊，它工作得很好（除了在一个好的CPU上大约需要一分钟）。非常同意，但是，如果这里有一个分析内存问题的答案，那么人们就会知道canvas是否能够处理13000px。这就是为什么我决定现在还不投票。[背景：]在我从事的一个软件项目中，我曾经创建了一个bug，它渲染了9000x2000像素的画布，并在绘制了一些内容后使整个画面变得模糊，它工作得很好（除了大约
        $(document).ready(init);

            $('.wrapper').css({'top' : '0px','left' : '0px'});
            $('.wrapper > div').css({'height' : + $(window).height() +'px'});

        function init() {


        // Set window height and width variables 
            var windowheight = $(window).height(); 
            var windowwidth = $(window).width(); 

            // Check monitor size and workot if incentives needs extra space etc 
            var bff = 4020 + (1993 - windowwidth);

            // Move divs into position 
            $('.culture').css('top', + - windowheight + 'px');
            $('.careerpath').css('top', + - windowheight + 'px');
            $('.training').css('top', + - windowheight + 'px');
            $('.apply').css('top' , + - windowheight + 'px');



            /* ========== DRAWING THE PATH AND INITIATING THE PLUGIN ============= */

            $.fn.scrollPath("getPath")
                // Move to 'start' element
                .moveTo(0, 0, {name: "div"})
                .lineTo(2400, 0, {name: "div1"})    

                .lineTo((bff-550), 0, {name: "div2"})

                .lineTo(bff, 0, {name: "div3"})

                .lineTo(bff, -windowheight, {name: "div4"}) 

                .lineTo((bff + 1993), -windowheight, {name: "div5"})

                .lineTo((bff + 1993 + 1837), -windowheight, {name: "div6"}) 

                .lineTo((bff + ((1993 + 1837 + 1795) - 325)), -windowheight, {name: "div7"})    

            // We're done with the path, let's initate the plugin on our wrapper element
            // Window resize function
            $(window).resize(function() {
                if(this.resizeTO) clearTimeout(this.resizeTO);
                this.resizeTO = setTimeout(function() {
                    $(this).trigger('resizeEnd');
                }, 500);
            });

            $(window).bind('resizeEnd', function() {
                $("#path").scrollPath({drawPath: true, wrapAround: false});
            });

            $("#path").scrollPath({drawPath: true, wrapAround: false});

        }