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”。 沒有它，它的運行速度將大大加快。