渲染的问题 关于优化

Question

需求：根据页面的每个UL的里面的input的value值然后渲染出对应li的选中的状态，【不依赖第三方库，原生实现】
现在功能已经实现了，但是在性能这边是相当不好的 ， 请大神给他个思路或者一段代码 让我理解一下 谢谢

Answer 1

<div id="list">
    <ul>
        <input type="hidden" value="2" />
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul>
        <input type="hidden" value="1" />
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul>
        <input type="hidden" value="3" />
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

init();
function init() {
    var dul = document.getElementById('list'), uls = dul.children, i = 0, len = uls.length;
    for (; i < len;) {
        var lis = uls[i++].children, index = lis[0].value;
        lis[index].className = index;
        //lis[index].innerHTML = index;
    }
}

Answer 2

应该是DOM的重排和重绘次数过多，影响了DOM性能，建议直接在js中生成html，然后插入到dom中：

let starList = [3, 2, 5];
function loadStars() {
    let dom = '';
    starList.forEach(e => {
        dom += '<ul>/
            <input value="' + e + '" type="hidden"/>'
        for (let i = 0; i < 5; i++) {
            dom += i < e ? '<li class="on"></li>' : '<li></li>';
        }
        dom += '</ul>';
    });
    document.getElementById("list").innerHTML = dom;
}