这个重绘和重排的函数是做什么的？

Question

JS代码旨在最大限度地减少所需的重绘和回流次数。我对这个概念非常陌生，所以我不确定doing....specifically循环的函数是什么。

(function() { 
    var element, 
        index, 
        length, 
        content = document.getElementById("content"),
        html = "",
        data = [{ 
            id: 1, 
            name: "John", 
            color: "green" 
        }, { 
            id: 2, 
            name: "Sally", 
            color: "pink" 
        }, { 
            id: 3, 
            name: "Andrew", 
            color: "blue" 
        }, { 
            id: 4, 
            name: "Katie", 
            color: "purple" 
        }];

    for (index = 0; index < data.length; index++) {
        html +=
            '<li id="' + data[index].id + '" style="color: ' + data[index].color + '">' +
                '<strong>' + data[index].name + '</strong>' +
            '</li>';
    } 

    content.innerHTML = html;
 })();

Answer 1

for循环只是连接数组中每个元素的字符串。这样做的目的是将列表的所有HTML放入单个字符串中，然后将该字符串放入DOM中一次，而不是每次都通过循环将其附加到HTML中。这更有效率，因为HTML只需呈现一次而不是多次。

Answer 2

要查看，输出是什么：

​

(function() { 
    var element, 
        index, 
        length, 
        content = document.getElementById("content"),
        html = "",
        data = [{ 
            id: 1, 
            name: "John", 
            color: "green" 
        }, { 
            id: 2, 
            name: "Sally", 
            color: "pink" 
        }, { 
            id: 3, 
            name: "Andrew", 
            color: "blue" 
        }, { 
            id: 4, 
            name: "Katie", 
            color: "purple" 
        }];

    for (index = 0; index < data.length; index++) {
        html +=
            '<li id="' + data[index].id + '" style="color: ' + data[index].color + '">' +
                '<strong>' + data[index].name + '</strong>' +
            '</li>';
    } 

    content.innerHTML = html;
 })();

<ul id="content">

</ul>

​