Блог

Главная - Вопросы по программированию - Простая оконная система с css3 и html5 отрисовывается медленно. как это ускорить?

Простая оконная система с css3 и html5 отрисовывается медленно. как это ускорить?

#javascript #jquery #html #css #performance

#javascript #jquery #HTML #css #Производительность

Вопрос:

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

Есть ли какой-нибудь способ перетащить окно с помощью out 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")));
});

Комментарии:

1. Бьюсь об заклад, большая часть затрат на производительность приходится на работу с этими градиентами. Анимировать это действительно дорого. (Тем не менее, на моей машине с Chrome 12 это не кажется особенно медленным.)

2. То же самое за то, что не был медленным при использовании Chrome 11 на XP.

3. Одно несвязанное предложение: сначала спрячьте .alert с помощью CSS, чтобы избежать внезапного скрытия, а не скрывайте с помощью jS.

4. под медленным я имел в виду, что точка курсора не всегда на 100% совпадает с точкой, которую вы начали перетаскивать во время некоторого быстрого перетаскивания.

Ответ №1:

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

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

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

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