HTML5 Toile plus rapide sur Firefox que sur Chrome! Pourquoi?

Question

J'ai trouvé ce code pour dessiner sur une toile. Dans Firefox, cela fonctionne bien mais dans la dernière version de Chrome, les performances sont insuffisantes. Si la souris est déplacée très rapidement la ligne tracée derrière le curseur dans Chrome. Pourquoi?

js fiddle canvas

var canvas = document.getElementById('canvas'); 
    var ctx = canvas.getContext('2d'); 
    var width = window.innerWidth; 
    var height = window.innerHeight; 
    canvas.height = height; 
    canvas.width = width; 
    canvas.addEventListener('mousedown', function(e) { 
     this.down = true; 
     this.X = e.pageX ; 
     this.Y = e.pageY ; 
     this.color = rgb(); 
    }, 0); 
    canvas.addEventListener('mouseup', function() { 
     this.down = false;   
    }, 0); 
    canvas.addEventListener('mousemove', function(e) { 

     if(this.down) { 
      with(ctx) { 
       beginPath(); 
       moveTo(this.X, this.Y); 
       lineTo(e.pageX , e.pageY); 
       strokeStyle = "rgb(0,0,0)"; 
       ctx.lineWidth=3; 
       stroke(); 
      } 
      this.X = e.pageX ; 
      this.Y = e.pageY ; 
     } 
    }, 0); 

Answer 1

La vitesse d'exécution javascript est différent dans chaque navigateur, il peut fonctionner mieux dans Firefox pour vous. Cela dépend également des performances de votre propre PC. L'instruction with ralentit également l'exécution. Ceci est dû au fait que() ajoute un ensemble supplémentaire de variables au début de la chaîne de portée décrite ci-dessus. Cet item supplémentaire signifie qu'à chaque fois qu'une variable est appelée, le moteur Javascript doit parcourir les variables with(), puis les variables locales, puis les variables globales. Donc, avec() donne essentiellement aux variables locales tous les inconvénients des performances des variables globales, et dégrade à son tour l'optimisation Javascript.

Ce pourquoi ne pas utiliser with explication vient de here