首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Javascript内存泄漏-画布HTML5 jQuery

Javascript内存泄漏-画布HTML5 jQuery
EN

Stack Overflow用户
提问于 2013-02-19 19:50:32
回答 2查看 947关注 0票数 1

我正在建设一个网站,主要使用画布,但唯一涉及的大炮是一条线画水平,这条线大约是13000 is长。

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

我已经通知firefox (版本6.0.2),我的文档无法滚动。在我的控制台中,我收到了一些类似于(NS_ERROR_OUT_OF_MEMORY)的内容。

在搜索这个之后,我发现这可能是一个潜在的内存泄漏?这是怎么工作的,是不是因为我写代码的方式?或者这是浏览器/硬件问题?

我重新启动我的功能窗口,调整大小等,我很好奇,这是否可能有任何修改?

代码语言:javascript
复制
// 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}); 
代码语言:javascript
复制
        $(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});

        }
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-02-20 09:32:53

好吧,现在我在谷歌上搜索你使用的插件,我知道是怎么回事。

http://joelb.me/scrollpath/

“线”实际上是一个形状,而scrollPath正在为它生成一个不错的大画布。问题就在scrollPath的内部。它创建了太多的画布实例或泄漏了一些东西。

您应该更好地跟踪/记录错误,并向作者报告。

从单个DOM元素创建路径的建议是无效的,因为我们知道您不是指一条直线。我不知道你的trget到底是什么,但是你也许可以用impress.js实现它

票数 1
EN

Stack Overflow用户

发布于 2013-02-19 20:03:01

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

我不认为你有漏洞,你只是一个程序的内存占优势。除了内存之外,您还会有很大的性能问题。2D画布受到填充率(绘制的像素数)的严重影响。绘制这么多像素会非常慢,即使在快速计算机上也是如此。

所以不要做一个巨大的画布,然后滚动窗口/视图在上面。相反,制作一个小画布,它只呈现一个更大的东西的可见部分。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/14966119

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档