Ein einfaches Fenstersystem mit css3 und html5 wird langsam gerendert. Wie kann man es beschleunigen?

Question

Ich habe das hier: http://jsfiddle.net/5r3Eh/10/show/ und dann http://jsfiddle.net/5r3Eh/18/ aber sie sind ziemlich langsam (auf Chrome 12, etwas besser auf 13).

Gibt es eine Möglichkeit, Drag-Drop von Fenster ohne jquery.event.drag-1.5.min.js und wenn möglich ohne jquery überhaupt zu tun? Und wie kann ich es in meinen einfachen Code implementieren http://jsfiddle.net/5r3Eh/10/ :

$('#demo4_box').bind('dragstart', function(event) {
    return $(event.target).is('.handle');
}).bind('drag', function(event) {
    $(this).css({
        top: event.offsetY,
        left: event.offsetX
    });
});

$(".resize").bind('dragstart', function(event) {
    var $box = $(this).closest(".box");

    $box.data("width", $box.width());
    $box.data("height", $box.height());
    $box.data("x", event.offsetX);
    $box.data("y", event.offsetY);

}).bind("drag", function(event) {
    var $box = $(this).closest(".box");

    $box.width(Math.max($box.data("width") - $box.data("x") + event.offsetX, $box.data("minwidth")));
    $box.height(Math.max($box.data("height") - $box.data("y") + event.offsetY, $box.data("minheight")));
});

Answer 1

Der Browser zeichnet die gesamte Hintergrundebene jedes Mal neu, wenn Sie um ein Pixel ziehen. Sie können dies mit den Chrome-Entwicklerwerkzeugen (Zeitleiste) überprüfen: http://i.imgur.com/bzXj5.png

Wenn Sie den Box-Shadow und das Re-Profil deaktivieren, wird keines dieser Rendering-Ereignisse ausgelöst. Ihr Problem ist also, dass Sie das gesamte Fenster neu zeichnen lassen. Wenn Sie das in irgendeiner Weise reduzieren können, ist Ihr Problem gelöst.

Es kann jedoch schwierig sein, dies zu tun und gleichzeitig das gewünschte Aussehen zu erreichen. Das einzige, was ich mir vorstellen kann, das funktionieren könnte, wäre das Zeichnen eines Divs hinter Ihrem Dialog für den Box-Schatten auf geworfen werden. Dieses div wäre gerade groß genug, um den Schatten aufzunehmen, und müsste einen undurchsichtigen Hintergrund haben. In diesem Fall könnte sich das Neuzeichnen nur auf den kleineren Div auswirken und nicht auf die gesamte Hintergrundebene.

Die Quintessenz ist, dass Box-Shadow teuer ist, versuchen Sie, Redraws wie diese zu vermeiden.