javascript - 带有 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 开发人员工具(时间线)确认这一点:http://i.imgur.com/bzXj5.png

如果禁用 box-shadow 并重新配置文件，则不会触发这些渲染事件。所以，你的问题是你导致整个窗口重绘。如果你能以某种方式减少它，那么你的问题就解决了。

但是，在实现您想要的外观的同时执行此操作可能很难。我能想到的唯一可行的方法是在对话框后面绘制一个 div，以便转换框阴影。这个 div 应该足够大以接收阴影，并且需要一个不透明的背景。在这种情况下，重绘可能只会影响较小的潜水而不是整个背景层。

底线是 box-shadow 很昂贵，尽量避免像这样重绘。