CODEWITHSUNDEEP
javascriptjqueryhtmlcssperformance
Rella
Rella

Reputation: 66935

Simple window system with css3 and html5 is rendering slowly. how to speed it up?

I have this: http://jsfiddle.net/5r3Eh/10/show/ and than http://jsfiddle.net/5r3Eh/18/ but they are quite slow (on chrome 12, a bit better on 13).

Is there any way to do drag-drop of window with out jquery.event.drag-1.5.min.js and if possible without jquery at all? And how to implement it into my simple code 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")));
});

Upvotes: 2

Views: 816

Answers (1)

kcbanner
kcbanner

Reputation: 4078

The browser is re-drawing the entire background layer every time you drag by a pixel. You can confirm this by using the Chrome developer tools (Timeline): https://i.sstatic.net/aG5PA.png

If you disable the box-shadow and re-profile, none of those rendering events fire. So, your problem is that you are causing the entire window to redraw. If you can cut down on that in some way, then your problem is solved.

However, doing this while achieving the look you want may be hard. The only thing I can think of that might work would be drawing a div behind your dialog for the box-shadow to be cast on. This div would be just large enough to receive the shadow, and would need an opaque background. In this case, the redraw may only affect the smaller dive instead of the entire background layer.

The bottom line is that box-shadow is expensive, try to avoid redraws like this.

Upvotes: 2

Related Questions