javascript - 为什么在 IE8 上的 JavaScript 中访问图像的尺寸如此昂贵？

Question

我必须处理大量图像。首先，我需要检查图片的大小是否大于50x60，适当增加坏图的计数器。

我遇到的问题是 n.width 的速度/n.height在 Internet Explorer 8 上非常低。我检查了 n.offsetWidth , n.clientWidth但它们在速度方面都是相同的。我不能使用 n.style.width但是，因为这个值并不总是设置在 <img /> 上我感兴趣的标签。

考虑以下代码:

Javascript

var Test = {
    processImages: function () {
        var fS = new Date().getTime();

        var minimagew = 50,
            minimageh = 60;
        var imgs = document.getElementsByTagName('img');
        var len = imgs.length,
            isBad = 0,
            i = len;

        while (i--) {
            var n = imgs[i];

            var imgW = n.width;
            var imgH = n.height;

            if (imgW < minimagew || imgH < minimageh) {
                isBad++;
            }
        }

        var fE = new Date().getTime();
        var fD = (fE - fS);

        console.info('Processed ' + imgs.length + ' images in ' 
                     + fD + 'ms.  ' + isBad + ' were marked as bad.');
    }
};

HTML

<img src="http://nsidc.org/images/logo_nasa_42x35.gif" />
   [snip 9998 images]
<img src="http://nsidc.org/images/logo_nasa_42x35.gif" />

代码生成以下输出解析 10k 图像(3 个不同的 Ctrl+F5)

• FF:在 115 毫秒内处理了 10000 张图像。 10000 个被标记为不良。
• FF:在 99 毫秒内处理了 10000 张图像。 10000 个被标记为不良。
• FF:在 87 毫秒内处理了 10000 张图像。 10000 个被标记为不良。
• IE8:在 206 毫秒内处理了 10000 张图像。 10000 个被标记为不良。
• IE8:在 204 毫秒内处理了 10000 张图像。 10000 个被标记为不良。
• IE8:在 208 毫秒内处理了 10000 张图像。 10000 个被标记为不良。

如您所见，FF 3.6 中的代码比 IE8 中执行的代码快两倍。

为了证明问题确实与浏览器维度属性的速度有关，如果我更改:n.width和 n.height到常量，所以我们将有:

 var imgW = 43;
 var imgH = 29;

我得到以下结果:

• FF:在 38 毫秒内处理了 10000 张图像。 10000 个被标记为不良。
• FF:在 34 毫秒内处理了 10000 张图像。 10000 个被标记为不良。
• FF:在 33 毫秒内处理了 10000 张图像。 10000 个被标记为不良。
• IE8:在 18 毫秒内处理了 10000 张图像。 10000 个被标记为不良。
• IE8:在 22 毫秒内处理了 10000 张图像。 10000 个被标记为不良。
• IE8:在 17 毫秒内处理了 10000 张图像。 10000 个被标记为不良。

没错!当我们跳过 <img />维度检查(调用 node.width/node.clientWidth 等)，IE8 实际上比 Firefox 表现更好。

您是否知道为什么 IE 需要这么长时间来检查图像的大小以及最终如何提高此检查的性能？

Answer 1

您的代码非常基础。您唯一可以优化的是检查维度的方式:

if (n.width < minimagew || n.height < minimageh) {
  isBad++;
}

通过这种方式如果 width图像的错误，height不会被访问。对于带有错误 width 的图像，它会使您的代码速度提高 1.5-2 倍.

但我的猜测是您实际上不需要 10 000 张图像作为您网站的一部分。在这种情况下，您可以检查 Image对象而不是 <img>元素。

loop {
  var img = new Image();
  img.src = "http://nsidc.org/images/logo_nasa_42x35.gif";
}

这将使您的代码在 IE 8 中快 2 倍，在 FF 中快 10 倍。

进行这些更改后，我的计算机得到了以下改进( demo ):

FF: 200 ms ->  7 ms
IE:  80 ms -> 20 ms