Что быстрее: замена div на img или изменение атрибута src в img?

Question

Я реализую своего рода очередь изображений, которая загружает x изображений одновременно. Предположим, у нас есть страница с 30 тегами img, и я добавляю изображения в свою очередь, откуда изображения загружаются 5 раз (значение x). Таким образом, существует очередь изображений для загрузки, и мы заменяем src первых 5 изображений ссылками на изображения. После загрузки одного изображения оно удаляет другое изображение из очереди и затем загружается, это продолжается до тех пор, пока не будут загружены все изображения. Это гарантирует, что одновременно загружается не более 5 изображений.
Но это, очевидно, замедляет скорость рендеринга изображений на странице.

Я хочу знать, является ли замена src из img по умолчанию на предполагаемую ссылку самым быстрым способом рендеринга изображений. У Ae также может быть случай, когда вместо пустого изображения по умолчанию у нас есть div, и мы заменяем div на изображение, когда его время загружать изображения. Будет ли этот способ быстрее или лучший метод лучше?

Answer 1

Как правило, лучше избегать динамических манипуляций с DOM (т. Е. Динамического добавления / удаления узлов DOM).Изменение атрибута src образа, который уже находится в DOM, не требует добавления или изменения динамического узла DOM и, следовательно, должно быть предпочтительным.Кроме того, как вы сказали, разница в производительности в любом случае невелика.

Answer 2

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

Используйте ваши изображения, как в этом примере .

Это всегда самый быстрый способ.