Может ли Picturefill замедлить работу браузера на стороне клиента из-за использования RegEx для получения правильного изображения?

Question

В настоящее время мы реализуем Picturefill (версия 2.2.0) на нашем сайте. Элемент изображения выглядит так:

<picture>
    <source media="{query_size1}" srcset="/images/size1.jpg"></source>
    <source media="{query_size2}" srcset="/images/size2.jpg"></source>
    <source media="{query_size3}" srcset="/images/size3.jpg"></source>
    <source media="{query_size4}" srcset="/images/size4.jpg"></source>
    <source media="{query_size5}" srcset="/images/size5.jpg"></source>
</picture>

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

(max-width: Xpx) and (-webkit-max-device-pixel-ratio: 1.0), 
(max-width: Xpx) and (-o-max-device-pixel-ratio: 1/1),   
(max-width: Xpx) and (max-resolution: 100dpi),
(max-width: Xpx)  and (-webkit-max-device-pixel-ratio: 1.5), 
(max-width: Xpx)  and (-o-max-device-pixel-ratio: 15/10), 
(max-width: Xpx)  and (max-resolution: 150dpi),
(max-width: Xpx)  and (-webkit-max-device-pixel-ratio: 2),
(max-width: Xpx)  and (-o-max-device-pixel-ratio: 2/1),
(max-width: Xpx)  and (max-resolution: 200dpi),
(max-width: Xpx)  and (-webkit-max-device-pixel-ratio: 2.4), 
(max-width: Xpx)  and (-o-max-device-pixel-ratio: 24/10), 
(max-width: Xpx)  and (max-resolution: 240dpi)

Теперь мне интересно, могут ли эти огромные запросы, которые нужно анализировать с помощью регулярного выражения (поправьте меня, если я ошибаюсь) в браузере, замедлить работу браузера, потому что если у нас на сайте будет 10 картинок, их будет 10 X 5 = 50 таких сложных расчетов RegEx.

Было бы здорово услышать, что вы думаете...;)

С наилучшими пожеланиями...

Answer 1

В общем нет. Атрибут медиа обрабатывается window.matchMedia а не с регулярным выражением. Кроме того, хотя регулярные выражения являются медленными строковыми операциями, они в x раз быстрее, чем обычные обходы / манипуляции с DOM, которые необходимо выполнить для реализации picture / srcset.

Но, глядя на ваши СМИ, мне кажется, что вы делаете что-то не так. Изображение о художественном направлении (разные изображения для разных макетов), а не для разных размеров изображения. Если у вас разные размеры изображения, используйте только srcset. Также обратите внимание, что вы можете комбинировать изображение с srcset, если у вас есть 2 разных изображения и несколько размеров для них.

В случае, если производительность важна для вас, вы должны попробовать использовать дыхание polyfill или расширение lazySizes RIaS.