javascript - 向大型 DOM 添加类时的性能问题

Question

我有一个非常大的 div 组(超过 5000 个)，我需要对其应用 class。此操作会导致严重的性能消耗/UI 滞后。

我尝试了两种方法将class添加到div:

// jQuery approach
$("div", "#document").addClass("default");

// Vanilla JS (HTML5)
var obj_list = document.getElementById("document").querySelectorAll('div');

for (var index = 0; index < obj_list.length; index++) 
{
    obj_list[index].classList.add("action"); 
}

这两种方法都没有提供任何明显的性能差异。我想知道是否还有其他选择可以实现这一目标？

谢谢!

Answer 1

我尝试做一些实验，数量庞大 <div>一页中的元素。

这是我的例子:

<style type="text/css">
    .default {

        color: red;
    }
</style>
<script src="https://code.jquery.com/jquery-2.2.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {

    $('#generate').click(function() {

        for (var i = 0; i <= 5000; i++) {

            $('#container').append('<div class="tick">some text</div>');
        }
    });

    $('#add').click(function() {

        var
            divs,
            countFrom,
            length,
            runner,
            requestAnimation;

        divs = document.getElementById("container").querySelectorAll('div');
        countFrom = 0;
        length = divs.length;

        runner = function() {

            if (countFrom < length) {

                divs[countFrom++].className = 'default'; 
                requestAnimationFrame(runner)
            }
            else {

                cancelAnimationFrame(requestAnimation);
                console.log('READY');
            }
        };

        requestAnimation = requestAnimationFrame(runner);
    });
});
</script>
<div>
    <input type="button" id="generate" value="Generate"> <br>
    <input type="button" id="add" value="Run it! Yay!"> <br>
</div>
<div id="container">

</div> 

首先单击“生成”按钮(5000 个 div 将附加到容器中)。接下来单击“运行”按钮。该过程将异步启动。该页面不会被进程阻塞。

为了异步运行此进程，我使用了 Window.requestAnimationFrame()方法而不是缓慢的 setInterval()。

脚本速度:每帧一次addClass操作。您可以通过修改我的代码轻松提高此速度。例如，使用 for 循环每帧 100 个 addClass 操作...

Demo