Я не могу в это поверить.Все свое время я думал, что меньшее количество элементов дает лучшую частоту кадров, поэтому я думал, что если я оберну несколько элементов в один <img>, то результаты будут лучше.
Я сделал быстрый тест, и вот мойпоследние заметкиВажны не сами фреймы, а отношения между ними.
// 1900 x10 parent elements (children are circles with simple fill), animation of 1 parent,
// 24(ObjectURL)/48/filled(ObjectURL) children in a parent, minimum fps, '?' = plain eye measurement,
// every browser except IE Desktop produces glitches, i am trying to ignore them
// DESKTOP (Win7) | DESKTOP (Win10) | MOBILE (Win8.1) | MOBILE (Win10)
// IE Firefox ? Chrome ? Yandex ? | Edge ? | IE ? | Edge ?
// HTML 50/10 21/21 23/17 25/18 | 18/7 | 13/5 | 6/3
// SVG 50/25 30/23 27/19 30/16 | 18/18 | 26/17 | 18/10
// PNG 150/150/150 29(29)/25/23(23) 21/19/22 5(5)/3/18(18) | 18(18)//18(18) | 30(30)//22(22) | 18(10)//22(20)
Итак, у меня есть один вопрос: теоретически лучше использовать png вместо html?То есть будет ли он показывать лучшую производительность во всех браузерах?
Дополнительно:
Поскольку у меня нет доступа к системам Android и IOS, вы можете опубликовать результаты теста для любого из: Edge, Safari,Android веб-браузер, Chrome Android, Safari IOS, Samsung Интернет Android?Мне бы очень хотелось увидеть каждый из них, особенно мобильные версии.Любые дополнительные браузеры приветствуются.
Вот ссылки для тестирования.Родительские элементы должны быть увеличены / уменьшены для соответствия полноэкранному режиму.
html x24 / html x48
svg x24 / svg x48
png x24 ( URL объекта ) / / png заполнено ( URL объекта )
Для png x48 jsbin не позволяет сохранять большие проекты (со встроенным Data URL).Так что я не знаю, как это сделать с элементами base64 x48.
Результат теста 1900x1000, и я знаю, что если он будет ниже, он будет рендериться быстрее.Если вы считаете, что это уместно, вы можете увеличить / уменьшить количество сложенных родителей с var stackedCount.
Спасибо
И если вы удивляетесь, почему я оценил Chrome и Firefox без инструментов производительности,это потому, что их частота кадров уменьшается в несколько раз.
РЕДАКТИРОВАТЬ:
Для глюков у меня есть информация.Тестирование MSEdge - за периоды, в которых он работал, - производительность (в DevTools) показывает, что ничего не происходит.Обычно это говорит о том, что он рисует или вычисляет стили, но при сбое говорит, что ничего не происходит.Между рисованием есть небольшие пустые промежутки (самые длинные промежутки наблюдаются при более быстрых рисунках, промежутки в 3 раза превышают продолжительность рисования, всего 45 мс).
Следует иметь в виду, что обычные браузеры (кроме Edge)дают меньше кадров в секунду при рендеринге слайда по всему экрану (начало анимации) и больше кадров в секунду при рендеринге в конце экрана (конец анимации).Край не заботится, это дает несколько стойкие результаты (я игнорирую внезапные глюки и внезапную остановку глюков).Edge даже иногда дает анимацию без сбоев (30+ кадров в секунду), но это происходит один раз на 10-20 попыток.Так может глюки исправимы?