0

我们目前正在我们的网站上实施 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 计算。

很高兴听到你的想法...... ;)

此致...

4

1 回答 1

0

一般来说没有。media 属性由正则表达式处理，window.matchMedia而不是由正则表达式处理。此外，虽然正则表达式是慢速字符串操作，但它们比实现图片/srcset 所需的普通 DOM 遍历/操作快 x 倍。

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

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

于 2015-01-10T14:47:52.077 回答