La mauvaise performance de la toile html5 sous Firefox

Question

Je le code html5 suivant:

<canvas id="myCanvas" width=600 height=600>
</canvas>

suivi javascript:

<script type="text/javascript">
<!--
    var img = new Image();
    img.addEventListener('load', function()
    {
        reDraw('', this);
    }, false);

    img.src = "wood.png";

    function reDraw(canv, image)
        {
        var canvas = canv;
        if (canvas == '')
        {
            canvas = $("canvas");
        }

        var size = canvas.attr("width");
        var elem = canvas.get(0);

        if (!elem || !elem.getContext){
            return;
        }

        var context = elem.getContext('2d');
        if (!context || !context.drawImage)
            {
            return;
        }

        context.drawImage(image, 0, 0, size, size);
    };


    window.onresize = function() {
        var size = window.innerWidth;
        if (window.innerHeight < size)
        {
            size = window.innerHeight;
        };
        size = size/2;

        $("canvas").each(function()
        {
            $(this).attr({width: size, height: size});
            reDraw($(this), img);
        });
    };

// -->
</script>

Maintenant, le problème est que sous Chrome ce code fonctionne bien, mais sous FireFox (3.6.15) quand je redimensionnez la fenêtre, il faut un certain temps au travail. Quel peut être le problème? Et comment y remédier, il fonctionnerait aussi sans problème sous FF?

Answer 1

fonction drawImage de Firefox a mauvaise performance

Vous voudrez peut-être envisager d'ajouter une fonction setTimeout dans le onresize pour l'empêcher d'essayer de redessiner alors que l'utilisateur fait glisser la fenêtre pour améliorer les performances.