jQuery或DOM性能

Question

在我的一个网页上，我需要有一个单词列表，单击时每个单词都应有一个边框。 单击另一个单词时，前一个单词将松开边框，而新单词将得到一个。 我还需要显示一个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);
});

Answer 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;
    });
}

小提琴

Answer 2

原来，罪魁祸首是CSS中.invis和.bordered的“ float：left”。 没有它，它的运行速度将大大加快。