Javascript 在修改Dom时，什么性能更好：修改多个单独的小元素或有图案的大元素集？如何最大限度地减少回流

概述： 我有一些javascript可以修改我的HTML。我注意到，当我在移动设备上查看页面时，速度似乎明显减慢。目前，我在尽可能低的级别上进行修改，但它发生了数百到数千次。由于html的生成方式，我正在编辑的元素是非常可预测的，并且遵循一种易于预测的模式。我想知道，由于这种模式的性质，对DOM进行更少的较大修改是否会更快：修改整个元素集（在类似块的编辑中）而不是对DOM进行许多低级元素编辑

解释遵循示例案例

下面是我的javascript:

$(document).ready(function() {
    makeRatingButtons(".RatedSection .Selector", "HL", 8);
}

function makeRatingButtons(SelectorText, Direction, NA, ExcludeText){
    if(typeof ExcludeText === "undefined") {ExcludeText = '';} else {ExcludeText = ":not(" + ExcludeText + ")";}
    var trueSelector = SelectorText + ExcludeText;
    var windowwidth = window.innerWidth;
    $(trueSelector).each(function(){
        var id = $(this)[0].children[0].id;
        var idHash = '#' + id;
        var clickevent = $(this).find('input').attr('onclick');
        var prefix = '<div id="123" class="Wrapper" onclick=triggerCheckActionOf(';
        prefix += "'" + id + "'";
        prefix += ');' + clickevent + ' for="' + id + '">';
        var suffix = '</div>';
        var str='';

        if (Direction == "HL"){
            var index = NA - $(this).find('input').val();
            if(index==0){
                str = prefix + 'NA' + suffix;
            }else if((index == 1 || index == NA-1) && windowwidth<=1000){
                str = prefix + '<abbr title=""><u>' + index.toString() + "</u></abbr>" + suffix;
            }else{
                str = prefix + index.toString() + suffix;
            }
        }else{
            var index = $(this).find('input').val();
            if(index==NA){
                str = prefix + 'NA' + suffix;
            }else if((index == 1 || index == NA-1) && windowwidth<=1000){
                str = prefix + '<abbr title=""><u>' + index.toString() + "</u></abbr>" + suffix;
            }else{
                str = prefix + index.toString() + suffix;
            }
        }

        $(idHash).after(str);
    });
};

<table id="a71904308a0e47c785d1e41ba4dd0e2c" class="RatedSection">
    <tbody><tr class="Header">
        <td></td>
        <td class="Label Center">Strongly Agree</td>
        <td class="Label Center">Agree</td>
        <td class="Label Center">Somewhat Agree</td>
        <td class="Label Center">Neutral</td>
        <td class="Label Center">Somewhat Disagree</td>
        <td class="Label Center">Disagree</td>
        <td class="Label Center">Strongly Disagree</td>
        <td class="Label Center">N/A</td>
    </tr>
    <tr class="Header_Numbers">
        <td></td>
        <td class="Number Center">7</td>
        <td class="Number Center">6</td>
        <td class="Number Center">5</td>
        <td class="Number Center">4</td>
        <td class="Number Center">3</td>
        <td class="Number Center">2</td>
        <td class="Number Center">1</td>
        <td class="Number NA"></td>
    </tr>
    <tr id="bdf9ed2961164d3a8bc27012c74af40b" class="RatedQuest">
        <td class="RatedQuest"><span class="QuestText">Overall, I would recommend this place to family and friends</span></td>
        <td class="Selector">
        <input type="radio" id="rabdf9ed2961164d3a8bc27012c74af40b_1" name="nrb_bdf9ed2961164d3a8bc27012c74af40b" value="1" onclick="">
        </td>
        <td class="Selector">
        <input type="radio" id="rabdf9ed2961164d3a8bc27012c74af40b_2" name="nrb_bdf9ed2961164d3a8bc27012c74af40b" value="2" onclick="">
        </td>
        <td class="Selector">
        <input type="radio" id="rabdf9ed2961164d3a8bc27012c74af40b_3" name="nrb_bdf9ed2961164d3a8bc27012c74af40b" value="3" onclick="">
        </td>
        <td class="Selector">
        <input type="radio" id="rabdf9ed2961164d3a8bc27012c74af40b_4" name="nrb_bdf9ed2961164d3a8bc27012c74af40b" value="4" onclick="">
        </td>
        <td class="Selector">
        <input type="radio" id="rabdf9ed2961164d3a8bc27012c74af40b_5" name="nrb_bdf9ed2961164d3a8bc27012c74af40b" value="5" onclick="">
        </td>
        <td class="Selector">
        <input type="radio" id="rabdf9ed2961164d3a8bc27012c74af40b_6" name="nrb_bdf9ed2961164d3a8bc27012c74af40b" value="6" onclick="">
        </td>
        <td class="Selector">
        <input type="radio" id="rabdf9ed2961164d3a8bc27012c74af40b_7" name="nrb_bdf9ed2961164d3a8bc27012c74af40b" value="7" onclick="">
        </td>
        <td class="Selector">
        <input type="radio" id="rabdf9ed2961164d3a8bc27012c74af40b_8" name="nrb_bdf9ed2961164d3a8bc27012c74af40b" value="8" onclick="">
        </td>
    </tr>
    <tr id="04bb8a8fce6f42a58fedcc69379cec68" class="RatedQuest Alt">
        <td class="RatedQuest"><span class="QuestText">Overall, my experience was a good value for the price paid</span></td>
        <td class="Selector">
        <input type="radio" id="ra04bb8a8fce6f42a58fedcc69379cec68_1" name="nrb_04bb8a8fce6f42a58fedcc69379cec68" value="1" onclick="">
        </td>
        <td class="Selector">
        <input type="radio" id="ra04bb8a8fce6f42a58fedcc69379cec68_2" name="nrb_04bb8a8fce6f42a58fedcc69379cec68" value="2" onclick="">
        </td>
        <td class="Selector">
        <input type="radio" id="ra04bb8a8fce6f42a58fedcc69379cec68_3" name="nrb_04bb8a8fce6f42a58fedcc69379cec68" value="3" onclick="">
        </td>
        <td class="Selector">
        <input type="radio" id="ra04bb8a8fce6f42a58fedcc69379cec68_4" name="nrb_04bb8a8fce6f42a58fedcc69379cec68" value="4" onclick="">
        </td>
        <td class="Selector">
        <input type="radio" id="ra04bb8a8fce6f42a58fedcc69379cec68_5" name="nrb_04bb8a8fce6f42a58fedcc69379cec68" value="5" onclick="">
        </td>
        <td class="Selector">
        <input type="radio" id="ra04bb8a8fce6f42a58fedcc69379cec68_6" name="nrb_04bb8a8fce6f42a58fedcc69379cec68" value="6" onclick="">
        </td>
        <td class="Selector">
        <input type="radio" id="ra04bb8a8fce6f42a58fedcc69379cec68_7" name="nrb_04bb8a8fce6f42a58fedcc69379cec68" value="7" onclick="">
        </td>
        <td class="Selector">
        <input type="radio" id="ra04bb8a8fce6f42a58fedcc69379cec68_8" name="nrb_04bb8a8fce6f42a58fedcc69379cec68" value="8" onclick="">
        </td>
    </tr>
</tbody></table>

<table id="a71904308a0e47c785d1e41ba4dd0e2c" class="RatedSection">
    <tbody><tr class="Header">
        <td></td>
        <td class="Label Center">Strongly Agree</td>
        <td class="Label Center">Agree</td>
        <td class="Label Center">Somewhat Agree</td>
        <td class="Label Center">Neutral</td>
        <td class="Label Center">Somewhat Disagree</td>
        <td class="Label Center">Disagree</td>
        <td class="Label Center">Strongly Disagree</td>
        <td class="Label Center">N/A</td>
    </tr>
    <tr class="Header_Numbers">
        <td></td>
        <td class="Number Center">7</td>
        <td class="Number Center">6</td>
        <td class="Number Center">5</td>
        <td class="Number Center">4</td>
        <td class="Number Center">3</td>
        <td class="Number Center">2</td>
        <td class="Number Center">1</td>
        <td class="Number NA"></td>
    </tr>
    <tr id="bdf9ed2961164d3a8bc27012c74af40b" class="RatedQuest">
        <td class="RatedQuest"><span class="QuestText">Overall, I would recommend this place to family and friends</span></td>
        <td class="Selector">
        <input type="radio" id="rabdf9ed2961164d3a8bc27012c74af40b_1" name="nrb_bdf9ed2961164d3a8bc27012c74af40b" value="1" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('rabdf9ed2961164d3a8bc27012c74af40b_1');" for="rabdf9ed2961164d3a8bc27012c74af40b_1">7</div>
        </td>
        <td class="Selector">
        <input type="radio" id="rabdf9ed2961164d3a8bc27012c74af40b_2" name="nrb_bdf9ed2961164d3a8bc27012c74af40b" value="2" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('rabdf9ed2961164d3a8bc27012c74af40b_2');" for="rabdf9ed2961164d3a8bc27012c74af40b_2">6</div>
        </td>
        <td class="Selector">
        <input type="radio" id="rabdf9ed2961164d3a8bc27012c74af40b_3" name="nrb_bdf9ed2961164d3a8bc27012c74af40b" value="3" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('rabdf9ed2961164d3a8bc27012c74af40b_3');" for="rabdf9ed2961164d3a8bc27012c74af40b_3">5</div>
        </td>
        <td class="Selector">
        <input type="radio" id="rabdf9ed2961164d3a8bc27012c74af40b_4" name="nrb_bdf9ed2961164d3a8bc27012c74af40b" value="4" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('rabdf9ed2961164d3a8bc27012c74af40b_4');" for="rabdf9ed2961164d3a8bc27012c74af40b_4">4</div>
        </td>
        <td class="Selector">
        <input type="radio" id="rabdf9ed2961164d3a8bc27012c74af40b_5" name="nrb_bdf9ed2961164d3a8bc27012c74af40b" value="5" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('rabdf9ed2961164d3a8bc27012c74af40b_5');" for="rabdf9ed2961164d3a8bc27012c74af40b_5">3</div>
        </td>
        <td class="Selector">
        <input type="radio" id="rabdf9ed2961164d3a8bc27012c74af40b_6" name="nrb_bdf9ed2961164d3a8bc27012c74af40b" value="6" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('rabdf9ed2961164d3a8bc27012c74af40b_6');" for="rabdf9ed2961164d3a8bc27012c74af40b_6">2</div>
        </td>
        <td class="Selector">
        <input type="radio" id="rabdf9ed2961164d3a8bc27012c74af40b_7" name="nrb_bdf9ed2961164d3a8bc27012c74af40b" value="7" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('rabdf9ed2961164d3a8bc27012c74af40b_7');" for="rabdf9ed2961164d3a8bc27012c74af40b_7">1</div>
        </td>
        <td class="Selector">
        <input type="radio" id="rabdf9ed2961164d3a8bc27012c74af40b_8" name="nrb_bdf9ed2961164d3a8bc27012c74af40b" value="8" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('rabdf9ed2961164d3a8bc27012c74af40b_8');" for="rabdf9ed2961164d3a8bc27012c74af40b_8">NA</div>
        </td>
    </tr>
    <tr id="04bb8a8fce6f42a58fedcc69379cec68" class="RatedQuest Alt">
        <td class="RatedQuest"><span class="QuestText">Overall, my experience was a good value for the price paid</span></td>
        <td class="Selector">
        <input type="radio" id="ra04bb8a8fce6f42a58fedcc69379cec68_1" name="nrb_04bb8a8fce6f42a58fedcc69379cec68" value="1" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('ra04bb8a8fce6f42a58fedcc69379cec68_1');" for="ra04bb8a8fce6f42a58fedcc69379cec68_1">7</div>
        </td>
        <td class="Selector">
        <input type="radio" id="ra04bb8a8fce6f42a58fedcc69379cec68_2" name="nrb_04bb8a8fce6f42a58fedcc69379cec68" value="2" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('ra04bb8a8fce6f42a58fedcc69379cec68_2');" for="ra04bb8a8fce6f42a58fedcc69379cec68_2">6</div>
        </td>
        <td class="Selector">
        <input type="radio" id="ra04bb8a8fce6f42a58fedcc69379cec68_3" name="nrb_04bb8a8fce6f42a58fedcc69379cec68" value="3" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('ra04bb8a8fce6f42a58fedcc69379cec68_3');" for="ra04bb8a8fce6f42a58fedcc69379cec68_3">5</div>
        </td>
        <td class="Selector">
        <input type="radio" id="ra04bb8a8fce6f42a58fedcc69379cec68_4" name="nrb_04bb8a8fce6f42a58fedcc69379cec68" value="4" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('ra04bb8a8fce6f42a58fedcc69379cec68_4');" for="ra04bb8a8fce6f42a58fedcc69379cec68_4">4</div>
        </td>
        <td class="Selector">
        <input type="radio" id="ra04bb8a8fce6f42a58fedcc69379cec68_5" name="nrb_04bb8a8fce6f42a58fedcc69379cec68" value="5" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('ra04bb8a8fce6f42a58fedcc69379cec68_5');" for="ra04bb8a8fce6f42a58fedcc69379cec68_5">3</div>
        </td>
        <td class="Selector">
        <input type="radio" id="ra04bb8a8fce6f42a58fedcc69379cec68_6" name="nrb_04bb8a8fce6f42a58fedcc69379cec68" value="6" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('ra04bb8a8fce6f42a58fedcc69379cec68_6');" for="ra04bb8a8fce6f42a58fedcc69379cec68_6">2</div>
        </td>
        <td class="Selector">
        <input type="radio" id="ra04bb8a8fce6f42a58fedcc69379cec68_7" name="nrb_04bb8a8fce6f42a58fedcc69379cec68" value="7" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('ra04bb8a8fce6f42a58fedcc69379cec68_7');" for="ra04bb8a8fce6f42a58fedcc69379cec68_7">1</div>
        </td>
        <td class="Selector">
        <input type="radio" id="ra04bb8a8fce6f42a58fedcc69379cec68_8" name="nrb_04bb8a8fce6f42a58fedcc69379cec68" value="8" onclick=""><div id="123" class="Wrapper" onclick="triggerCheckActionOf('ra04bb8a8fce6f42a58fedcc69379cec68_8');" for="ra04bb8a8fce6f42a58fedcc69379cec68_8">NA</div>
        </td>
    </tr>
</tbody></table>

.RatedSection .RatedQuest .Wrapper{
    text-align: center;
    vertical-align: top;
    background-color: #D6D5D5;
    border-radius: 3px;
    color: black;
    padding: 5px 10px;
    padding-top: 10px;
    transition-duration: 0.4s;
    font-size: 16px;
    vertical-align: middle;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    width: 25px;
}

input {
    display: none;
}

简单解释： 所以基本上我有一个网站，它有一个表格，可以获取一些关于东西的信息。有一些黑盒代码生成HTML来提问，它以“在javascript之前”示例中所示的方式生成。我的javascript代码所做的是在每个选择器div中的输入元素后面添加一个div。第一个和最后一个选择器有一些特殊规则，可以为用户提供一些上下文，但这对于这个问题并不重要。从瀑布图上看，似乎有很多“重新计算风格”的步骤。这是回流焊。我是否应该经历更新整个“RatedQuest”div类的过程，我是否应该期望看到更低的回流成本

对我来说重要的是： 目前，我在页面第一次呈现后等待了约17秒，以反映（更新绘图）javascript在注释3上产生的更改。我想我可以忍受5秒钟的时间，但我有理由相信使用更广泛的DOM更新会减少重画时间，还是我应该考虑其他一些事情

对您可能重要的数字： 我应该注意到，如果我对此有异议，这些问题有600多个实例。有这么多问题，我正在看“$（trueSelector）.each”中的8*600+或4800+执行

免责声明： 由于我无法控制的原因（权限和官僚作风），我无法访问html源代码，只能访问可以插入链接标记的系统。所以我不能直接编辑html使其成为我想要的，但我可以编写一些javascript来更改html。我知道最简单和最好的解决方案就是根据我的需要编辑HTML，而不使用任何javascript，但我没有这种奢侈

谢谢

---

任何对此有见解的人，我都非常感激。谢谢。

一件简单而有用的事情是，每次调用

$（this）

都会启动一个新的jQuery对象，这需要时间。只需将它别名一次

var$this=$（this）谢谢，我将进行修改。因此，我现在看到约13.5秒的重画时间，这是改进的良好开端。如果我能缩短10秒，我会很高兴。考虑到您显示的标记无疑比实际标记小得多，这真的很难说。您能否制作一个显示所有相关标记的
jsFiddle
？即使有数千行（最具体的是HTML），结果证明jquery很慢而且很糟糕。使用纯javascript的速度要快得多。一个简单而有用的事情是，每次调用
$（this）
都会启动一个新的jQuery对象，这需要时间。只需将它别名一次
var$this=$（this）谢谢，我将进行修改。因此，我现在看到约13.5秒的重画时间，这是改进的良好开端。如果我能缩短10秒，我会很高兴。考虑到您显示的标记无疑比实际标记小得多，这真的很难说。您能否制作一个显示所有相关标记的
jsFiddle
？即使有数千行（最具体的是HTML），结果证明jquery很慢而且很糟糕。使用纯javascript的速度要快得多。