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

一般没有。 media属性由window.matchMedia处理，而不是正则表达式。此外，当正则表达式是慢字符串操作时，它们比正常的DOM遍历/操作快x倍，这需要用来实现picture / srcset。

但是看着你的媒体，我觉得你做错了什么。图片是关于艺术方向（不同布局的不同图像），不是针对不同的图像尺寸。如果您有不同的图像大小，请仅使用srcset。另请注意，您可以将图片与srcset结合使用，以防您有2个不同的图像和多个尺寸。

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

由于使用RegEx获取正确的图像，PictureFill可以减慢客户端浏览器的速度吗？

1 个答案: