Простая оконная система с CSS3 и HTML5 рендерится медленно. как ускорить это?

Question

У меня есть это: http://jsfiddle.net/5r3Eh/10/show/ и http://jsfiddle.net/5r3Eh/18/, но они довольно медленные (на Chrome 12, немного лучше на 13).

Есть ли способ сделать перетаскивание окна без jquery.event.drag-1.5.min.js и, если возможно, вообще без jquery?И как реализовать это в моем простом коде 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

Браузер перерисовывает весь фоновый слой каждый раз, когда вы перетаскиваете на пиксель. Вы можете подтвердить это с помощью инструментов разработчика Chrome (Timeline): http://i.imgur.com/bzXj5.png

Если вы отключите box-shadow и перепрофилируете, ни одно из этих событий рендеринга не сработает. Итак, ваша проблема в том, что вы заставляете все окно перерисовываться. Если вы можете каким-то образом сократить это, то ваша проблема решена.

Тем не менее, сделать это при достижении желаемого вида может быть сложно. Единственное, что я могу придумать, это может сработать, это нарисовать div за вашим диалогом для наложения тени блока. Этот div будет достаточно большим, чтобы получить тень, и потребуется непрозрачный фон. В этом случае перерисовка может повлиять только на меньшее погружение, а не на весь фоновый слой.

Суть в том, что box-shadow стоит дорого, старайтесь избегать перерисовок, подобных этой.