在IE7上使用jQueryCSS设置边框需要很长时间

我正在IE7中使用HTTPWatch来确定为什么我的一个页面加载速度如此之慢。这只发生在IE7中，而不是任何其他浏览器中。我将其缩小到一个jquery行，该行在两个容器上设置边界

当我注释掉第二行时，页面在IE7-2秒内的加载速度明显快于7秒

  $('.ccl, .ccr').css({'min-height':maxHeight});
  $('.ccl, .ccr').css({'border':'1px solid #ccc'});

---

我以前从未经历过这种情况，我想知道是否有其他人见过这种情况，以及为什么会发生这种情况。代码没有问题，它工作得很慢。

试试这个

var cached = $('.ccl, .ccr');
cached.css({'min-height':maxHeight});
cached.css({'border':'1px solid #ccc'});

---

如果您指定元素名，那么IE7可以放弃任何不是div的内容（不过在现代浏览器中这对性能影响很小）。将CSS属性也放在一个对象中

$('div.ccl, div.ccr').css({
    'min-height':maxHeight,
    'border':'1px solid #ccc'
});

更好的是，如果元素对于页面是唯一的（看起来像

.ccl

和

.ccr

是列名），您可以添加一个id，这将是最快的解决方案：

$('#ccl, #ccr').css({
    'min-height':maxHeight,
    'border':'1px solid #ccc'
});

如果您已经指出了添加边框的问题，那么请添加一个类并让样式表处理它：

/* styles.css */

.ccl.border, .ccr.border {
  border: 1px solid #ccc;
}

/* site.js */
$('div.ccl, div.ccr').css('min-height', maxHeight).addClass('border');

---

养成缓存选择器的习惯（如Mythril的回答所示）。重复遍历DOM可能会非常昂贵，特别是如果您按类选择，每次可能选择/重新选择大量元素。缓存是便宜的，DOM的常量遍历不是。谢谢，我应该补充一点，即使我将行更改为：$（'.ccl，.ccr'）.css（{'min-height'：maxHeight，'border'：'1px solid#ccc'）；另一个选项是不使用内联样式。我不知道jQuery的

css

有多慢/多快，但是使用

addClass

在样式表中添加引用这些样式的类可能会更快。例如，

$（'.ccl，.ccr'）.addClass（'myNewClass'）

，将其与缓存选择器和

if（！cachedSeletor.hasClass（'myNewClass'））{…addClass（'''））}

相结合。我同意弗朗索瓦的说法。但是，如果CSS不是一个选项，也许您可以尝试分别指定每个border-*属性，而不是使用速记。谢谢，我现在使用addClass而不是设置边框。回到我最初的问题-为什么设置边界需要5秒钟？？这太慢了。选择器不是问题所在。是边界的设置导致IE7速度减慢。代码没有问题。它起作用了。就是慢。我的问题是——为什么？为什么在IE7中使用.css设置边框需要5秒钟？