jQuery 或 DOM 性能答案

【问题标题】：jQuery or DOM performancejQuery 或 DOM 性能
【发布时间】：2012-08-04 17:07:30
【问题描述】：

在我的一个网页上，我需要一个单词列表，每个单词在单击时都应该有一个边框。单击另一个单词时，前一个单词会失去边框，而新单词会得到一个。我还需要为单击的单词显示一个带有一些选项的 div。

为了实现目标，我使用了 jQuery。这个想法很简单：从前一个元素中删除一个没有边框的类，并将一个有边框的类添加到一个新元素中。但是，当此类单词的数量达到数百个时，这会非常缓慢。我该如何改进呢？顺便说一句，它的渲染速度也很慢。

这是我使用的代码（没有 CSS）

HTML

...

<div class="wrapper">
    <div class='invis'>
        <span word="24">YOu are a cool programmer</span>
    </div>
</div>

...

JQuery Javascript：

var currentElement = null;
$('.invis').click(function() {
    if (currentElement != null) {
        currentElement.removeClass("bordered");
        currentElement.addClass("invis");
    }
    $(this).removeClass("invis");
    $(this).addClass("bordered");
    currentElement = $(this);
});

【问题讨论】：

html 量大是怎么回事？如果在您的示例中基于单词而不是单词集合，您甚至可以不预先包装单词。但作为初学者，我只会使用 p 和每个单词的跨度。我没有看到 invis 分类 div 的意义。此外，如果事情变得缓慢，我建议不要使用 jQuery，jQuery 会产生巨大的开销。没有 jQuery 也没那么难。
@ReneGeuze：问题是我必须显示带有所选项目选项的图层。过多的包装器是我选择的解决方案的一部分（也许不是最好的，必须研究一下）。
每个选项列表都不同吗？如果它们都相同，您可以根据所选索引包装项目（例如 tinymce）并在单击后将列表添加到 dom。

标签： jquery performance dom

【解决方案1】：

尝试在没有库的情况下以老式方式进行操作，例如：

var invis = document.getElementsByClassName('invis'), last=false;

for (var i=0; i<invis.length; i++) {
    invis[i].addEventListener("click", function(e) {
        if (last) last.className = 'invis';
        this.className = 'bordered';
        last=this;
    });
}

FIDDLE

【讨论】：

还有，这如何帮助解决问题？在某些版本的 IE 中也不起作用。
这在我的 HTML 和 CSS 上具有相同的性能。这就是为什么我开始寻找其他部分的差异，并发现问题出在 CSS

【解决方案2】：

原来，罪魁祸首是 CSS 中 .invis 和 .bordered 的“float:left”。没有它，它开始工作的速度明显更快。

【讨论】：