由於使用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處理，而不是用正則表達式處理。另外，雖然正則表達式是緩慢的字符串操作，但它們比實現picture/srcset所需的常規DOM遍歷/操作要快x倍。

但看着你的媒體，在我看來，你做錯了什麼。圖片是關於藝術的方向（不同的圖像適合不同的佈局），而不是針對不同的圖像尺寸。如果你有不同的圖像尺寸，只能使用srcset。另外請注意，如果您有兩張不同的圖像和多種尺寸的照片，您可以將照片與srcset結合使用。

如果性能對您很重要，您應該考慮嘗試respimage polyfill或lazySizes RIaS extension。