올바른 이미지를 얻기 위해 RegEx를 사용했기 때문에 Picturefill이 클라이언트 측 브라우저를 느리게 할 수 있습니까?

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으로 처리됩니다. 또한 정규식은 느린 문자열 작업이지만 그림/srcset을 구현하기 위해 수행해야하는 일반 DOM 트래버스/조작보다 x 배 빠릅니다.

그러나 언론을보고 나에게 당신이 뭔가 잘못하고있는 것처럼 보입니다. 그림은 다른 이미지 크기가 아닌 아트 방향 (다른 레이아웃의 다른 이미지)에 대한 것입니다. 이미지 크기가 다른 경우 srcset 만 사용하십시오. 또한 이미지가 두 가지 있고 크기가 여러 개인 경우 srcset과 그림을 결합 할 수 있습니다.

성능이 중요한 경우 respimage polyfill 또는 lazySizes RIaS extension을 사용해보십시오.