chrome、javascript、getCSSrule 使 CPU 时间达到 100%答案

【问题标题】：chrome, javascript, getCSSrule makes 100% cpu timechrome、javascript、getCSSrule 使 CPU 时间达到 100%
【发布时间】：2013-04-06 21:01:19
【问题描述】：

我使用一些函数在运行时获取特定的 css 规则

function getCSSRule(ruleName) {
var stylesheets = document.styleSheets;
for (var i=0; i < stylesheets.length; i++) {
    var rules = stylesheets[i].cssRules || stylesheets[i].rules;
    for (var j=0, rule; rule = rules[j++]; ) {
        if (rule.selectorText === '#title') {
            return rule;
        }
    }
}   
return false;
}

在 ajax 回调中像这样使用

var r = document.getElementsByClassName('#title')[0];
r.style.background = col;

它使我的 cpu 使用率达到 100%。问题是当我尝试设置颜色时，而不是函数本身（？）任何建议将不胜感激。问题在 Chrome 中，在 FF 中没有问题，即使在 IE6 中也很好。

简单地说，这在 Chrom 中工作，但 CPU 使用率很高，还有一些其他意想不到的（其他 javascripts）行为。有什么线索吗？

var r = document.styleSheets[0].cssRules[10]; // acess by hand

r.style.border = "auto"; // modify something

【问题讨论】：

那么为什么你认为getCSSRule方法和CPU使用率有关系呢？
当我在 Chrome 中使用代码时，CPU 保持在 90...100%，并且我观察到了其他一些意外行为。在调试时，似乎像上面那样修改访问规则是问题。
但是代码可以工作 :) 这很烦人。
看起来第二个for 循环进入了无限循环，不是吗？
完全没有，就像我说的那样有效，此外，FF中的模拟还可以

标签： javascript google-chrome

【解决方案1】：

function getCSSRule(ruleName) {
    var stylesheets = document.styleSheets;
    for (var i=0; i < stylesheets.length; i++) {
        var rules = stylesheets[i].cssRules || stylesheets[i].rules;
        for (var j=0, k=rules.length, rule; j < k; rule = rules[j++]; ) {
            if (rule.selectorText === '#title') {
                return rule;
            }
        }
    }   
    return false;
}

第二个for 循环中缺少条件语句。你需要检查rules.length。

【讨论】：

好的，我同意，我会马上检查。但是请查看我的第一篇文章，根本不使用该功能时的情况相同！
只要规则数组是紧凑的并且不存在的 cssRule 是虚假的，他的循环语句是正确的。这种循环样式是循环优化的第一步，在通往 while 循环的道路上。

【解决方案2】：

拔掉头发后，我找到了另一个解决方案，非常简单且跨浏览器。万一有人需要:)

<div id="menu" class="menu">
<a href="config.htm">Configuration</a>
<a href="status.htm">Status</a>
...
</div>

现在在 css 中，有 2 个“菜单”类，一个用于 ON，一个用于 OFF（仅用于检测在线和离线）。并且从 javacript 更改（以 10 毫秒速率 ajax 回调）工作完美

if(Offline)
{   
  var elem = document.getElementById('menu');
elem.className = 'menudis';
}

【讨论】：