2013-03-21 3 views
4

Я попытался найти соответствующие источники об этом и ничего не нашел.Canvas vs. img - performance

Итак, мои вопросы довольно просты. Является ли холст быстрее, чем img? Я буду использовать объект как в img (png, gif) или холст.

  1. объект используется только один раз,
  2. многократного использования того же объект, например, иконки на администраторе,
  3. многократного использования различных объектов, например, логотипы компаний.

Меня интересует использование памяти, производительность в браузере и скорость загрузки.

Редактировать # 1: холст нарисован js, и он будет таким же, как изображение в теге img.

+0

Вы имеете в виду * рисование чего-то на '' * vs. * a '' tag *? «Быстрее», каким образом? Скорость загрузки? Скорость рендеринга? – deceze

+0

да, я имею в виду ... я отредактирую вопрос, спасибо –

+3

Почти во всех случаях это не проблема. Вы должны использовать холст, когда вам нужен холст и img, когда вам понадобится img. Выберите, исходя из ваших потребностей, и оптимизируйте * только *, когда это станет необходимым. – JJJ

ответ

3

Нет, img быстрее, проще в создании и доступнее, чем при использовании canvas. Тег img был создан, чтобы показать изображение, так что если это все, что вам нужно сделать, используйте тег img. Многократное использование не должно иметь значения, поскольку изображение будет загружаться только один раз.

Если вам нужна анимация или интерактивность, настало время рассмотреть canvas.

+0

Является ли 'img' быстрее? Не могли бы вы объяснить, почему, пожалуйста? – Robula

+0

@Robula 'img' построен, чтобы просто рисовать изображения, все обрабатывается в собственном коде. Для «холста» вам нужно создать элемент DOM, каким-то образом захватить изображение (возможно, через элемент «img»), а затем нарисуйте его. Они созданы для создания общих полотен для рисования всех видов вещей, 'img' являются простыми и поэтому лучше всего рисуют изображения. –

+0

Благодарим вас за разъяснение. Я был под впечатлением. Холст может быть более насыщенным, поскольку он использует WebGL. – Robula