Question

我正在构建一个主要使用画布的网站，然而唯一涉及的画布是水平绘制的线条，线条长约13000像素。

当用户滚动我的窗口时，然后沿着画布路径Example水平滚动。

我已经在firefox（版本6.0.2）上注意到我的文档无法滚动。在我的控制台中，我收到的内容（NS_ERROR_OUT_OF_MEMORY）。

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

我重新启动了我在窗口调整大小等方面的功能，我很好奇这是否有任何影像？

// 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});

        $(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});

        }

Answer 1

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

http://joelb.me/scrollpath/

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

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

从单个DOM元素创建路径的建议现在无效，因为我们知道您并不意味着单个直线。我不知道你到底发生了什么事，但你可以用impress.js

来实现它。

Answer 2

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

我认为你没有泄漏，你只需要记住程序的内存。除了记忆之外，你还会遇到很大的性能问题。 2D画布受填充率（绘制的像素数）的影响很大。即使在快速计算机上，绘制这么多像素也会非常慢。

所以不要制作一个巨大的画布，然后滚动窗口/视口。相反，制作一个小画布，只渲染一个更大的东西的可见部分。

Javascript内存泄漏 - Canvas HTML5 jQuery

2 个答案: