html - 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 处理，而不是使用正则表达式。此外，虽然正则表达式是缓慢的字符串操作，但它们比实现图片/srcset 需要完成的正常 DOM 遍历/操作快 x 倍。

但是看着你们的媒体，我觉得你们做错了什么。图片是关于艺术方向的(不同布局的不同图像)，而不是不同的图像尺寸。如果您有不同的图像尺寸，请仅使用 srcset。另请注意，如果您有 2 个不同的图像和多个尺寸，您可以将 picture 与 srcset 组合。

如果性能对您很重要，您应该考虑尝试 respimage polyfill或 lazySizes RIaS extension .