我必须处理大量图像。首先,我需要检查图片的大小是否大于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 需要这么长时间来检查图像的大小以及最终如何提高此检查的性能?
最佳答案
您的代码非常基础。您唯一可以优化的是检查维度的方式:
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
关于javascript - 为什么在 IE8 上的 JavaScript 中访问图像的尺寸如此昂贵?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3912934/