HTML Canvas и Stacked Div

Question

В основном у меня есть div, настроенный так:

    <div class="pane">
        <div class="banner">
            <img class="original" src="images/picture.jpg" width="100%" height="100%" />

            <div class="blurred"></div>
            <div class="blurred_colour"></div>
            <div class="focused"></div>

        </div>
    </div>

Хорошо, мой скрипт скрывает .original, а затем получает его источник и создает 3 разных изображения для каждого из div.Все они являются тегами холста, сгенерированными в JavaScript..blurred содержит ненасыщенный и размытый вариант оригинала..blurred_colour содержит размытую версию, но в цвете..focused - это просто исходное изображение.

Теперь я также поместил изображение границы поверх каждого элемента div и положения относительно него, чтобы оно отображалось сверху, а не ниже элементов div.Так что, если вы отслеживаете, то это 3 div, 3 изображения холста и 3 изображения рамки (png), расположенные поверх 3 изображений холста.И 3 основных элемента делятся друг на друга.Я анимирую, используя множество изменений непрозрачности, с помощью jQuery animate.

Как вы можете догадаться, некоторые браузеры отображают эту анимацию довольно нестабильно, и, вероятно, будет хуже с менее мощными компьютерами.

Мой вопрос таков:Можно ли было бы переписать все это одним тегом canvas, сохранив при этом все эти анимации, но при этом имея гораздо лучшую производительность, чем в настоящее время?

Answer 1

Трудно сказать, почему именно ваш код работает медленно.

У вас нет такого количества элементов DOM , так что, вероятно, проблема не в этом.

Вы, вероятно, должны профилировать код. F12 в Chrome или IE, перейдите на вкладку профилировщика, запустите его, посмотрите на то, что скушает все время.

Чего именно вы пытаетесь достичь? Какой-то эффект размытия? Выполнение всего этого на одном холсте, вероятно, предпочтительнее, при условии, что то, что вы пытаетесь сделать, может быть легко выполнено таким образом.

Что за анимация? Вы физически перемещаете элементы DOM? Это плохо. С точки зрения производительности, никогда не делайте ничего с DOM, если вы можете избежать этого. Если это так, то размещение всего на одном холсте, вероятно, очень поможет. Опять же, трудно сказать с такой маленькой детализацией.

Вы просто делаете размытие анимации? В общем, размытие в CSS быстрее (и проще в написании), чем размытие в Canvas.

В любом случае, ответ, вероятно, не "Слишком много элементов DOM". Это либо слишком много материала для DOM, либо повторяющаяся работа в цикле анимации, либо слишком много взаимодействия с DOM, когда все в холсте было бы лучше.