3

このコードがキャンバスに描画されることがわかりました。Firefox では問題なく動作しますが、最新の Chrome ではパフォーマンスが不足しています。マウスを非常に速く動かすと、描画された線が Chrome のカーソルの後ろに表示されます。なんで？

jsフィドルキャンバス

  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);
4

1 に答える 1

0

JavaScript の実行速度はブラウザごとに異なるため、Firefox の方が適切に動作します。また、ご自身のPCの性能にもよります。

このwithステートメントは、実行速度も低下させます。

これは、 with() が上記のスコープチェーンの先頭に追加の変数セットを追加するためです。この余分な項目は、変数が呼び出されるたびに、JavaScript エンジンが with() 変数、ローカル変数、グローバル変数の順にループする必要があることを意味します。

したがって、 with() は本質的にローカル変数にグローバル変数のすべてのパフォーマンス上の欠点を与え、Javascript の最適化を狂わせます。

この説明を使用しない理由はここwithから来ています

于 2013-07-14T13:16:43.147 に答える